jQuery dialog content from aspx page

Question

I am not well versed in jQuery widgets, so need some directions here please. We need to show a modal dialog with jQuery. Data for controls should be loaded on load and as a result of manipulations inside dialog. Easy way to load content I found is to specify aspx page for it:

$(cnt).dialog({
  autoOpen: false,
  modal: true,
  ...
  open: function () {
    $(this).load('myDialog.aspx');
  }
 });

And I guess data could be retrieved by defining Ajax methods in that page as well.

I also heard about some jQuery html templates, but didn't use them.

Also from official doc it can be done

:ooks like content can be simply specified inside container tag.

  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

Site itself is in ASP.NET WebForms.

So my questions are

• what would be a preferred way to construct html layout inside dialog and more importantly why?
• what options would be to use as data endpoints? I know http handlers are quite obsolete. Creating separate WebApi service might be an overkill - there is no such practice in this project. And then, how about authentication?

Answer 1

Ok, a few things: We assume jQuery.UI and the jquery.ui dialog. So, we assume both jQuery and jQuery.UI are referanced for this page.

First up: The dialog will as a general rule be triggered (opened) as a result of a client side button click. (no post back).

Next: The content in the dialog can be: Another whole web page. A div from the current page.

So, depending on your needs, the "content" for the dialog can supplied be another web page, or the content can be supplied local.

next up: how do deal with the user response. Typical response could be: Ok (perhaps submit), or Ok, and Cancel.

Now NOTE AGAIN very carefull: That dialog cannot do a post back. If you post back in that dialog, then all h breaks loose here.

So, for starters, lets setup a dialog and do TWO VERY important things (things that 99% of the examples on the internet leave out - and thus is MUCH the cause of world poverty and suffering).

We will place two buttons in the dialog. And we ALSO use the dialog feature that adds/places built in custom buttons on the dialog. What we looking for is how can you deal with either say a Ok, Cancel button as part of the dialog. And how can we deal with Ok, cancel as your OWN custom buttons. With these two Rosetta stones laid out, then you are quite much free and off to the races for the next 10 years of code you need to do darn near any use case you can cook up.

one more VERY important concept: Even if the source of the dialog is a "div" in the local page, or that if you load a WHOLE page for the dialog? The dialog STILL runs in the context of the CURRENT page. That means the button click events will run in the current page (script) and not the page you loaded!!!

And you are 100% free to drop into that content asp.net buttons. Just make sure that you prevent the post back of that button with a return false in the js.

So, lets wire this up.

So, we thus need this flow:

Display dialog on button click (client side js).

User does whatever in that dialog.

User now clicks on a button (say ok, or cancel).

We CAN and will for the sake of going crazy? We will drop on the form and use standard asp.net buttons. There is really no need to adopt HTML “input” buttons. (You can, but no real need here).

I am going to use BOTH built in jQuery buttons and ALSO two standard buttons in that dialog (the reason is many, but that way YOU can choose either way, and learn this. (boy, do I with someone had laid out how this works for me!!!). So, I going to save you much pain and suffering here.

So, lets start from the top: Our button code to pop the dialog.

The asp button will be this:

<asp:Button ID="showdialog" runat="server" Text="Show the dialog" 
    OnClientClick="showpop();return false;"/>

Note close in above!!!! We use OnClientClick=showpop();return false. This will thus run js code, and NOT do a post back. The return = false is VERY important here, since if you leave that out, then the standard asp button will post back like it “normally” does. And we break our new rule!! – no post backs inside the dialog!!.

Ok, so that is the button to launch the dialog.

The js code to launch the dialog can look like this:

function showpop() { var mydiv = $('#popdialog'); mydiv.dialog({ autoOpen: false, modal: true, title: 'My cool other page', width: '30%', position: { my: 'top', at: 'top+150' }, buttons: { 'ok': mycustomok, 'cancel': mycustomcancel }

    });
    // Open the dialog
    mydiv.dialog('open');
}

As noted, the content for the dialog can be another web page, or a "div" Lets do the div example first. Now in above, we have two built in buttons (a feature of the dialog), and as noted, we going to drop in two asp buttons that do the SAME thing.

Our div will look like this:

<div id="popdialog" runat="server" style="display:none">
<h2>My cool pop dialog</h2>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<br />

<asp:Button ID="MyOk" runat="server" Text="My custom ok" 
    OnClientClick="mycustomok();return false;"/>
<br />

<asp:Button ID="MyCancel" runat="server" Text="My custom cancel" 
    OnClientClick="mycustomcancel();return false;"/>

</div>

Note again, we have two standard asp.net buttons. But NOTE the client side code stubs we specified for both of the above (mycustomok, and mycustomcancel).

The only real thing to note in above is the style=”display:none” for the WHOLE “div”. This will thus hide the div, and it will not display when the page loads.

So, when we click on the button, it will show the dialog. You will see this:

So, we have our two custom buttons, and the two jQuery but in buttons. If you don't want the built in ones then simply remove the above "buttons" part of the dialog.

So, the two js stubs we have for this are:

function mycustomok() {
    // first, close the dialog
    $('#popdialog').dialog('close');
    #('#HiddenOk').click();
}

function mycustomcancel() {
    // first, close the dialog
    $('#popdialog').dialog('close');
    $('#HiddenCancel').click();
}

I can WELL NOTE that you do NOT need the .dialog('close') WHEN ONLY using the built in buttons (they will close dialog for you). But if you going to drop/place custom buttons in the content of the dialog then you do need to close the dialog.

Now, the next trick? Well, you can start to wire up some web methods, and ajax calls. But that is quite a bit of pain. So, we want code behind to run for ok, and code behind to run for cancel.

And as noted, based on either choice, we will do a post back and run code behind. As I stated, the short way, easy way is to drop two hidden buttons on the form, they will look like this, and of course our outside the above div

<asp:Button ID="HiddenOk" runat="server" Text="hidden ok" style="display:normal"/>

<asp:Button ID="HiddenCancel" runat="server" Text="hidden cancel" 
    style="display:normal"/>

Note careful (note BEYOND careful here). I have display = normal for the two buttons. The reason is that then with the designer you can double click on the button, and write your code behind. When you are DONE and have both code behind stubs written, then change the above display:normal to display:none to hide them. So we left the buttons visible for easy development. Once you wired up the code behind (simply double click on the buttons in the designer), then you are jumped to the code behind editor, and can write that code. You then hide them.

Your two server side event code buttons (code behind would look like this:)

Protected Sub HiddenOk_Click(sender As Object, e As EventArgs) Handles HiddenOk.Click
    Debug.Print("dialog ok code run")
End Sub

Protected Sub HiddenCancel_Click(sender As Object, e As EventArgs) Handles HiddenCancel.Click
    Debug.Print("dialgo cancel code")
End Sub

The above two are vb.net, but it really much the same with C#.

The “click” button trick as noted is rather nice. It solves a LONG list of issues, and does so with great ease. You get the needed post back. You get to run your own cute little code stub behind. You don't have to write up ajax calls to do this!!!

So this follows the whole asp.net design pattern in which you drop buttons on a form, click them, and you get to run that nice little short code behind stub. And it all wired up automatic for you.

Thus in summary:

Don't try + attempt post backs in the dialog – you REALLY can't do this. And you find they don't work anyway! So buttons on that dialog WILL run “js” code. You can use asp buttons if you want, just remember the extra return=false part. Once the dialog is closed and all good, then and ONLY then do you want the post back to occur.

So, no postbacks while that dialog is open - simply don't try or do it. that includes trying to use a up-date panel.

Last but not least? In above we loaded content from a div, and in most cases that is quite much the suggested road here.

however, you CAN in place of a "div" change the above to load a whole different page.

eg like this:

function showpop() { var mydiv = $('#popdialog'); mydiv.dialog({ autoOpen: false, modal: true, title: 'My cool other page', width: '30%', position: { my: 'top', at: 'top+150' }, buttons: { 'ok': mycustomok, 'cancel': mycustomcancel }

    });
    // Open the dialog
    mydiv.load('WebForm6.aspx');
    mydiv.dialog('open');
}

So note we STILL needed a div on the page. It will be "empty", and we NOW use the .load() to load a whole different/separate web page into that div. This can be any other web page you have. Or maybe some dialog you re-use over and over. (and that web page will in fact be loaded into that div on the current web page for you).

Note again:

Our rules about no post backs in those pages still applies. So if there is to updates or edits or interaction inside of that page? Then you have to start adopting aJax calls and use no post back code to update data. However, if the dialog is a confirmation, or even that the user does select some check boxes, enters some data etc? Well then no post-backs are required until the final ok, or cancel anyway.

As noted, if you don't want to do anything for the cancel button(s) (built in or custom), then you can just run that code to close the dialog and take no further actions. And if it is a built in dialog button, then you don't even need the code stub to close the dialog as that is done for you automatic with built in buttons. But both sets of buttons do the exact same thing, and thus are you are free to use built in button feature, or simply drop your own buttons into that div (or other web page).

So, in summary:

You need a div on the page for the dialog (EVEN if you going to load another page into that div as per last example).

It is typical to place, build and create that div + content on the same page. Or as noted, can pull/load a whole page, but you still need that div on the page.

If you not pulling a page, don't forget to set with style="display:none" to hide the content. (jQquery.ui will hide/show for you, but still need to have it display none from the start to hide it).

You can't have post backs occur, since that dialog is now part of your whole web page DOM, and any post back will quite much blow up the whole dialog process.

If you do need post backs upon that ok, cancel or whatever? Well again to save world poverty's and having to wire up a whole bunch of AJAX code, or say use js _do postback() with some parameters that requires additional logic in the web form's on-load?

Then use the cute click(); trick for hidden buttons. You save tons of time, tons of js code, and wire up, and you get the classic click a button and run code behind development model anyway. of couse in this case, those buttons do give us the required and needed postback and run of code behind, and that's quite much what we want after the dialog is all said and done.