Load and Edit Data in jQuery UI Dialog

Question

I have an asp.net mvc application and I'm using Webgrid to list customers.

I want to edit the customers' data on the jQuery Dialog, so, I think to do an action on my controller returning a PartialView is the best way. The problem is that this PartialView has some javascript code to validate this input (I'm using jQuery Validation to validate on client side). My questions are:

1. All the script to validate my form on the dialog and send it to server by jquery and ajax, should be on the page or is there any way to put it on the PartialView?

2. How is the best way to load the partialView on my Dialog ($.post, $.get, .load method, etc)? Is mor safe to use by post?

3. Is there any sample of code to post or any link to show-me? I would like to see some samples of code :)

Thank you

Answer 1

This SO answer should help you with loading the jQuery UI Dialog with your PartialView, and my experience has been that a PartialView can contain JavaScript, but only if it's served as if it's a View, i.e. JavaScript within a PartialView that's called from another PartialView my not work

Answer 2

There are multiple ways to load a partial view to your jquery dialog. It take the most safest approach and that is to load the partial view with page load. Something like this :

<div id="mydialog">
    @Html.Partial("MyAction", "MyController")
</div>

and then using jquery i convert this div block into jquery dialog.

 <script type="text/javascript">
  $(document).ready(function () {
    $("#mydialog").dialog();       
  });

 //this function can be used in onclick handler from anywhere to show the dialog.
 function OpenDialog()
 {
      $("#mydialog").dialog("open");
 }
 </script>

Why i consider it safe is because all kind of validation works very well and code reusability is also applied. However you can dynamically also load a partial view into a dialog, as suggested by jimmym. You need to be careful about two pitfalls here.

1. Jquery unobtrusive has to parse the newly loaded form. You can do something like this.

   $.validator.unobtrusive.parse($('#myform'))

2. Make sure you are not loading nested forms.