May I ask for help, I need to change the text of the button of Jquery Dialog from code behind, how can I do this? I know I can just set the button text from the Javascript but depending on the message I'm going to set, it maybe CANCEL, OK, YES, NO. So I would like to know how to dynamically change it. Thank you!

This is my javascript but it's not working:

 <script>
      $(function openDialog(msg) {

         var stringMessage = msg.text;
        $( "#dialog-1" ).dialog({
            dialogClass: "no-close",
            draggable: false,
            resizable: false,
            closeOnEscape: false,
            modal: true,
            autoOpen: false,
            buttons: [
                {
                    text: stringMessage,
                    click: function() {
                    $( this ).dialog( "close" );
                    }
                }
            ]

        });

        $("#dialog-1").dialog("open");
     });
</script>

This is my html:

<div id = "dialog-1" title = "Warning" >  
    <p id="msgWarning" runat="server" >Message Here</p>
</div>

This is my code behind on vb.net:

Dim msg As String = "Exit"
Page.ClientScript.RegisterStartupScript(Me.GetType(), "startDialog", "<script language='javascript'>openDialog('" & msg & "');</script>", True)

Say your server side code is this:

Protected Sub cmdTest_Click(sender As Object, e As EventArgs)

    Call MyDialog("My Title",
        "Delete this file<br/><i>(This cannot be un-done)</i>",
        "Ok", "Cancel")


End Sub


Sub MyDialog(sTitle As String,
             sBody As String,
             sOkText As String,
             sCancelText As String)

    Dim strJava As String =
        $"mydialog('{sTitle}','{sBody}','{sOkText}','{sCancelText}');"

    ScriptManager.RegisterStartupScript(Page, Page.GetType, "MyPop", strJava, True)

End Sub

Ok, so then our markup is this:

    <asp:Button ID="cmdTest" runat="server" Text="Launch/show dialog VB code"
        OnClick="cmdTest_Click" />


    <div id="DialogArea" style="display: none">
        <h4 id="mybody"></h4>
    </div>


<script>

    function mydialog(sTitle, sBody, sOkText, sCancelText) {
        myDialog = $("#DialogArea")
        $('#mybody').html(sBody)
        myDialog.dialog({
            title: sTitle,
            modal: true,
            appendTo: "form",
            dialogClass: "myshadow",
            buttons: [
                {
                    id: "myOkBtn",
                    text: sOkText,
                    click: function () {
                        myDialog.dialog('close')
                    }
                },
                {
                    id: "MyCancel",
                    text: sCancelText,
                    click: function () {
                        myDialog.dialog('close')
                    }
                }
            ]
        })
    }
</script>

And now the result is this:

Edit2: Putting this to use for say delete buttons etc.

Ok, now that we have a working dialog, the "real" value use is of course in typical button code. Say a delete button, or even a button in a gridview.

Let's do a example with grid view, but even just a plain button on a form will work the same.

Theory: so, in desktop land, we often have a button, click on it, then prompt to confirm (say a delete option).

In web land? Well, due to the page life cycle and post-back?

We have to "flip" this backwards so to speak.

As we all know, a plain regular button click in a webform page can be "controlled" by a a JavaScript event.

So buttons have BOTH a server side click event, and a client side event.

If the client side event returns true, then the button runs, and if JavaScript returns false, then the server side button DOES NOT run.

However, ONE extra step and issue has to be dealt with.

jQuery.UI, and in fact most JavaScript routines DO NOT halt code. That means this does NOT block or freeze the browser code (it simple not allowed, or better stated "frowned" upon.

What that means is when we run the js code to pop the dialog, the js code we just used DOES NOT HALT nor wait.

In other words, the call to pop the dialog will run, pop dialog AND THEN FINISH running!

to deal with this issue, we use a bit of a trick:

We add a true/false flag to our JS code AND WE WILL then click the button again!

So, I first just setup the button click (say to do the delete). I test, get that code working.

So, say this gridview:

        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
            CssClass="table table-hover" Width="45%"
            DataKeyNames="ID" >
            <Columns>
                <asp:BoundField DataField="FirstName" HeaderText="First Name"   />
                <asp:BoundField DataField="LastName" HeaderText="First Name"    />
                <asp:BoundField DataField="HotelName" HeaderText="Hotel Name"   />
                <asp:BoundField DataField="Description" HeaderText="Descripiton" />
                <asp:TemplateField HeaderText="Delete" ItemStyle-HorizontalAlign="Center">
                    <ItemTemplate>
                        <asp:ImageButton ID="cmdDelete" runat="server"
                            ImageUrl="~/Content/trashcan1.png"
                            Width="48px"
                            Height="40px" />
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>

Now, in place of a plain button, I used a "image button", but it still works 100% the same for this example.

So, now we need to write our server side delete code.

Keep in mind that a button on the page? Well, in most cases we can just double click on the button to add a click event.

However, for buttons inside of say a gridview, repeater, listview etc.?

Well, we can't do that "simple" click on control, since we get the gridview or whatever "container" has that control.

However, you STILL can add that plain click event, and the way we do that is to add the click event in markup.

you type in onclick=, and when you hit "=", then inteli-sense pops up, and "provides" the option to add a click event. The result is thus 100% the same for the button (say if it was outside of the gridview).

So, that looks like this:

so, for listview, repeater, or any type of data bound control, you can STILL drop in that plain button (or in this example an image button).

And as above shows, that's how we add the click event (since we can't double click on such nested buttons inside of the gridview).

So now we write our delete a hotel row code. That code is thus this:

Protected Sub cmdDelete_Click(sender As Object, e As ImageClickEventArgs)

    Dim btn As ImageButton = sender
    Dim gRow As GridViewRow = btn.NamingContainer

    ' get database row PK id
    Dim intPK As Integer = GridView1.DataKeys(gRow.RowIndex).Item("ID")

    Dim strSQL =
        $"DELETE FROM tblHotelsA WHERE ID = {intPK}"

    MyExecute(strSQL)
    LoadGrid()    ' re-load grid update display

End Sub

Again note the nice trick/tip to get the current row. This works for listview, gridview, repeater etc.

Ok, so now we have a working delete button.

However, as I noted, buttons have both client side click and server side events.

And if that routine returns true, then server side button runs, and if the js code returns false, then the server side button does not run.

So, let's add our client side click to that button.

this code:

<asp:ImageButton ID="cmdDelete" runat="server"
    ImageUrl="~/Content/trashcan1.png"
    Width="48px"
    Height="40px"
    onclick="cmdDelete_Click"
    OnClientClick="return mydelpop(this,'<h4><i>Delete Hotel?</h4></i>')"
    />

We pass 2 values. "this" means the current button. I like passing that, since then we can use the position to place the dialog RIGHT beside the row button we clicked on on the gv.

Since I like delete button on the right side of the gv, then I pop the top most right corner of the dialog to the lower left corner of the button we just clicked on.

And now our jQuery.UI dialog code.

<script>
    var mydelok = false
    function mydelpop(btn,sPrompt) {

        if (mydelok) {
            mypopok = false
            return true
        }

        myDialog = $("#mypoparea")
        myDialog.html(sPrompt)
        myDialog.dialog({
            title: "Delete Record",
            modal: true,
            sizable: true,
            width: '380',
            closeText: "",
            position: { my: 'right top', at: 'left bottom', of: btn },
            buttons: {
                Delete: function () {
                    myDialog.dialog('close')
                    mydelok = true
                    btn.click()
                },
                cancel: function () {
                    myDialog.dialog('close')
                }
            }
        })
        return false
    }
</script>

Note VERY close what the above does.

We set a var mydelok = false.

The user clicks on the button, calls our code, display dialog and RETURNS FALSE to the button!!!! As noted, such code does NOT halt like js alert() or confirm(). js code is "asynchronous".

So, now the dialog is display.

If user hits cancel, then we just close dialog.

If user hits "ok" (delete), then we set our flag = true, AND THEN CLICK the button again!!! The button is clicked, client side code runs again, and this time it returns true, and thus server side code will run.

The end result looks like this:

Note how when I click on the delete button, the dialog box is position on the same row - this helps the user see which row they just clicked on.

So, I just tend to build, setup, write the code for the button in question.

I THEN add the jQuery.UI dialog to control if that button code will run or not.

As noted, a nice touch in a grid view is to add the "position" of the box to follow the were on the screen the button was clicked. This can be used for any button, but especially helps for a grid view example.

And as a FYI: Since I so often have to do the above, I built a user control that I can just drop onto a form, and thus I don't have re-write this same code over and over each time I need a dialog confirm for code behind.

Edit: What about both changing the dialog and confirm/run server side button

Ok, this could be a "book" sized response. And the short answer is you don't combine the two concpets!!!

So, our 2 concepts are:

Dialog pop, run the server side button, yes or no.

Dialog pop, changing the buttons and text.

So, for all practicual purposes? Yes, it would be nice to combine the above 2 concpets. However, I don't recommend you do this.

Why?

Well, top on the list is you need 2 round trips. (that means 2 post-backs). To make a VERY long story short? Your job as a developer, and this is ESPECIALLY the case for web forms? they are VERY prone to using and causing too many post-backs. Abuse this design considartation? Then what will occur over time is users, and people evaluating your site and work will state that your using the WRONG technology (web forms). They will tell you to dump that old stuff, and thus you risk all your work as being outdated, and too server side heavy wise.

Remember, all these new fancy frameworks like react.js, and SPA pages (single page applications) are attempting to REDUCE full page post-backs. In fact, these frameworks attempt to move AS MUCH AS POSSIBLE to the client side browser.

And they are shooting for this goal since THEN when a user clicks on a button, or does something the web page responds near instant. (gives users a desktop like or phone app like experience - not some old clunky web site).

So, while it is "possible" to combine the above 2 concepts? No, I don't recommend you do.

In other words, if I want to "confirm" a button? Then YOU as the designer better figure out what the buttons etc. are supposed to look like and THEN code out accordingly.

Does this require "more" effort on your part? Yes, it does!!

However, as a developer, we still going to use a GAZILLION types of dialogs - they are without question one of the MOST common types of requirements here. And with lots of dialogs, then we as a developer need that "flexibilty" to add many dialog boxes, or at least "some", and when we add them, we want custom text for buttons etc.

So, what I done is build a FEW general routines to deal with these "use cases".

So, for a gridview, delete row button? Well, you don't need to change EVERY time the resulting dialog. However, one could argue that my delete Hotel row button may VERY well want to say include the Hotel Name in the dialog box. You CAN do this, but I would not.

However, we STILL want that flexibility to change text.

So, for example, delete a file on page like this:

So, in above, I had a "confirm" and run server side code if you hit ok.

But, EACH row was the same, so LITTLE motivation and advantage exists to set the dialog text server side.

So, I have a routine setup for this.

I just happen to use a custom user control. (so I can just drag that control onto the form). It was this for above:

So, in above I set the ok text, cancel text, the icon, and the button to run when you click ok.

but, I did NOT need to change the content each time, so while it was "static", I was able to set the text, title and buttons.

However, what about the case in which context DOES change.

Such as this example:

So, in above I used my SAME dialog library.

but, once again, LITTLE advantage existed to set the ok/cancel button text, but, the content INSIDE the 2 dialogs most certainly had to change, had to be dynamic, and had to be set by code behind.

However, the "div" that I pop in each case? I was able to set the content on page load. once again, I don't click the button, set the text, and FIRE again, since that's too many round trips (and I don't want the page to suffer a post-back. In fact the code in this example DOES NOT like extra post backs. You either close the page, or accept or reject.

So, in the above 2 dialogs?

I have this:

So, I allow one to specify a "div" for the content, and that's loaded by code behind (on page load).

However, the rest of the dialog? Same as always, I set the button text, the button icon, the button to run when clicked on, and the title.

So, by good design choices, I VERY rare have the requirement to set the buttons and options with code behind. And the MASSIVE bonues points is then I don't suffer 2 routine trips.

I mean, if you are going to click on a button, and say pop a dialog to edit a reocrd? Sure, you will suffere a round trip. (button click, load up div to edit, inject js to pop dialog). That's ok. But, for JUST a confirm dialog, I don't want 2 round trips. And thus as a developer descision, I don't set the buttons text ON CLICK each time, since that's too expensive from a user "responsive" point of view, and in most cases my ONLY goal is to setup those buttons - setting them up in some markup (client side code) or setting them up in some server side code does NOT really help a whole lot, but the elimination of round trips, and INSTANT response? That's gold!!

So, you need/want to cobbile together probley about 2-3 routines. One ceratinly will let you set the buttons, but in MOST cases, setting the text of the buttons can be done in client side code, and server side code does not help much. I suppose in a "few rare" cases, being able to set the text of the buttons server side could be done, but the downsides outweight the up-sides.

As noted, I needed quite a few dialog boxes for all kinds of things, and thus sat down, and wrote out the features I wanted.

Icons for buttons, dynamic "body" in that div - but optional.

I also add a "position" option 1 - lower left, 2, lower right, and page center.

And I also settled on font-awesome for the icons, since bootstrap 4 and later dropped support for their icons.

so, short answer:

I don't need to set the text of the buttons server side - since few cases exist, but for dialogs that show some info, then fine. However, for a "confirm" button run? Nope, I don't do that, since it would cost me 2 round trips, and thus I don't allow it as a "personal" design decision, since web forms already has a un-fair bad rap in regards to posting back too many pages. And I want a FANTASTIC user experience.

However, you CAN most certainly say on page load or whatever, "setup" the text of the buttons - since then any time the dialog pops, the button text etc. will show as you like. I just don't think a double round trip is warranted for such use cases.