title: Ajax.BeginForm replaces whole page onchange of a dropdownlist
body: <p><strong>The purpose</strong></p>
  
  <p>I have a simple table listing names (in a partial view), and above it a dropdownlist containing those names. The purpose is to filter the table based on the name which was selected in the dropdownlist. The filtering should happen as soon as the selected value in the dropdownlist changes, and should render only the partial view again.</p>
  
  <p><strong>The problem</strong></p>
  
  <p>When I select a value in the dropdownlist, the partial view isn't rendered in the other view but is displayed as a whole page.
  However, when I include a submit button in my Ajax.BeginForm block, and trigger the action on the submit button, it does function as expected...</p>
  
  <p><strong>The code</strong></p>
  
  <p><em>Controller</em></p>
  
  <pre><code>public PartialViewResult Filter(string filterName) {
      var names = from p in db.People
                  select p;
  
      if (!String.IsNullOrEmpty(filterName))
      {
          names = names.Where(p =&gt; p.Name.Equals(filterName));
      }
  
      return PartialView("_PersonsTable", names);
  }
  </code></pre>
  
  <p><em>View</em></p>
  
  <pre><code>@model IEnumerable&lt;Sandbox.Models.Person&gt;
  
  &lt;h2&gt;Index&lt;/h2&gt;
  
  &lt;p&gt;
      @Html.ActionLink("Create New", "Create")
  &lt;/p&gt;
  
  @using (Ajax.BeginForm("Filter", "Person", new AjaxOptions { 
      HttpMethod = "Get", UpdateTargetId = "SearchResults", InsertionMode = System.Web.Mvc.Ajax.InsertionMode.Replace }))
  {
      @Html.DropDownList("filterName", new SelectList(ViewBag.Names), "Select a name", new   { onchange = "this.form.submit()" })
  }
  
  @Html.Partial("_PersonsTable")
  </code></pre>
  
  <p><em>Partial View</em></p>
  
  <pre><code>@model IEnumerable&lt;Sandbox.Models.Person&gt;
  
  &lt;table id="SearchResults"&gt;
      &lt;tr&gt;
          &lt;th&gt;
              Name
          &lt;/th&gt;
          &lt;th&gt;
              Age
          &lt;/th&gt;
          &lt;th&gt;&lt;/th&gt;
      &lt;/tr&gt;
  
  @foreach (var item in Model) {
      &lt;tr&gt;
          &lt;td&gt;
              @Html.DisplayFor(modelItem =&gt; item.Name)
          &lt;/td&gt;
          &lt;td&gt;
              @Html.DisplayFor(modelItem =&gt; item.Age)
          &lt;/td&gt;
          &lt;td&gt;
              @Html.ActionLink("Edit", "Edit", new { id=item.ID }) |
              @Html.ActionLink("Details", "Details", new { id=item.ID }) |
              @Html.ActionLink("Delete", "Delete", new { id=item.ID })
          &lt;/td&gt;
      &lt;/tr&gt;
  }
  &lt;/table&gt;
  </code></pre>
  
  <p>So why is it that my searchResults table isn't rendered as a partial view?</p>
  
  <p>I have these scripts included in my _Layout view:</p>
  
  <pre><code>&lt;script src="/Scripts/jquery-1.7.2.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="/Scripts/modernizr-1.7.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="/Scripts/jquery.unobtrusive-ajax.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="/Scripts/MicrosoftAjax.debug.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="/Scripts/MicrosoftMvcAjax.debug.js" type="text/javascript"&gt;&lt;/script&gt;
  </code></pre>