ASP.NET MVCでAJAXを使用してテーブルをリフレッシュ

Question

ajaxを使用してMVCのテーブルを更新したいとします。私はすでにajaxを使ってデータベースにデータを挿入しました。私は、新しい行を挿入した後にテーブルを更新したいだけです。

PS。私は検索を試みたが、何も助けなかった、私はまだ混乱している。

Here is my code: 

Main page View: 

<div id="theTable"> 
    @Html.Partial("_IPTable") 
</div> 
    <script src="~/Scripts/jquery-1.10.2.min.js"></script> 
    <script src="~/Scripts/Admin.js"></script>"` 

Partial page View: 

<table id="table">` 
    <tr> 
     <th>ID</th> 
     <th>Line</th> 
     <th>Supplier</th> 
    </tr> 

    @foreach (var item in ViewBag.IPTable)` 
    { 
     <tr> 
      <td> 
       @item.ID 
      </td> 
      <td> 
       @item.Line 
      </td> 
      <td> 
       @item.Supplier 
      </td> 
     </tr> 

    } 
</table>enter code here 

Controller view: 

public ActionResult Admin() 
     { 
      // get data from database 
      return View(); 
     } 
public ActionResult _IPTable() 
     { 

      return PartialView(); 
     } 

挿入新しいレコードのためのAjaxコード：

<script> 
$(document).ready(function() { 
//function will be called on button click having id btnsave 
$("#btnSave").click(function() { 
    $.ajax(
    { 
     type: "POST", //HTTP POST Method 
     url: "AdminInsert", // Controller/View 
     data: { //Passing data 
      //Reading text box values using Jquery 
      Line: $("#txtLine").val(), 
      Supplier: $("#txtSupplier").val() 
     } 
    }); 
}); 

}); </script> 

Answer 1

あなたは、あなたのテーブルをレンダリングするために必要なHTMLマークアップを返すアクションメソッドを作成することができます。テーブルデータを渡すためのビューモデルを作成しましょう。

public class ItemVm 
{ 
    public string ItemId {set;get;} 
    public string Line {set;get;} 
    public string Supplier {set;get;} 
} 

アクションメソッドでは、テーブルからデータを取得し、ビューモデルクラスのリストにロードしてビューに送信します。私はあなたのテーブル構造/データアクセスのメカニックについてはわからないので。私はアイテムをハードコードするつもりです。それを実際のデータに置き換えることができます。今

public ActionResult TableData() 
{ 
    var items = new List<ItemVm>{ 
     new ItemVm { ItemId="A1", Line="L1", Supplier="S1" }, 
     new ItemVm { ItemId="A2", Line="L2", Supplier="S2" }  
    }; 
    return PartialView("TableData",items); 
} 

あなたの部分図が強く今私達のビューモデル

@model List<ItemVm> 
<table> 
@foreach(var item in Model) 
{ 
    <tr><td>@item.ItemId</td><td>@item.Line</td></td>@item.Supplier</td></tr> 
} 
</table> 

のコレクションに入力されていることを確認してくださいあなたは、このアクションメソッドを呼び出し、応答でDOMを更新するだけです戻ってくる。これは、新しいレコードを挿入しているajax呼び出しのイベントハンドラsuccessで行うことができます。 jQuery loadメソッドを使用して、DOMの関連要素を更新することができます。

$(document).ready(function() { 
    $("#btnSave").click(function() { 

    $.ajax(
    { 
     type: "POST", //HTTP POST Method 
     url: "AdminInsert", // Controller/View 
     data: { //Passing data 
      //Reading text box values using Jquery 
      Line: $("#txtLine").val(), 
      Supplier: $("#txtSupplier").val() 
     } 
    }).success(function() { 
      $("#theTable").load("/YourControllerName/TableData"); 
     }); 
}); 

ここで、最初のビューでは、新しい部分ビューを使用できます。しかし、それはItemVmのリストを期待しているので、ViewBagで渡すのではなく明示的に渡す必要があります。