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

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

PS。 我试过搜索，但没有任何帮助我，我仍然困惑。

Here is my code: Main page View: 
 @Html.Partial("_IPTable") 
  "` Partial page View: `  @foreach (var item in ViewBag.IPTable)` {  } 
 
ID
 
Line
 
Supplier
 
 
 @item.ID 
 
 @item.Line 
 
 @item.Supplier 
 
enter code here Controller view: public ActionResult Admin() { // get data from database return View(); } public ActionResult _IPTable() { return PartialView(); } 

用于插入新记录的Ajax代码：

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

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{ new ItemVm { ItemId="A1", Line="L1", Supplier="S1" }, new ItemVm { ItemId="A2", Line="L2", Supplier="S2" } }; return PartialView("TableData",items); } 

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

 @model List  @foreach(var item in Model) { @item.Supplier } 
@item.ItemId
@item.Line 

现在您要做的就是调用此操作方法并使用响应更新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列表， ItemVm您需要显式传递它而不是通过ViewBag传递它。