title: jQuery, MVC3: Submitting a partial view form within a modal dialog
body: <p>I'm just playing around with jQuery and MVC3 at the moment, and am wondering how I can submit a form, which has been dynamically loaded into a jQueryUI dialog?</p>
  
  <p>My code so far consists of...</p>
  
  <p><strong>Javascript/jQuery</strong></p>
  
  <pre><code>$(document).ready(function () {
  
      $('.trigger').live('click', function (event) {
  
         var id = $(this).attr('rel');
  
         var dialogBox = $("&lt;div&gt;");
  
         $(dialogBox).dialog({
             autoOpen: false,
             resizable: false,
             title: 'Edit',
             modal: true,
             show: "blind",
             hide: "blind",
             open: function (event, ui) {
                 $(this).load("PartialEdit/" + id.toString());
             }
          }
      });
  
      $(dialogBox).dialog('open');
  
  })    });
  </code></pre>
  
  <p><strong>cshtml</strong></p>
  
  <pre><code>&lt;h2&gt;Detail&lt;/h2&gt;&lt;a href="#" class="trigger" rel="1"&gt;Open&lt;/a&gt;
  </code></pre>
  
  <p><strong>Controller</strong></p>
  
  <pre><code>public ActionResult PartialEdit(int id)
      {
          return PartialView(new EditViewModel() { Name = id.ToString() });
      }
  
      [HttpPost]
      public ActionResult PartialEdit(int id, FormCollection collection)
      {
          // What to put here???            
      }
  </code></pre>
  
  <p><strong>The Partial View</strong></p>
  
  <pre><code>....@using (Html.BeginForm()){....Html.EditorFor(model =&gt; model.Name).....}....
  </code></pre>
  
  <p>As you can see the load() in jQuery calls a PartialView named PartialEdit.</p>
  
  <p>The form is loading up just fine, but I'm stuck working out how I actually submit the form?</p>
  
  <p><strong>Questions</strong></p>
  
  <p>How do I get the UI to submit the form, and close the dialog?  What should the [HttpPost]PartialEdit return?</p>
  
  <p>At the moment I have the submit button within the partial view.  When clicked, the form is submitted, and the browser does whatever the [HttpPost]PartialEdit returns (currently resulting in a blank page being displayed). </p>
  
  <p>However, after a submit I would like instead to trigger an event on the client side (Maybe a full page refresh, or a partial page refresh depending on the context it is used).  I'm not sure where to start?</p>
  
  <p>Also, should I be placing a submit button within the PartialView, or should I use the buttons on the jQuery-UI dialog?</p>
  
  <p>Any suggestions/pointers appreciated.</p>