jQuery 在 ASP.NET MVC 中使用 AJAX 刷新表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38635966/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Refresh table using AJAX in ASP.NET MVC
提问by Voila Daniel
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.
我想使用ajax更新MVC中的表。我已经使用ajax在数据库中插入了数据。我只想在插入新行后更新表。
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 code for insert new record:
插入新记录的 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>
回答by Shyju
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.
您可以创建一个操作方法，该方法返回呈现表格所需的 HTML 标记。让我们创建一个视图模型，我们将使用它传递表数据。
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.
现在在你的 action 方法中，从表中获取数据，加载到我们的视图模型类的列表中并发送到视图。因为我不确定你的表结构/数据访问机制。我将对这些项目进行硬编码。您可以用真实数据替换它。
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>
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 successevent handler of your ajax call where you are inserting a new record. You may use the jQuery loadmethod to update the relevant element in the DOM.
现在你所要做的就是调用这个 action 方法并用返回的响应更新 DOM。您可以在success插入新记录的 ajax 调用的事件处理程序中执行此操作。您可以使用 jQueryload方法更新 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");
});
});
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.
现在对于初始视图，您可以使用我们新的局部视图。但是由于它ItemVm需要的列表，因此您需要显式传递它而不是通过 ViewBag 传递它。
