我正在使用 MVC 4 并且我正在尝试发送一个发布请求,并且我从我的 Controller 中获得了一个成功的返回结果,结果是 HTML 格式的 View ,但我不确定此时该怎么做.
JS
$("form").submit(function (e) {
e.preventDefault();
if ($(this).valid()) {
$.ajax({
url: submitUrl, type: "POST", traditional: true,
data: { EventName: 'Name of event'},
success: function(data){
$("#content").html(data);
}
})
}
});
我的 Controller
[HttpPost]
public ActionResult CreateEvent(EventModel model)
{
if(ModelState.IsValid)
{
return RedirectToAction("Index");
}
else
{
return View(model);
}
}
因此您可以看到我的 Controller 返回一个 View 或一个 RedirectToAction。在我的 ajax 调用的成功回调中,我正在执行以下操作: $("#content").html(data); 但似乎什么也没有发生。有人可以帮助我朝着正确的方向正确处理 Controller 操作的返回。
非常感谢!
最佳答案
如果我没理解错的话,你的页面上有一个创建事件表单,你想发送一个 AJAX 请求来创建一个新事件。然后,您想用 CreateEvent
操作的结果替换页面 #content
中的一个部分。
看起来您的 AJAX 设置正确,因此 CreateEvent
返回成功的响应。我认为您现在对响应感到困惑。您有多个选项,但我们选择两个。
JSON 响应
[HttpPost]
public ActionResult CreateEvent(EventModel model)
{
if(ModelState.IsValid)
{
var event = service.CreateEvent(model); // however you create an event
return Json(event);
}
else
{
// model is not valid so return to original form
return View("Index", model);
}
...
现在您需要从 JSON 生成 html 标记并将其插入到 #content
中。
$.ajax({
url: submitUrl, type: "POST", traditional: true,
data: { EventName: 'Name of event'},
success: function(data){
var obj = JSON.Parse(data);
var html; // build html with the obj containing server result
$("#content").html(html);
}
})
或HTML片段
我们不会返回一个定义了 Layout
的完整页面,而是返回一个没有 Layout
和所有 head 的
和 PartialView
script
标签。
[HttpPost]
public ActionResult CreateEvent(EventModel model)
{
if(ModelState.IsValid)
{
var event = service.CreateEvent(model); // however you create an event
return PartialView("CreateEventResult", event);
}
else
{
// model is not valid so return to original form
return View("Index", model);
}
}
现在创建一个新的局部 View CreateEventResult.cshtml (Razor)
@model Namespace.EventModelResult
@ {
Layout = null;
}
<div>
<!-- this stuff inserted into #content -->
@Model.Date
...
</div>
javascript没变
$.ajax({
url: submitUrl, type: "POST", traditional: true,
data: { EventName: 'Name of event'},
success: function(data){
$("#content").html(data);
}
})
编辑: 如果您在验证输入后出于任何原因创建事件失败,则必须决定要如何响应。一种选择是向您返回的对象添加响应状态,并只显示它而不是新创建的事件。
关于javascript - 如何正确呈现 AJAX POST MVC 4 的返回,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15714194/