gpt4 book ai didi

jquery - Ajax POST 到 Controller 操作以更新 View 模型,然后重新加载 div

转载 作者:行者123 更新时间:2023-11-30 23:59:07 25 4
gpt4 key购买 nike

我仍然对 ajax 的使用感到不安,所以我的实现中存在一些漏洞。我正在尝试发布到 Controller 操作,该操作将调用存储过程来更新我的 View 模型,然后重新加载将显示信息的 div。

Ajax 帖子:

$("#order-summary-panel").click(function(){
$.ajax({
url: '@Url.Action("GetOrderSummary", "Home")',
type: 'POST',
success: function() {
alert("It Worked!")
}
});
});

Controller 操作:

[HttpPost]
public ActionResult GetOrderSummary
{
using (var entity = new OrderEntities())
{
var user = User.Identity.Name;
var orderSummary = entity.uspGetOrderSummary(user).ToList();
var viewModel = new OrderViewModel
{
OrderSummary = orderSummary
};

return View("Index", viewModel)
}
}

要重新加载的 Div:

<div id="order-summary-panel">
@if (Model != null && Model.OrderSummary != null)
{
foreach (var order in Model.OrderSummary)
{
// Display Orders
}
}
</div>

我相信我不应该返回完整 View ,但我不确定如何在不这样做的情况下更新 View 模型。任何帮助,将不胜感激。

最佳答案

您可以返回 PartialView 并将结果放入 div 中,例如:

部分 View

[HttpPost]
public ActionResult GetOrderSummary
{
using (var entity = new OrderEntities())
{
var user = User.Identity.Name;
var orderSummary = entity.uspGetOrderSummary(user).ToList();
var viewModel = new OrderViewModel
{
OrderSummary = orderSummary
};

return PartialView("Index", viewModel);
}
}

在你的 JavaScript 中:

$("#order-summary-panel").click(function(){
$.ajax({
url: '@Url.Action("GetOrderSummary", "Home")',
type: 'POST',
success: function(data) {
if (data) { // check if data is defined
$("#order-summary-panel").html(data);
}
}
});
});

Json

您还可以尝试返回 json 并操作 html(这可以提高性能),例如:

[HttpPost]
public ActionResult GetOrderSummary
{
using (var entity = new OrderEntities())
{
var user = User.Identity.Name;
var orderSummary = entity.uspGetOrderSummary(user).ToList();
var viewModel = new OrderViewModel
{
OrderSummary = orderSummary
};

return Json(new { success = true, order = viewModel }, JsonRequestBehavior.DenyGet);
}
}

在你的 Javascript 中,你可以尝试读取这些属性:

$("#order-summary-panel").click(function(){
$.ajax({
url: '@Url.Action("GetOrderSummary", "Home")',
type: 'POST',
success: function(data) {
if (data) { // check if data is defined
if (data.success) { // if success is true
alert("It Worked!");
// you could read data.order
}
}
}
});
});

关于jquery - Ajax POST 到 Controller 操作以更新 View 模型,然后重新加载 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32975369/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com