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。您可以在要插入新记录的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传递它。

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

1 个答案: