在ASP.NET MVC中使用AJAX刷新表 [英] Refresh table using AJAX in ASP.NET MVC

问题描述

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

I want to update table in MVC using ajax. I already inserted data in database using ajax. I just want to update table after I insert a new row.

PS.我尝试搜索，但没有任何帮助，我仍然感到困惑.

PS. i tried search but nothing helped me, i`m still confused.

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代码:

Ajax code for insert new record:

 <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标记.让我们创建一个用于传递表数据的视图模型.

You may create an action method which returns the HTML markup needed to render your table. Let's create a view model using which we will pass the table data.

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

现在，在您的操作方法中，从表中获取数据，加载到我们的视图模型类的列表中，然后发送到视图.由于我不确定您的表结构/数据访问机制.我要对这些项目进行硬编码.您可以将其替换为真实数据.

Now in your action method, get your data from the table, load to a list of our view model class and send to the view. Since i am not sure about your table structure/ data access mecahnism. I am going to hard code the items. you may replace it with real data.

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);
}

现在确保您已将部分视图强类型化为我们的视图模型的集合

Now make sure that your partial view is strongly typed to a collection of our view model

@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.您可以在要插入新记录的ajax调用的success事件处理程序中执行此操作.您可以使用jQuery load方法来更新DOM中的相关元素.

Now all you have to do is, call this action method and update the DOM with the response coming back. You can do that in the success event handler of your ajax call where you are inserting a new record. You may use the jQuery load method to update the relevant element in the 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传递它.

Now for the initial view, you may use our new partial view. But since it is expecting a list of ItemVm, you need to explicitly pass it instead of passing it via ViewBag.

这篇关于在ASP.NET MVC中使用AJAX刷新表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！