MVC 4仅刷新局部视图

Question

我目前正在开发一个具有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而不影响整个页面。

有人可以请我指出一个很好的方法来做到这一点？非常感谢你！

---

编辑：

下面是我如何将项目添加到我的网格。请注意，这整个代码都在我的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") 
               ));              
    }    

Answer 1

使用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就是你有网格的标记和Items控制器的你GetProducts操作方法的DIV /表返回电网的标记。

，如果你正在做一个按钮单击事件保存/更新，确保使用peventDefault方法

$("#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> 

个人而言，我把我的实体/型号名称为奇状Customer/Product