3

現在、CRUD機能を備えたWebサイトを開発しています。以下の 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")
                                                 ));                                                      
    }
4

1 に答える 1

3

jqueryajaxを使用してコンテンツをリロードする

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 であり、コントローラーのGetProductsアクションメソッドがグリッドのマークアップを返すと仮定します。Items

ボタンクリックイベントで保存/更新を行っている場合は、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これで、Lost of Products クラスに強く型付けされた view( ) ができました。

@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

于 2012-07-16T02:25:41.687 に答える