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