Wednesday, January 6, 2010

jQuery Dialog Example: ASP.NET with UpdatePanel

A while back I posted about jQuery Dialogs (jQuery: Using a dialog on an ASP.Net UpdatePanel) and it looks like that is a popular topic so I have decided to create an example of how to use them on an ASP.NET web page that includes an UpdatePanel.

Download:UpdatePanel.zip






In this example, I have created a class (codeoutlaw.Dialog.js) to manage the instantiation, opening and closing of the dialog along with some subtle issues that jQuery creates.  Here is the interesting piece of code:

openDialog: function() {
 this._dialog.dialog('open');
 this._dialog.parent().appendTo("form[0]");
}


The highlighted code above is very critical to using jQuery dialogs with ASP.NET.  jQuery will move the div that contains the dialog outside the form causing any inputs on your dialog to not get posted back to the server.  The code above will move the div back into the form when it is opened allowing it to be posted back to the server as desired.


Basic steps to include a jQuery Dialog on an ASP.NET page:

  1. Include the jQuery themes CSS file


    jquery-ui-1.7.2.custom.css


  2. Include the jQuery JS files


    jquery-1.3.2.min.js
    ui/ui.core.min.js
    ui/ui.dialog.min.js
    


  3. Create a DIV that contains the code for your dialog. 
  4. Add javascript to instantiate the dialog.
  5. Add link to open the dialog.
  6. Add code to the OkClick handler to post the data back to the server