MVC 3 $ .post有效但$ .ajax没有

时间:2011-02-05 17:52:33

标签: javascript jquery asp.net-mvc-3

我有一个简单的模型

namespace StackOverflow.Models
{
    public class Test
    {
        public Test()
        {
            Name = "Test";
            Subs = new List<Sub>();
            Subs.Add(new Sub { Num = 1, SubName = "A" });
            Subs.Add(new Sub { Num = 2, SubName = "B" });
        }

        public string Name { get; set; }
        public List<Sub> Subs { get; set; }
    }

    public class Sub
    {
        public int Num { get; set; }
        public string SubName { get; set; }
    }
}

和相关视图

@model StackOverflow.Models.Test

<script src="@Url.Content("~/Scripts/jquery-1.4.4.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/JScript1.js")" type="text/javascript"></script>

@{
    ViewBag.Title = "Test";
}

<h2>Test2</h2>

@using (Html.BeginForm())
{

    <p>Test Name</p>   
    @Html.EditorFor(m => m.Name)

    <p>Sub 1</p>
    @Html.EditorFor(m => m.Subs[0].Num)
    @Html.EditorFor(m => m.Subs[0].SubName)

    <p>Sub2</p>
    @Html.EditorFor(m => m.Subs[1].Num)
    @Html.EditorFor(m => m.Subs[1].SubName)

    <div id="result"></div>

    <br />

    <input type="submit" value="create" />
}

控制器操作

    public ActionResult Test()
    {
        Test test = new Test();

        return View(test);
    }

    [HttpPost]
    public PartialViewResult Test(Test test)
    {
        if (ModelState.IsValid)
        {
            return PartialView("_Results", new Result {Value = "Pass"});
        }
        else
        {
            return PartialView("_Results", new Result { Value = "Fail" });
        }
    }

PartialView只显示文本字符串。

我使用以下javascript来发布帖子

$('form').submit(function (e) {
    $(':submit', this).attr('disabled', true);
    e.preventDefault();


    $.post($(this).attr("action"), $(this).serialize(), function (data) {
        $("#result").html(data);
        alert("hurray");

    });
    return false;
});

一切正常(在实际代码中我有一个jQueryUI模式对话框出现在提交点击上并在帖子返回时关闭)

我认为我需要使用$ .ajax所以我可以有一个“error:”函数来删除jQueryUI模式对话框,如果出现任何问题。这是我遇到问题的地方,对于我的生活,我无法弄清楚我做错了什么

这是我的第一次尝试,我只是在帖子上显示警告(“错误”)。

   $.ajax({
        url: $(this).attr("action"),
        type: "POST",
        data: $(this).serialize(),
        datatype: "json",
        contentType: "application/json; charset=utf-8",
        success: function () {
            alert("success!");
        },
        error: function () {
            alert("error!!");
        }
    });

我也尝试将以下内容传递给“data:”

JSON.stringify($( “形式”)serializeArray());

当我查看控制器操作中的“test”时,我发现它不包含任何数据

我也试过简单地传入

($("form").serializeArray()

然后得到“错误”警告。

任何人都可以帮我解决这个问题吗?

非常感谢。

1 个答案:

答案 0 :(得分:3)

问题出在这一行:

contentType: "application/json; charset=utf-8",

这会为请求设置content-type标头。它没有为响应指定任何内容。您正在使用serialize创建数据字符串:这意味着它将采用正常的a=value&b=othervalue格式,这显然是不是 JSON。

删除contentType行。 jQuery将为您设置正确的请求标头(application/x-www-form-urlencoded