title: PartialView rendered as new page instead of being rendered on main view
body: <p>I'm triying to create a set of cascading dropdown lists, my main view consists of a set of two partial views:</p>
  
  <pre><code>@model  WebUI.Controllers.IndexViewModel
  &lt;script src="@Url.Content("~/Scripts/jquery-1.7.1.min.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;
  
  &lt;table cellpadding="0" cellspacing="4" border="0"&gt;
  &lt;tr&gt;
      &lt;td&gt;Category &lt;/td&gt;
      &lt;td&gt; :&lt;/td&gt;
      &lt;td&gt;@Html.Partial("ParentsUserControl", Model)&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;td&gt;Sub - Category &lt;/td&gt;
      &lt;td&gt; :&lt;/td&gt;
      &lt;td&gt;&lt;div id="Children"&gt;@Html.Partial("ParentChildrenUserControl", Model)&lt;/div&gt;&lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;/table&gt;
  </code></pre>
  
  <p>Each partial view has a AJAX form with a dropdown:</p>
  
  <pre><code>@model WebUI.Controllers.IndexViewModel
  
  @using (Ajax.BeginForm("SelectParent", "Ticket", new AjaxOptions { UpdateTargetId = "Children" }))
  { 
  @Html.DropDownListFor(
          m =&gt; m.SelectedParenId,
          new SelectList(Model.AvailableParents, "EstablishmentId", "Name"),
         string.Empty
      )
  }
  
  &lt;script type="text/javascript"&gt;
  $('#SelectedParenId').change(function () {
      $(this).parents('form').submit();
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>The problem is that as soon as I click on an item of the first list, a new page is rendered with the second partial view, <strong>how can I make it render the partial view inside of the main view and not generate a new page?, what does the UpdateTargetId refer to?</strong></p>
  
  <p>and <strong>Also how can I send the values selected by the user back to the controller? all Im creating is  a table, should i put that table inside a form?</strong></p>
  
  <p>Thanks in advance!</p>