web-dev-qa-db-ja.com

ASP.NETMVCでAJAX）を使用してテーブルを更新する

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>
jqueryasp.netajaxasp.net-mvc
5
Voila Daniel

テーブルのレンダリングに必要な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を介して渡すのではなく、明示的に渡す必要があります。

7
Shyju