Question

我有以下索引：

<div id='addProduct'>
   @{ Html.RenderPartial("Create", new BoringStore.Models.Product()); }
</div>

<div id='productList'>
    @{ Html.RenderPartial("ProductListControl", Model.Products); }
</div>

部分创建视图包含一个不可见的div，用于创建新产品。执行此操作后，将更新部分视图ProductListControl。

现在我想用编辑功能这样做。问题：在加载索引时无法集成编辑页面，因为此时我不知道用户想要编辑哪个产品。

我的想法：我想在jquery模式（不是问题）中调用我现有的编辑视图，以便用户可以执行更改。保存模式后关闭（仍然不是问题 - 我可以处理这个）并更新ProductListControl（这是我的问题...... :(）。

我怎么能这样做？我已经看过一些教程，但我想保持它的清洁和安全;尽可能容易。他们中的大多数都使用dom操作并通过JsonResult从服务器（控制器）获得反馈。如果可能的话，我想坚持剃刀语法，没有纯JavaScript或jquery，如果可能的话，我想避免使用JsonResults。

Answer 1

一种方法可能是将Ajax.BeginForm用于创建产品视图。

Ajax.BeginForm接受许多AjaxOptions，一个是UpdateTargetId（您的DOM ID，在本例中是您的productlist div），更多信息here。

然后，在产品控制器代码中，您可以返回包含产品列表的部分视图。例如：

Index.cshtml

@using (Ajax.BeginForm("AjaxSave", "Product", new AjaxOptions { HttpMethod = "GET", UpdateTargetId = "productList", InsertionMode = InsertionMode.Replace }))
{ 
    // your form
    <p>
        <input type="submit" value="Save" />
    </p>
}

...

<div id="productList">...
</div>

ProductController.cs

[HttpGet]
public ActionResult AjaxSave(Product product)
{
    if (ModelState.IsValid)
    {
        // save products etc..
    }

    var allProducts = _productService.GetAllProducts();

    return PartialView("ProductListControl", allProducts);

}

关于这个here有一篇很好的文章。

编辑后更新部分视图

1 个答案: