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

Z时代
2024-01-10
分类：问答

我想使用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>

回答：

您可以创建一个操作方法，该方法返回呈现表所需的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>

现在您所要做的就是调用此action方法并使用返回的响应来更新DOM。您可以success在要插入新记录的ajax调用的事件处理程序中执行此操作。您可以使用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");
       });
});