Using jQuery UI with ASP.NET Webforms (.NET Framework 4.8)

Question

I was reading another post stating that JQuery UI causes conflicts with Bootstrap and that Bootstrap should be used over JQuery UI or Bootstrap should be uninstalled. I am not sure this would be an effective use of my time in an enterprise application entering beta, as it may break too many things.

I am attempting to alter a dialog modal in order to display multiple dialogs with messages databound from the server that users MUST read on best practices (ironic given that the method to display the dialog may not be a best practice itself).

First things first, I cannot seem to get multiple modals to display on the same page using JQuery UI. This is the JavaScript I am using:

var $j = jQuery.noConflict();  
function ShowModalPopup(message, label1, label2, button1, button2) {  
    $j(function () {  
        $j("#dialog").append(message);  
        $j("#dialog").dialog({  
            resizable: false,  
            draggable: true,  
            closeOnEscape: true,  
            width: "auto",  
            position: ["center", "center"],  
            dialogClass: "modal",  
            zIndex: 999999,  
            modal: true,  
            buttons: {  
                Close: function () {  
                    $(this).dialog("close");  
                }  
            },  
            open: function () {  
                switch (title) {  
                    case 'Error!':  
                        $(".cssclass").find("ui-widget-header").css("background", "#FFA3A3");  
                        break;  
                    case 'Warning!':  
                        $(".cssclass)").find("ui-widget-header").css("background", "#FFFFA3");  
                        break;  
                    //some other cases for alerts here  
                }  
  
            }  
        });  
    });  
};

and this is the control I would like to reuse:

Answer

Ok, first up: You can quite much ignore suggesting that jquery.UI dialogs, and bootstrap will mess this up. Everyone uses bootstrap, and jquery, and adding jquery.UI dialogs is not any big deal at all - its just not. The only traps occur when you try to mix and use bootstrap dialogs with jquery.UI ones. (don't do that!!). While I LOVE bootstrap, I very much do NOT like their dialogs - (they look fantastic, but the way they works is poor, and I don't use them).

So, with above out of the way, the next issue is "how" the jQuery.UI dialogs work. In 99% of cases, you put your content you want to pop up inside of a div (and set style/display = none - jquery.ui dialog will then do the hide, and showing for you automatic.

So the jquery $("dialog") means nothing here, you will use $("#MyDivToPop") as the selector. (and the many examples on the web would be better if they were CRYSTAL clear in such examples - using variable names as same as type (often seen in c# and vbnet is a beyond confusing for people to learn code ).

Ok, so we have several goals here:

We want to pop a dialog.

We want to use code to fill out what going to be in that dialog.

The code MOST likely is server code behind, (or at least it can be!!!!).

So, lets cook up and bake an simple example here.

Lets load up and display a simple grid view - some hotels.

but, lets also drop in a plane jane regular server side button. When we click the button, we will pop up MORE information and details about the row (hotels) we just clicked on.

From this example, you should then be able to run with this.

Approach:

So, as noted, we need to drop in a "div" on this page.

We will click the button (server side). Fill out the controls and information we want to pop, and then pop the dialog (our simple div with markup) as a dialog.

So, first up, lets say we have this simple grid view. Everyday kind of thing we do:

Ok, and our code to fill out above can be this - again plane jane stuff so far.

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load  
        If Not IsPostBack Then  
            LoadGrid  
        End If  
    End Sub  
  
    Sub LoadGrid()  
  
        Dim rstData As DataTable  
        rstData = MyRst("SELECT * FROM tblHotelsA ORDER BY HotelName")  
        GHotels.DataSource = rstData  
        GHotels.DataBind()  
  
    End Sub

Ok, so now we have this:

Now, we need that jQuery.UI dialog - when we click on the info, we want to pop that dialog (and this will give you the ideas as how to use this for your pop ups that need values from server side code.

Ok, so the next part, is to drop in that "div" and put our markup inside of that div that we want to display. What you drop and put inside is really NOT different then any other kind of markup you would place on a page. Once you have it all pretty, then change the css style = display:none - (but only after you happy with the layout).

So, lets have say this markup for the popup:

Ok, so now we need our JavaScript routine to pop the above div - that will look like this:

Ok, that is quite much all we need. Only part left is now our row button click in the grid - but that's 100% server side and EASY code behind - stuff you always been doing anyway.

So, click on a row - we get PK, pull the data, fill out the div, and then pop (with script inject).

We have this code:

    Protected Sub cmdView_Click(sender As Object, e As EventArgs)  
  
        ' Row click - get hotel informaton, fill out the pop div  
        Dim btn As Button = sender  
        Dim gRow As GridViewRow = btn.NamingContainer  
  
        Dim intPK As Integer = GHotels.DataKeys(gRow.RowIndex).Item("ID")  
        Dim rstData As DataTable = MyRst("SELECT * FROM tblHotelsA WHERE ID = " & intPK)  
  
        With rstData.Rows(0)  
            txtHotel.Text = .Item("HotelName")  
            tCity.Text = .Item("City").ToString  
            tProvince.Text = .Item("Province").ToString  
            chkActive.Checked = .Item("Active")  
            chkBalcony.Checked = .Item("Balcony")  
            chkSmoking.Checked = .Item("Smoking")  
            txtNotes.Text = .Item("Description")  
        End With  
  
        ' ok, div information filled out, now call our js pop function.  
        Dim strHotelName = """Information for " & rstData.Rows(0).Item("HotelName") & """"  
  
        Dim strJavaScript As String = "popinfo(" & btn.ClientID & "," & strHotelName & ")"  
        Page.ClientScript.RegisterStartupScript(Me.GetType(), "My Pop script", strJavaScript, True)  
  
    End Sub

Again, real plane jane code. That code grabs the information, SHOVES it into the div with our controls, and then we register the function (to pop the dialog). the results are then like this:

So, the above should get you started, and give you how to pop the div, and also fill out information from code behind BEFORE we pop the dialog.

A few more notes and tips:

If the dialog pop has ANY post-backs, then it will of course collopse, and this is OFTEN great, since you click some button, and we want the dialog to close anyway.

However, if you need the popped jquery.ui dialog to survive post-backs, then you need to move the div OUTSIDE of of the update panel. As per your posted markup, I see you have a update panel, and the way to make this work is to reverse what you have.

So, it will be like this:

  "my div to pop"  

  update panel  
      content  
          your markup inside  
      end content  
   end update panel  
end my div

so, the outer most part of the dialog to pop needs to be the "div", then update panel, then content.

With above the pop up can survive post-backs in most cases. However, if you do need this, then make sure you also add
appendTo: "form" in the jquery.UI dialog settings - you don't need this in most cases, but for post-backs to work, and modify the markup in that dialog, then you need the appendTo: form.

Regards,
Albert D. Kallal (Access MVP 2003-2017)
Edmonton, Alberta Canada

Answer

I was reading another post stating that JQuery UI causes conflicts with Bootstrap

This is true there are conflicts between the two UI libraries. From a practical design perspective it does not make a lot of sense to load two different UI libraries that have the same features. Especially in an enterprise application which commonly has many supporting developers. This creates a situation where one developer uses the jQuery dialog and another uses the Bootstrap modal in the same project.

However, the conflicts between the two libraries can be fixed, Do a quick google search for solutions.

The main design bug with the sample code has to do with abruptly overwriting HTML content that was used to initialize the dialog widget. The update panel overwrites the HTML div. At this point the UI application is broken. There's a dialog assignment to a UI element that no longer exists in the DOM. It does not matter if the new HTML div id attribute equals "dialog". The original div element is gone and the callbacks and handlers are wired up to an element that no longer exists. In other words a memory leak.

A better approach might be the following if you still want to use the update panel. I'm not sure the update panel is needed...

..but the code above assumes HTML content is rendered server side.

The ShowModalPopup() passes a "message" to the dialog. This means you have to design the code behind to populate the message variable; hidden file, code blocks etc. Then execute the code. It is not clear how ShowModalPopup() gets executed, client side page load, button click, etc.

Reviewing your code it seems the intent is to prompt the user with a warning or error. I would use a Bootstrap alert rather than a dialog. The alert is simpler to use for prompting.

Can you clarify the use case and provide the logical flow?

Answer

Hi @James Finnerty ,

First things first, I cannot seem to get multiple modals to display on the same page using JQuery UI.

I must need your requirement clearly. Do you want to show multiple modals at the same time using the same codes you write? Could you share more information about why do you use the modals and where to use?

Best regards,
Yijing Sun

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Using jQuery UI with ASP.NET Webforms (.NET Framework 4.8)

3 answers