MVC 3 $ .post работает, но $ .ajax не

Question

У меня есть простая модель

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!!"); 
     } 
    }); 

Я также попытался пропусканием следующее "Данные:"

JSON.stringify (. $ ("Форма") serializeArray());

Когда я смотрю на «тест» в действии контроллера я вижу, что он не содержит никаких данных

Я также попытался просто проходящие в

($("form").serializeArray() 

и просто получить «ошибку» оповещения.

Может ли кто-нибудь помочь мне разрешить это?

Большое спасибо.

Answer 1

Проблема заключается в этой строке:

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

Устанавливает заголовок content-type для запроса. Он не указывает ничего для ответа . Вы создаете свою строку данных с помощью serialize: это означает, что она будет в нормальном формате a=value&b=othervalue, что решительно не JSON.

Удалить линию contentType. jQuery установит правильный заголовок запроса (application/x-www-form-urlencoded для вас.