How to use a jQuery UI Modal Form from ASP.Net MVC list page.

Question

I am tryng 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');
      });
  });

Which allows me to pop-up on the click of '.myPop' which is just a temp input button in my list which is working:

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

My question is - what is the best way to use this pop-up to go to the Edit method of my controller, populate controls and then be able to save back to the model and refresh the list page?

I want to keep with best practice in ASP.Net MVC please.

Am I beetr maybe using this? http://dev.iceburg.net/jquery/jqModal/

Thanks

Answer 1

There's obviously a bunch of ways to do that, but here's how I would solve it. Perform an ajax call before loading the dialog to populate the dialog's contents, show the dialog, than on save close the dialog and refresh the grid. Those are the basics, there's some helper code below. I find it a good practice to return a json result from the save action to determine if the saved was successful, and if not an error message that indicates why it failed to display 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>