title: ASP.NET MVC 4 Html.BeginForm in Partial View , values after post not right
body: <p>Main Page 
           -> Section 1 (has some dropdowns and a save button)</p>
  
  <pre><code>        &lt;div id="tab-section1"&gt;
              @{Html.RenderPartial("_Section1", Model.Section1);}
          &lt;/div&gt;
          &lt;div id="tab-section2"&gt;
              &lt;div id="section2"&gt;
                  @{Html.RenderPartial("_Section2", Model.Section2);}
              &lt;/div&gt;
              @{Html.RenderPartial("_SubSection2", Model.SubSection2);}
          &lt;/div&gt;
  </code></pre>
  
  <p>The section 1 contents are placed in a partial view with @Html.BeginForm in it.
  and rendered on main view using @Html.RenderPartial</p>
  
  <pre><code>@using MyData
  @model Section1ViewModel
  @using(Html.BeginForm("EditSection1", "Project", FormMethod.Post, new { id = "section1-form", name = "section-form" }))
  {
      @Html.HiddenFor(model =&gt; model.ProjectID)
   &lt;table id="modules"&gt;
          &lt;tr&gt;
              &lt;td class="bold" colspan="2"&gt;Modules
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;
                  @Html.DropDownListFor(m =&gt; m.SubmittedModules, new MultiSelectList(Model.AvailableModules, "ModuleID", "ModuleName", Model.SelectedModules.Select(m =&gt; m.ModuleID)),
                  new { multiple = "multiple", @class = "multiselectb" })
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;input type="button" id="btnAddModule" value=" + " /&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
  
          @foreach (Module b in @Model.SelectedModules)
          {
              &lt;tr&gt;
                  &lt;td colspan="2"&gt;
                      @b.ModuleName
                  &lt;/td&gt;
              &lt;/tr&gt;
          }
     &lt;/table&gt;
  }
  </code></pre>
  
  <p>When i click the save button in partial view, it should update its own contents as well as  other partial view SubSection2 should be refreshed.</p>
  
  <p>In the action method, i return the new values, and for the second partial view updation, I create an ajax submit function where i do the #secondpartialview.load
  Action:</p>
  
  <pre><code>[HttpPost]
          public ActionResult EditSection1(Section1ViewModel viewModel)
          {
              Section1Data section1Data = new Section1Data(_UnitOfWork);
              // save changes
              section1Data.SaveSection1(viewModel);
  
              viewModel = section1Data.GetSection1ViewModel(viewModel.ProjectID);
              return PartialView("_Section1", viewModel);
          }
  </code></pre>
  
  <p>Ajax submit:</p>
  
  <pre><code>$("#section1-form").submit(function () {
  
          $("#section1-saving").html("&lt;img src='../../Images/ajax-loader.gif' /&gt;");
  
          $.ajax({
              url: this.action,
              type: this.method,
              data: $(this).serialize(),
              success: function (result) {
                  $("#section1-saving").html("Saved!");
                  $.ajaxSettings.cache = false;
  
                  // Refresh the sub section 2 on the Section 2 tab
                  $("#subSection2").load('../../Projects/subSection2/' + $("#ProjectID").val());
              },
              error: function (jqXHR, textStatus, errorThrown) {
                  $("#section1-saving").html("Error: " + textStatus + " " + errorThrown);
              }
          });
          return false;
      });
  </code></pre>
  
  <p>The issue is: the DEBUGGER shows me the updated values for selectedModules in action method, but NOT on the UI.</p>
  
  <p>What am i missing?</p>