Lets look at a simple but non-trivial example of combining JQuery UI Dialog, Asp.Net and AJAX Update Panel. You can download the source of the sample here. Our sample application will display a list of names. To edit a name, you click on a name.
This will pop up a JQuery UI Dialog with the current name. You can edit the name and click save. This will save and automatically close the dialog.
For adding a new Name, click on the "Add New Person" button. And this will bring up the new person dialog and allow you to save. Adding or Editing names will automatically update the list with the changes.
I am not going to go through explaining each line of the source. Its much easier to read the source code for yourself. I will just point out the main highlights. The first thing you will notices is when setting up the JQuery dialog, we are adding a open event to attach the dialog div to the form element. This will insure the post backs to happen.
Secondly, We set up update panels for each of the dialogues. It is important to note that the Update Panels are nested inside the dialog div. And also the GridView to display the list is also within an Update Panel. All of our update panels, UpdateMode is set as "Conditional" and ChildrenAsTriggers as "true". So they only update when some control within them posts back and we can also trigger the update by their Update method from the server side.
OK, now the code behind. To keep thing simple this example uses a Dictionary to store the names in the viewstate. Most of the code here is self explanatory. However I will point out the use of "ScriptManager.RegisterClientScriptBlock" to close the dialog. RegisterClientScriptBlock helps in adding javascript to be executed on asynchronous post back.
That's pretty much it. Give me a yell if you have any questions or some suggestions.
Happy Coding
Ravi
Download Sample Code
13 comments:
nice!
Awesome. I have been struggling with this for a week. TYVM.
Made some small modifications to how your code works to accommodate server side lagging behind the client side because of db processing or other factors. If you want I can email you the changes.
I am using this, and it is working better. However calling the dialog() function changes the main form to no longer point to the appropriate action and instead is pointing action to "javascript:void(0);". Any one else run into this?
Thanks! The odd behavior of jQuery and the UpdatePanel was driving me crazy.
Thanks for the post. Its really help me a lot. I want another help that how can i make background as read only or inactive when opening a dialog using JQuery like i did using ajaxtoolkitpopdialog.
Thanks,
Ashok Mohanty
Thank so much for this. I made a note of it for my reference on my blog.
Beautiful, thanks!
I was getting a similar problem with the jQuery SimpleModal, second time you clicked on a link to the modal it would be blank. I was using an EndRequestHandler to try and do fix it but had to close then open the modal to recreate it every time but your approache fixed it everything. And it's even easier using the Simple modal as it has an appendTo: 'form' parameter which you can use instead the appendTo form command on the open function.
Thanks Ravi!
A simple approach is to put the dialog-HTML back into the updatepanel, not just the form.
If you append the dialog-HTML to the form you will end up having duplicates when the updatepanel is refreshed again.
I always do this:
function showDialog(selector) {
var source = $(selector).parent();
$(selector).dialog({open: function(type, data) { $(this).parent().appendTo(source); }});
}
And the register a startup-script:
showDialog('#myDialogContainer');
No need for either serverside nor clientside duplicate-handling.
Regarding my post above:
That is, if you are posting the HTML for the dialog in the UpdatePanel.
In the example in the article the HTML for the dialogs are static.
Thanks So much saved my life..
i'm using anthem.net and im calling Anthem_InvokePageMethod to execute a method on the server. the server became out of sync with the HTML due to the JQUERY moving the DIV.
thanks again....
Thank you for your post, it was very helpful.
Post a Comment