title: Why is a new page loaded when I try to load a partial view?
body: <p>I've written an application in ASP.NET MVC5. On one of the pages, I want the user to be able to select a book title from a drop-down list and then have another drop-down list generate when they have chosen one. The second list will contain chapters that correspond to the book that was selected. The problem is that, after the book has been selected, a new blank webpage is generated with just the new drop-down list in it.</p>
  
  <p>Here is the CSHTML code that is intended to generate the two drop-down lists.</p>
  
  <pre><code>@{//Loop through the authors and find the selected one to show the details of
  }
  @foreach (Author nextAuthor in Model)
  {
  //Ignore this author if it is not the selected one
  if (nextAuthor.Selected == false)
  {
      continue;
  }
  
  &lt;fieldset class="EditAuthor"&gt;
      &lt;div class="EditAuthorLeft"&gt;
          @{//Ajax form to select book by the selected author
          }
          @using (Ajax.BeginForm("SelectBook", "Library", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "chapters" }))
          {
              @Html.ValidationSummary(true)
  
              &lt;div class="editor-label"&gt;
                  @Html.LabelFor(model =&gt; nextAuthor.BookID)
              &lt;/div&gt;
              &lt;div class="editor-field"&gt;
                  @Html.DropDownList("BookID", nextAuthor.BookList, "&lt; Please select a book &gt;", new { onchange = "$(this.form).submit();" })
                  @Html.ValidationMessageFor(model =&gt; nextAuthor.BookID)
              &lt;/div&gt;
          }
  
          @{//Ajax form to submit and save changes to the author
          }
          @using (Ajax.BeginForm("UpdateAuthor", "Library", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "authors" }))
          {
              @Html.ValidationSummary(true)
  
              @Html.HiddenFor(model =&gt; nextAuthor.ID)
              @Html.HiddenFor(model =&gt; nextAuthor.LibraryID)
  
              //Chapter selection if there is a selected book
              &lt;div id="chapters"&gt;
                  @if (nextAuthor.BookID &gt; 0)
                  {
                      @Html.Partial("_ChapterDropDown", nextAuthor)
                  }
              &lt;/div&gt;
          @:&lt;/div&gt;
  
          &lt;p&gt;
              &lt;input type="submit" value="Update Author" /&gt;
          &lt;/p&gt;
          }
  &lt;/fieldset&gt;
  }
  </code></pre>
  
  <p>And here is the code for the second drop-down list in "_ChapterDropDown.cshtml".</p>
  
  <pre><code>@Html.HiddenFor(model =&gt; model.BookID)
  &lt;div class="editor-label"&gt;
      @Html.LabelFor(model =&gt; model.ChapterID)
  &lt;/div&gt;
  &lt;div class="editor-field"&gt;
      @Html.DropDownListFor(model =&gt; model.ChapterID, Model.ChapterList, "&lt; Please select a chapter &gt;")
      @Html.ValidationMessageFor(model =&gt; model.ChapterID)
  &lt;/div&gt;
  </code></pre>
  
  <p>And finally, here is the C# code to open the second drop-down list.</p>
  
  <pre><code>[HttpPost]
  public ActionResult SelectBook(int bookId)
  {
      Author author;
  
      //Create the author VM with just the info needed for the chapter partial view
      //Select the list of chapters from the database that we are connected to
      author = new Author();
      author.BookID = bookId;
      author.ChapterList = new SelectList(db.Chapters.Where(c =&gt; c.BookID == bookId).OrderBy(c =&gt; c.Name).ToList(), "ID", "Name");
      author.Selected = true;
  
      return PartialView("_ChapterDropDown", author);
  }
  </code></pre>
  
  <p>I can't understand why this code would generate a brand new page. Why does it not add the new drop-down list to the existing view? Any help on this topic would be greatly appreciated. And by the way, I have set "UnobtrusiveJavaScriptEnabled" to true in "Web.config" and have added the following lines of code to the head of "_Layout.cshtml".</p>
  
  <pre><code>&lt;script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"&gt;&lt;/script&gt;
  </code></pre>