如何在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;
        });
    });

在动作控制器上我回来了

返回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以不引人注目的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事件附加到form(#myForm)的if ,而在您的示例中,您使用#BtnName的是表单中看起来奇怪的可疑名称.遗憾的是,您没有显示您的标记,因此我们不知道它实际代表什么
• 我不再硬编码form(Home/Index)的url,而是依赖于Html.BeginForm.这有两个好处: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对象传递给成功回调.