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?
I'm using AJAX to update the
partial view but what is wrong with the following code?
Model:
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<Product> results = new List<Product>();
public BoringStoreContext()
{
Products = new List<Product>();
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<Product> Products {get; set;}
}
public class ProductIndexViewModel
{
public Product NewProduct { get; set; }
public IEnumerable<Product> Products { get; set; }
}
Index.cshtml View:
@model AjaxPartialPageUpdates.Models.ProductIndexViewModel
@using (Ajax.BeginForm("Index_AddItem", new AjaxOptions { UpdateTargetId = "productList" }))
{
<div>
@Html.LabelFor(model => model.NewProduct.Name)
@Html.EditorFor(model => model.NewProduct.Name)
</div>
<div>
@Html.LabelFor(model => model.NewProduct.Price)
@Html.EditorFor(model => model.NewProduct.Price)
</div>
<div>
<input type="submit" value="Add Product" />
</div>
}
<div id='productList'>
@{ Html.RenderPartial("ProductListControl", Model.Products); }
</div>
ProductListControl.cshtml
Partial View
@model IEnumerable<AjaxPartialPageUpdates.Models.Product>
<table>
<!-- Render the table headers. -->
<tr>
<th>Name</th>
<th>Price</th>
</tr>
<!-- Render the name and price of each product. -->
@foreach (var item in Model)
{
<tr>
<td>@Html.DisplayFor(model => item.Name)</td>
<td>@Html.DisplayFor(model => item.Price)</td>
</tr>
}
</table>
Controller:
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);
}
}
