如何正确呈现 AJAX POST MVC 4 的返回

Question

我正在使用 MVC 4，我正在尝试发送一个发布请求，并且我从我的控制器获得了成功的返回，结果视图采用 HTML 形式，但我不知道当时该怎么处理它.

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);
            }
        })
    }
});

我的控制器

[HttpPost]
public ActionResult CreateEvent(EventModel model)
{
    if(ModelState.IsValid)
    {
        return RedirectToAction("Index");
    }
    else
    {
        return View(model);
    }
}

所以你可以看到我的控制器要么返回一个视图，要么返回一个 RedirectToAction。在我的 ajax 调用的成功回调中，我正在执行以下操作： $("#content").html(data); 但似乎什么也没有发生。有人可以帮助我正确处理控制器操作的返回。

非常感谢！

Answer 1

如果我理解正确，您的页面上有一个创建事件表单，并且您想发送一个 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 的PartialView 以及所有head 和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);
    }
}

现在创建一个新的局部视图 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);
    }
})

编辑： 如果在验证输入后您的事件创建因任何原因失败，您必须决定如何响应。一种选择是向您返回的对象添加响应状态并仅显示该状态而不是新创建的事件。