如何在 MVC2 中在 Post 中返回 JSON 结果

Question

我正在使用 ajax post 方法来发布表单，例如：-

$(函数 () {

        $('#BtnName').submit(function () {
            $.ajax({
                url: 'Home/Index',
                type: "POST",
                data: $(this).serialize(),
                dataType: "json",
                async:false,
                contentType: 'application/json; charset=utf-8',
                success: function (data) { var message = data.Result; $("#Result").html(message); },
               

            });
            return false;
        });
    });

在我正在返回的动作控制器处

return Json(new { Result = "Success" }, JsonRequestBehavior.AllowGet);

我无法在 div 中获得结果；而不是将整个渲染页面作为完整文件返回。请告诉我应该怎么做才能在页面上显示结果并且还想在同一页面上而不清除表单。

Answer 1

好的，您问题中包含的代码位绝对不足以得出任何结论。所以让我们做一个完整的例子。

型号：

public class MyViewModel
{
    public string Foo { get; set; }
}

控制器：

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View(new MyViewModel());
    }

    [HttpPost]
    public ActionResult Index(MyViewModel model)
    {
        // TODO : process the model ...

        return Json(new { Result = "Success" });
    }
}

查看：

<% using (Html.BeginForm(null, null, FormMethod.Post, new { id = "myForm" })) { %>
    <%= Html.LabelFor(x => x.Foo) %>
    <%= Html.EditorFor(x => x.Foo) %>
    <input type="submit" value="Save" />
<% } %>

外部 javascript 不显眼地 AJAXify 表单：

$(function () {
    $('#myForm').submit(function () {
        $.ajax({
            url: this.action,
            type: this.method,
            data: $(this).serialize(),
            success: function (data) {
                var message = data.Result; 
                $('#Result').html(message);
            }
        });
        return false;
    });
});

注意事项：

• 我将.submit 事件附加到表单的if (#myForm)，而在您的示例中，您使用的是#BtnName，它看起来是一个奇怪可疑的表单名称。很遗憾，您没有显示您的标记，所以我们不知道它实际代表什么
• 我不再对表单 (Home/Index) 的 URL 进行硬编码，而是依赖于由 Html.BeginForm 生成的 URL。这样做有两个好处：1. 您现在可以将您的 javascript 放入一个单独的文件 => 您不再混合标记和脚本，您的 HTML 页面现在变得更小更快加载（外部静态 javascript 文件被缓存）和 2 . 当您在其他服务器上部署应用程序或决定更改路由时，它仍然可以工作，无需对您的 js 进行任何修改。
• 我不再使用contentType: 'application/json'，因为当您使用$(this).serialize() 时，这不会将表单序列化为JSON。它将其序列化为application/x-www-form-urlencoded 样式。所以你基本上是在引入一个矛盾： 您是在告诉服务器您将发送 JSON 请求，但实际上您不会。
• 我删除了async: false 属性，因为它会执行同步请求并在执行期间冻结浏览器。它不再是 AJAX。所以除非你想要这个，否则不要使用它。
• 我已经删除了dataType: 'json' 参数，因为jQuery 足够智能，可以从实际响应Content-Type 标头中推断出这一点，并自动解析返回的JSON 并将其作为可以直接使用的javascript 对象传递给成功回调。