在 ASP.NET MVC 中使用 AJAX 刷新表

Question

我想使用 ajax 更新 MVC 中的表。我已经使用 ajax 在数据库中插入了数据。我只想在插入新行后更新表格。

附言。我尝试了搜索，但没有任何帮助，我仍然很困惑。

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 传递它。