Question

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

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

型号：

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部分视图

@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>

控制器：

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

方法Html.RenderPartial实际上直接呈现给响应流。这是一种特殊方法，由于性能原因而无法在日常页面呈现方案中使用。相反，您应该使用Html.Partial方法，如下所示：

<div id='productList'>
    @Html.Partial("ProductListControl", Model.Products)
</div>

Html.Partial会返回MvcString，您可以将其直接输出到您的视图。

Answer 2

您必须缺少脚本包含。在此上下文中，您将需要jquery和jquery.unobtrusive -ajax.min ajax来正确呈现局部视图。

Answer 3

我会删除DisplayFor并使用@ item.Name;像这样;

@foreach (var item in Model)
{
    <td>@item.Name</td>
}

这对我有用。

部分视图不会在包含的主视图中呈现（而是在它自己的页面中呈现）？

3 个答案: