asp.net-mvc - 部分 View 没有在它所包含的主视图中呈现(而是在它自己的页面中呈现)？

Question

我有一个包含在简单索引 View 中的局部 View 。当我尝试将新对象添加到我的模型并更新我的局部 View 以显示该新对象以及现有对象时，局部 View 会呈现在它所包含的页面之外吗？

我正在使用 AJAX 更新局部 View ，但以下代码有什么问题？

模型:

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 查看:

@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 局部 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);
    }
}

Answer 1

您一定缺少脚本包含。在这种情况下，您将需要 jquery 和 jquery.unobtrusive-ajax.min ajax 来正确呈现局部 View 。