MVC 4 刷新部分视图（PartialView）

Question

MVC 4 刷新部分视图（PartialView）

javascriptjqueryasp.net-mvcrefreshpartial-views

3

我目前正在开发一个带有CRUD功能的网站。我正在使用以下javascript代码来在成功完成添加、编辑或删除后显示消息。

function addSuccess(data) {
    if (data.Success == true) {
        $('#addDialog').dialog('close');
        $('#commonMessage').html("Process Complete");
        $('#commonMessage').delay(400).slideDown(400).delay(3000).slideUp(400);
    }
    else {
        $("#add-message").html(data.ErrorMessage);
        $("#add-message").show();
    }
}

然而，我正在一个包含WebGrid的部分视图中呈现结果。在这种情况下，产品的表格列表在此部分视图中。完成（假设）编辑过程后，我希望在编辑对话框关闭后反映出编辑的字段。我的问题是，我不知道如何在不影响整个页面的情况下刷新局部视图。

请问有没有人能指点一种好的方法来实现这个功能？非常感谢！

编辑：

以下是我添加项目到网格的方式。请注意，这整段代码都在我的部分视图中。谢谢！

@{
    MyStore.Business.Manager.ProductsManager repository = new MyStore.Business.Manager.ProductsManager ();

    List<MyStore.Data.Products> ProductsList = repository.GetAllProducts(ViewData["StoreCode"].ToString());

    var grid = new WebGrid(ProductsList );

    grid.Pager(WebGridPagerModes.All);
            @grid.GetHtml(tableStyle: "webGrid",
                htmlAttributes: new { id = "DataTable" },
                headerStyle: "header",
                alternatingRowStyle: "alt",
                columns: grid.Columns(
                    grid.Column("ProductCode", style: "width: 400px;"),
                    grid.Column("Name", style: "width: 400px"),
                    grid.Column("Price", style: "width: 100px;"),
                    grid.Column("", format: @<text>@Html.ActionLink("Edit", "_Edit", new { RecordID = item.RecordID }, new { @class = "editLink" })</text>, style: "width: 100px"),
                    grid.Column("", format: @<text>@Html.ActionLink("Delete", "_Delete", new { RecordID = item.RecordID }, new { @class = "editLink" })</text>, style: "width: 100px")
                                                 ));                                                      
    }

- Smiley

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Shyju · Accepted Answer

使用jquery ajax重新加载内容。

if (data.Success == true) {
    $('#addDialog').dialog('close');
    $('#commonMessage').html("Process Complete")
                   .delay(400).slideDown(400).delay(3000).slideUp(400);

    $("#yourContainerDiv").load("Url.Action("GetProducts ","Items")")

}

假设yourContainerDiv是您拥有网格标记的 Div /table，而您的Items控制器的GetProducts操作方法返回网格的标记。

如果您在按钮单击事件中进行保存/更新，请确保使用preventDefault方法停止默认的表单提交行为。

$("#someButtonId").click(function(e){
  e.preventDefault();
  //Save data or whatever ...
});

编辑：在更新问题后。

为什么要将UI（view）与code混合在一起呢？请将它们分开。

创建一个action来获取数据并将其传递给强类型视图。

public ActionResult GetProducts()
{
   var repository = new MyStore.Business.Manager.ProductsManager ();
   var productList = repository.GetAllProducts(ViewData["StoreCode"].ToString());
   return View(productList);    
}

现在有一个视图(GetProducts.cshtml)，它是针对产品类别的列表进行强类型化的。

@model MyStore.Data.Products
@{
  Layout=null;
}
<table>
   @foreach(var item in Model)
   {
     <tr>
      <td>@item.ProductCode</td>
      <td>@item.Name</td>
      <td>@item.Price</td>
     </tr>
   }
</table>

个人而言，我将实体/模型名称保持为单数形式，如客户/产品