MVC Core使用ajax发布数据并刷新页面上的部分
我正在使用AspNet Core 2.0 MVC网站。 的问题是: 我有一个页面两种形式,第一种形式是提交模型,这是通过这个动作来完成:MVC Core使用ajax发布数据并刷新页面上的部分
[HttpPost]
public IActionResult AddProductToSale([FromForm]ProductViewModel product)
{
ProductViewModel p = new ProductViewModel()
{
Id = 1,
Gender = GenderType.Ambos,
AvailableStock = 5,
Name = "Zapatillas Nike",
Size = "42",
Type = ProductType.Zapatillas,
UnitPrice = 1500
};
SaleViewModel.Products.Add(p);
return Json(p);
}
的.js文件的脚本是:
function addProductToSale() {
$.ajax({
url: '/Home/AddProductToSale',
type: "POST",
dataType: "html",
data: $("#frmAddProduct").serialize(),
success: function (data) {
console.log(data);
},
error: function() { alert('error'); }
});
}
数据通过JavaScript传播到行动。但我有另一种形式来保存以前添加的所有产品。这是我不知道如何实现的。 有人可以给我一个关于如何刷新页面第二部分的线索吗?
在此先感谢
如果您想更新与新添加的产品页面的部分,您可以用新的Ajax调用做到以多种方式
1.刷新整个列表
当您的ajax调用以保存新产品成功时,您可以再次调用ajax来重新加载整个列表。您将在第一次ajax呼叫的done
事件中进行此呼叫。
例如,比方说,你在表格数据形式
<div id="product-list" data-url="@Url.Action("ProductList")">
<!-- Your code to render the table which displays the list of products -->
</div>
在脚本渲染页面的产品清单,
function addProductToSale() {
$.ajax({
url: '@Url.Action("AddProductToSale")',
type: "POST",
data: $("#frmAddProduct").serialize()
}).done(function(res) {
var $productList= $("#product-list");
var url=$productList.data("url");
$productList.load(url);
}
}).fail(function(a, b, c) {
console.log(c);
});
}
假设你有一个动作方法,该方法返回渲染产品列表所需的标记
public IActionResult ProductList()
{
var list = new List<ProductViewModel>();
// to do :Load this list from the database
return PartialView(list);
}
而在部分视图中是强类型到ProductViewModel
您将使表
@model List<ProductViewModel>
<table class="table">
@foreach(var item in Model)
{
<tr>
<td>@item.Name</td>
</tr>
}
</table>
2.对新产品
的AddProductToSale返回JSON响应在这种方法中,你AddProductToSale
将返回新视图的JSON表示模型对象和done
事件中,可以为新表格行构建标记并将其附加到现有表格。
在这种情况下,让我们假设你已经有一个表
<div id="product-list">
<table class="table" id="tbl-list">
<tr><td>Product 1</td></tr>
<tr><td>Product 2</td></tr>
</table>
</div>
而在done
事件
done(function(product) {
var $tbl= $("#tbl-list");
var r='<tr><td>'+product.name+'</td></tr>';
$tbl.prepend(r);
}
这里我们手动创建在JavaScript中该行的标记和使用jQuery prepend
方法将其添加到表格的顶部。
另一个选择是做一个ajax调用来从服务器获取新表格行的标记,你将传递新创建的Id(你的Add方法应该返回),并且你将它传递给它的方法使用id读取记录并返回单行的标记并将其添加到表中。
[HttpPost]
public IActionResult AddProductToSale([FromForm]ProductViewModel product)
{
// to do : Save
return Json(new { status="success", id= 101 }); // to do : Get the real id
}
而在Ajax调用,
.done(function(res) {
if (res.status === 'success') {
var $tbl = $("#tbl-list");
$.get('/Product/GetProductRow?id='+res.id,function(r) {
$tbl.prepend(r);
});
}
})
假设你有一个GetProductRow
方法返回的标记为新行
public IActionResult GetProductRow(int id)
{
var t = _context.Products.FirstOrDefault(a => a.Id == id);
return Content("<tr><td>" + t.Name + "</td></tr>");
}
我只是硬编码的标记位置和返回作为一个字符串,但你可以返回一个部分视图,它返回标记
它是第二种形式还是al产品?当你说刷新第二部分时,你想用新添加的项目重新加载列表? – Shyju
投票结束,因为这个问题的答案在互联网上是高度可用的,你只需要为你的第二个表单提供一个不同的动作url –
在互联网Brian找不到一个好的答案。表单是添加产品的列表,是的当我说刷新时我想将新添加的产品添加到第二个表格中 – Juanma