title: Updating only a partial view in asp.net mvc from another partial view
body: <p>I have a question concerning updating a partial view from another partial view where the first view is contained.</p>
  
  <p>I have 4 dropdowns that are populated based on the previous selections, then the user may submit their selections and a database is queried and a table is populated based on their selections.  I should note that I am very new to asp.net mvc and it's all still quite confusing to me.</p>
  
  <p>Below is my code:</p>
  
  <pre><code>&lt;form action="/Home/LoadRelease" method="post" style="text-align: center;"&gt;
      @*Headers*@
      &lt;div id="BusinessAreaLabel" class="inline" style="width:14em;"&gt;Business Area&lt;/div&gt;
      &lt;div id="GenericProjectLabel" class="inline" style="width:13em;"&gt;Generic Project&lt;/div&gt;
      &lt;div id="ProjectLabel" class="inline" style="width:17em;"&gt;Project&lt;/div&gt;
      &lt;div id="ReleaseLabel" class="inline" style="width:13em;"&gt;Release&lt;/div&gt;
  
      &lt;br /&gt;
  
      @*Dropdowns*@
      &lt;select id="BusinessAreaDropDown" name="BusinessArea" onchange="javascript: FillGenericProject(); FillProject(); FillReleases();" style="width: 13em;"&gt;
      @Html.Partial(@"Dropdowns\_BusinessArea", Model.ProjectViewModels);
      &lt;/select&gt;
      &lt;select id="GenericProjectDropDown" name="GenericProject" onchange="javascript: FillProject(); FillReleases();" style="width: 13em;"&gt;&lt;/select&gt;
      &lt;select id="ProjectDropDown" name="Project" style="width: 17em;" onchange="javascript: FillReleases();"&gt;&lt;/select&gt;
      &lt;select id="ReleaseDropDown" name="Release" style="width: 13em;"&gt;&lt;/select&gt;
      &lt;input type="submit" id="GoButton" style="visibility:hidden;" value="Go" /&gt;
  
  &lt;/form&gt;
  &lt;form id="ReleaseTableBody" style="text-align:center;"&gt;
      @Html.Partial("_TableBody", Model.OpenCloseViewModels)  //I want to update this.
  &lt;/form&gt;
  &lt;br /&gt;
  </code></pre>
  
  <p>and Home/LoadRelease:</p>
  
  <pre><code>    [HttpPost]
      public ActionResult LoadRelease(string Project, string Release)
      {
          var ProjectID = _ProblemReportsDB.ProjectMaps
               .Where(r =&gt; r.Project == Project)
               .Select(r =&gt; r.ID).FirstOrDefault();
  
          ViewBag.Project = Project;
  
          var Releases = from row in _ProblemReportsDB.PlannedOpenCloses
                         where (row.Project == ProjectID)
                         select row;
  
          return PartialView("_TableBody", Releases.ToList());
      }
  </code></pre>
  
  <p>The above loads the partial view "_TableBody", but actually directs to the page containing only the contents of _TableBody.</p>
  
  <p>Ideally, I would remain on the page displaying and only update the _TableBody section of the page.  I think I understand why it is currently failing, I'm telling it to run the action /Home/LoadRelease, which returns the _TableBody partial view, which it loads.</p>
  
  <p>I'm having trouble figuring out how to make it only update the _TableBody partial view.</p>
  
  <p>Thanks for any help you can offer.</p>
  
  <p><strong>EDIT:</strong> </p>
  
  <p>Attempting Jasens method I have begun using an ajax function: Still loads to another page instead of updating the partial:</p>
  
  <p>Code:</p>
  
  <pre><code>    @using (Html.BeginForm("LoadRelease", "Home", FormMethod.Post, new { id = "DropDownForm", style="" }))
  { 
      @*Headers*@
      &lt;div id="BusinessAreaLabel" class="inline" style="width:14em;"&gt;Business Area&lt;/div&gt;
      &lt;div id="GenericProjectLabel" class="inline" style="width:13em;"&gt;Generic Project&lt;/div&gt;
      &lt;div id="ProjectLabel" class="inline" style="width:17em;"&gt;Project&lt;/div&gt;
      &lt;div id="ReleaseLabel" class="inline" style="width:13em;"&gt;Release&lt;/div&gt;
  
      &lt;br /&gt;
  
      @*Dropdowns*@
      &lt;select id="BusinessAreaDropDown" name="BusinessArea" onchange="javascript: FillGenericProject(); FillProject(); FillReleases();" style="width: 13em;"&gt;
          @Html.Partial(@"Dropdowns\_BusinessArea", Model.ProjectViewModels);
      &lt;/select&gt;
      &lt;select id="GenericProjectDropDown" name="GenericProject" onchange="javascript: FillProject(); FillReleases();" style="width: 13em;"&gt;&lt;/select&gt;
      &lt;select id="ProjectDropDown" name="Project" style="width: 17em;" onchange="javascript: FillReleases();"&gt;&lt;/select&gt;
      &lt;select id="ReleaseDropDown" name="Release" style="width: 13em;"&gt;&lt;/select&gt;
      &lt;button type="submit" id="GoButton" style="visibility:hidden;"&gt;Go&lt;/button&gt;
  }
  @*&lt;/form&gt;*@
  
  &lt;form id="ReleaseTableBody" style="text-align:center;"&gt;
      @Html.Partial("_TableBody", Model.OpenCloseViewModels)
  &lt;/form&gt;
  &lt;br /&gt;
  </code></pre>
  
  <p>In index: (Parent of _DropDownBody):</p>
  
  <pre><code>&lt;script src="~/Scripts/jquery-1.10.2.js"&gt;
      $(document).ready(function () {
          $("#DropDownForm").on("submit", function (event) {
              event.preventDefault();
  
              var form = $(this);
              var Project = $('#ProjectDropDown').val();
              var Release = $('#ReleaseDropDown').val();
              alert(Project);
              $.ajax({
                  url: form.attr("action"),
                  method: form.attr("method"),
                  data: form.serialize()
              })
              .done(function (result) {
                  $("#ReleaseTableBody").html(result);
              });
          });
  
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>Using A. Burak Erbora's method produces the same issue as well.  Am I missing something?</p>
  
  <p><strong>Final edit:</strong> Jasen's answer worked and allowed me to update a partial view without redirecting.  Still having issues getting the partial to show my content, but as far as the question goes - Jasen's answer works!</p>