我正在开发 AspNet Core 2.0 MVC 网站。 问题是: 我在一个页面中有 2 个表单,第一个表单用于提交模型,这是通过以下操作完成的:
[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 顺利传输到操作。但我有另一种形式来保存之前添加的所有产品。这是我不知道如何实现。 有人可以告诉我如何刷新页面的第二部分吗?
提前致谢
最佳答案
如果您想使用新添加的产品更新页面的某个部分,可以通过多种方式进行
<强>1。使用新的 ajax 调用重新加载整个列表
当保存新产品的 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
的分部 View 中,您将渲染表格
@model List<ProductViewModel>
<table class="table">
@foreach(var item in Model)
{
<tr>
<td>@item.Name</td>
</tr>
}
</table>
<强>2。让 AddProductToSale 返回新产品的 JSON 响应
在此方法中,您的 AddProductToSale
将返回新 View 模型对象的 JSON 表示形式,并且在 done
事件中,您可以为新表行构建标记并将其附加到现有表中。
在本例中,我们假设您已经有一张 table
<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),并将其传递给它将读取的方法使用 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>");
}
我只是在这里对标记进行了硬编码并作为字符串返回,但您可以返回返回标记的部分 View
关于asp.net-mvc - MVC Core使用ajax发布数据并刷新页面上的某个部分,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46996432/