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

Question

我正在使用 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 操作的返回。

非常感谢!

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 的完整页面，而是返回一个没有 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);
    }
})

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