How to use jQuery UI modal form from ASP.NET MVC list page

Question

I am trying to use this: http://jqueryui.com/demos/dialog/#modal-form

I have:

<script type="text/javascript"> $(document).ready(function() { $("#dialog").dialog(); $("#dialog").dialog('close'); $('.myPop').click(function() { $("#dialog").dialog('open'); }); }); 

Allows me to pop up on a click of ".myPop", which is just the tempo input button in my list, which works:

 <button type="button" class="myPop"></button> 

My question is: what is the best way to use this popup to go to the Edit method of my controller, populate the controls and then save it back to the model and refresh the list page?

I want to support best practices in ASP.Net MVC, please.

Maybe I can use this? http://dev.iceburg.net/jquery/jqModal/

thanks

Answer 1

Obviously, there are many ways to do this, but here's how I would solve it. Make an ajax call before loading the dialog box to populate the contents of the dialog box, show the dialog box and then save close the dialog box and refresh the grid. These are the basics, there is an auxiliary code below. I find it good practice to return the json result from the save action to determine if the save was successfully saved, and if not an error message indicating why it was not displayed to the user.

 <div id="dialog" title="Basic dialog"> <!-- loaded from ajax call --> <form id="exampleForm"> <input blah> <input type="button" onclick="Save()" /> </form> </div> <script> $(function() { $('.myPop').click(function() { $.get("editController/loadContents", function(data){ $("#dialog").html(data); }); $("#dialog").dialog('open'); }); }); function Save(){ $.post("/editController/Edit", $("#exampleForm").serialize(), function(data){ $("#dialog").dialog('close'); //update grid with ajax call }); } </script>