1

我正在使用 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); 但似乎什么也没有发生。有人可以帮助我正确处理控制器动作的返回。

非常感谢！

4

1 回答 1

4

如果我理解正确，您的页面上有一个创建事件表单，并且您想发送一个 AJAX 请求来创建一个新事件。然后，您想#content用操作的结果替换页面中的一个部分CreateEvent。

看起来您的 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没有Layout和所有的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>

and the javascript is unchanged

$.ajax({
    url: submitUrl, type: "POST", traditional: true,
    data: { EventName: 'Name of event'},
    success: function(data){
        $("#content").html(data);
    }
})

Edit: If your Event creation fails for any reason after you have validated the input, you'll have to decide how you want to respond. One option is to add a response status to the object you return and just display that instead of the newly created Event.

于 2013-03-30T03:31:32.537 回答