如何在MVC2后返回JSON结果

本文关键字：返回 JSON 结果 MVC2 | 更新日期: 2023-09-27 18:02:20

我使用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);

i i ' m无法在div中获得结果;相反，它将整个渲染页面作为完整文件返回。请告诉我我应该怎么做才能在页面上显示结果，也想在同一页面上不清除表单。

如何在MVC2后返回JSON结果

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

模型:

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