我想使用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中的相关元素。
success
load
$(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传递它。
ItemVm