Javascript MVC 4仅刷新部分视图

我目前正在开发一个具有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的局部视图上渲染结果。在这种情况下，产品的列表在此局部视图中。在（比方说）编辑过程完成后，我希望编辑字段在编辑对话框关闭后反映出来。我的问题是，我不知道如何在不影响整个页面的情况下刷新局部视图

有人能告诉我一个好方法吗？多谢各位

---

编辑：

下面是我如何将项目添加到我的网格中。请注意，整个代码都在我的PartialView中。谢谢大家!

@{
    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")
                                                 ));                                                      
    }            

@{
MyStore.Business.Manager.ProductsManager repository=new MyStore.Business.Manager.ProductsManager（）；
List ProductsList=repository.GetAllProducts（ViewData[“StoreCode”].ToString（））；
var grid=新的WebGrid（ProductsList）；
Pager（WebGridPagerModes.All）；
@GetHtml（表样式：“webGrid”，
htmlAttributes:new{id=“DataTable”}，
headerStyle:“header”，
alternatingRowStyle:“alt”，
列：grid.columns(
grid.Column（“ProductCode”，样式：“宽度：400px；”），
网格列（“名称”，样式：“宽度：400px”），
网格列（“价格”，样式：“宽度：100px；”），
grid.Column（“”，格式：@@Html.ActionLink（“编辑”，“编辑”，新的{RecordID=item.RecordID}，新的{@class=“editLink”}），样式：“宽度：100px”），
grid.Column（“”，格式：@@Html.ActionLink（“Delete”，“\u Delete”，新建{RecordID=item.RecordID}，新建{@class=“editLink”}），样式：“宽度：100px”）
));                                                      
}            

使用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/表，其中有网格的标记，而

GetProducts

项的操作方法

控制器返回网格的标记

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

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

编辑：设置更新的问题后

为什么要将UI（
视图
）与
代码
混用。把它分开

使用
操作
获取数据并将其传递给强类型视图

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

现在有一个视图（
GetProducts.cshtml
），它是强类型的Lost of Products类

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

@model MyStore.Data.Products
@{
布局=空；
}
@foreach（模型中的var项目）
{
@item.ProductCode
@项目名称
@项目.价格
}

就我个人而言，我将我的实体/型号名称保留为单数，如
客户
/
产品
嗨！谢谢你的回复！您能解释一下
GetProducts
和
Items
部分吗？我好像不明白。非常感谢。这是否意味着
GetProducts
是来自
Items
控制器的方法的名称，该控制器返回要绑定到webGrid的产品列表？因为如果它真的是这样的话，那么我必须说我不是那样做的。请看我的编辑上面。谢谢！：）