title: Partial view is not rendering within the main view it's contained (instead it's rendered in it's own page)?
body: <p>I have a partial view that is contained in a simple index view.  When I try to add a new object to my model and update my partial view to display that new object along with existing objects the partial view is rendered outside the page that it's contained?  </p>
  
  <p>I'm using AJAX to update the partial view but what is wrong with the following code?</p>
  
  <p>Model:</p>
  
  <pre><code>public class Product
  {
      public int ID { get; set; }
      public string Name { get; set; }
  
      [DataType(DataType.Currency)]
      public decimal Price { get; set; }
  }
  
  public class BoringStoreContext 
  {
           List&lt;Product&gt; results = new List&lt;Product&gt;();
  
           public BoringStoreContext() 
           {
               Products = new List&lt;Product&gt;();
               Products.Add(new Product() { ID = 1, Name = "Sure", Price = (decimal)(1.10) });
               Products.Add(new Product() { ID = 2, Name = "Sure2", Price = (decimal)(2.10) });
           }
           public List&lt;Product&gt; Products {get; set;}
  }
  
  public class ProductIndexViewModel
  {
      public Product NewProduct { get; set; }
      public IEnumerable&lt;Product&gt; Products { get; set; }
  }
  </code></pre>
  
  <p>Index.cshtml View:</p>
  
  <pre><code>@model AjaxPartialPageUpdates.Models.ProductIndexViewModel
  
  @using (Ajax.BeginForm("Index_AddItem", new AjaxOptions { UpdateTargetId = "productList" }))
  { 
      &lt;div&gt;
          @Html.LabelFor(model =&gt; model.NewProduct.Name)
          @Html.EditorFor(model =&gt; model.NewProduct.Name)
      &lt;/div&gt;
      &lt;div&gt;
          @Html.LabelFor(model =&gt; model.NewProduct.Price)
          @Html.EditorFor(model =&gt; model.NewProduct.Price)
      &lt;/div&gt;
      &lt;div&gt;
          &lt;input type="submit" value="Add Product" /&gt;
      &lt;/div&gt;
  }
  
  &lt;div id='productList'&gt;
      @{ Html.RenderPartial("ProductListControl", Model.Products); }
  &lt;/div&gt;
  </code></pre>
  
  <p>ProductListControl.cshtml Partial View</p>
  
  <pre><code>@model IEnumerable&lt;AjaxPartialPageUpdates.Models.Product&gt;
  
  &lt;table&gt;
      &lt;!-- Render the table headers. --&gt;
      &lt;tr&gt;
          &lt;th&gt;Name&lt;/th&gt;
          &lt;th&gt;Price&lt;/th&gt;
      &lt;/tr&gt;
      &lt;!-- Render the name and price of each product. --&gt;
      @foreach (var item in Model)
      { 
          &lt;tr&gt;
              &lt;td&gt;@Html.DisplayFor(model =&gt; item.Name)&lt;/td&gt;
              &lt;td&gt;@Html.DisplayFor(model =&gt; item.Price)&lt;/td&gt;
          &lt;/tr&gt;
      }
  &lt;/table&gt;
  </code></pre>
  
  <p>Controller:</p>
  
  <pre><code>public class HomeController : Controller
  {
      public ActionResult Index()
      {
          BoringStoreContext db = new BoringStoreContext();
          ProductIndexViewModel viewModel = new ProductIndexViewModel
          {
              NewProduct = new Product(),
              Products = db.Products
          };
          return View(viewModel);
      }
  
      public ActionResult Index_AddItem(ProductIndexViewModel viewModel)
      {
          BoringStoreContext db = new BoringStoreContext();
          db.Products.Add(viewModel.NewProduct);
  
          return PartialView("ProductListControl", db.Products);
      }
  }
  </code></pre>