在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

您可以创建一个action方法,该方法返回呈现表所需的HTML标记.让我们创建一个视图模型,使用它来传递表数据.

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

现在,在您的操作方法中,从表中获取数据,加载到视图模型类的列表并发送到视图.因为我不确定你的表结构/数据访问mecahnism.我要硬编码项目.你可以用真实数据替换它.

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.您可以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");
       });
});

现在,对于初始视图,您可以使用我们的新局部视图.但由于它ItemVm需要一个列表,你需要显式传递它而不是通过ViewBag传递它.