c# - 如何在 Post 中返回 MVC2 中的 JSON 结果

Question

我正在使用 ajax post 方法发布如下表单:-

$(function () {

        $('#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;
        });
    });

在我返回的 Action Controller 上

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

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

Answer 1

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

型号:

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

Controller :

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 以不显眼的方式对表单进行 AJAX 化:

$(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 事件附加到表单 (#myForm) 的 if，而在您的示例中您使用的是 #BtnName 对于表单来说，这看起来是一个奇怪的可疑名称。很遗憾，您没有显示您的标记，所以我们不知道它实际代表什么
• 我不再对表单的 url (Home/Index) 进行硬编码，而是依赖于 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 header 中推断出它，并自动解析返回的 JSON 和将其作为您可以直接使用的 javascript 对象传递给成功回调。