Właściwy sposób użycia AJAX Post w jquery do przekazania modelu z silnie wpisanego widoku MVC3

Znalazłem 3 sposoby na zaimplementowanie tego:

Klasa C#:

public class AddressInfo {
    public string Address1 { get; set; }
    public string Address2 { get; set; }
    public string City { get; set; }
    public string State { get; set; }
    public string ZipCode { get; set; }
    public string Country { get; set; }
}

Akcja:

[HttpPost]
public ActionResult Check(AddressInfo addressInfo)
{
    return Json(new { success = true });
}

JavaScript można to zrobić na trzy sposoby:

1) Łańcuch Zapytania:

$.ajax({
    url: '/en/Home/Check',
    data: $('#form').serialize(),
    type: 'POST',
});

Dane są tutaj ciągiem znaków.

"Address1=blah&Address2=blah&City=blah&State=blah&ZipCode=blah&Country=blah"

2) Tablica Obiektów:

$.ajax({
    url: '/en/Home/Check',
    data: $('#form').serializeArray(),
    type: 'POST',
});

DANE to tablica par klucz / wartość:

=[{name: 'Address1', value: 'blah'}, {name: 'Address2', value: 'blah'}, {name: 'City', value: 'blah'}, {name: 'State', value: 'blah'}, {name: 'ZipCode', value: 'blah'}, {name: 'Country', value: 'blah'}]

3) JSON:

$.ajax({
      url: '/en/Home/Check',
      data: JSON.stringify({ addressInfo:{//missing brackets
          Address1: $('#address1').val(),
          Address2: $('#address2').val(),
          City: $('#City').val(),
          State: $('#State').val(),
          ZipCode: $('#ZipCode').val()}}),
      type: 'POST',
      contentType: 'application/json; charset=utf-8'
});

Dane są serializowanym ciągiem JSON. Zauważ, że nazwa musi być zgodna z nazwą parametru w serwer!!

='{"addressInfo":{"Address1":"blah","Address2":"blah","City":"blah","State":"blah", "ZipCode", "blah", "Country", "blah"}}'

Tak to u mnie działa:

$.post("/Controller/Action", $("#form").serialize(), function(json) {       
        // handle response
}, "json");

[HttpPost]
public ActionResult TV(MyModel id)
{
    return Json(new { success = true });
}

To, co masz, jest w porządku - jednak, aby zaoszczędzić trochę pisania, możesz po prostu użyć dla swoich danych

data: $('#formId').serialize()

Zobacz http://www.ryancoughlin.com/2009/05/04/how-to-use-jquery-to-serialize-ajax-forms / dla szczegółów składnia jest dość podstawowa.

Jeśli używasz MVC 5 przeczytaj to rozwiązanie!

Znam pytanie specjalnie nazwane dla MVC 3, ale natknąłem się na tę stronę z MVC 5 i chciałem opublikować rozwiązanie dla każdego innego w mojej sytuacji. Wypróbowałem powyższe rozwiązania, ale nie działały dla mnie, Filtr akcji nigdy nie został osiągnięty i nie mogłem zrozumieć, dlaczego. Używam wersji 5 w moim projekcie i skończyło się na następującym filtrze akcji:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Mvc.Filters;

namespace SydHeller.Filters
{
    public class ValidateJSONAntiForgeryHeader : FilterAttribute, IAuthorizationFilter
    {
        public void OnAuthorization(AuthorizationContext filterContext)
        {
            string clientToken = filterContext.RequestContext.HttpContext.Request.Headers.Get(KEY_NAME);
            if (clientToken == null)
            {
                throw new HttpAntiForgeryException(string.Format("Header does not contain {0}", KEY_NAME));
            }

            string serverToken = filterContext.HttpContext.Request.Cookies.Get(KEY_NAME).Value;
            if (serverToken == null)
            {
                throw new HttpAntiForgeryException(string.Format("Cookies does not contain {0}", KEY_NAME));
            }

            System.Web.Helpers.AntiForgery.Validate(serverToken, clientToken);
        }

        private const string KEY_NAME = "__RequestVerificationToken";
    }
}

-- zanotuj using System.Web.Mvc i using System.Web.Mvc.Filters, a nie http biblioteki (myślę, że to jedna z rzeczy, które zmieniły się w MVC v5. --

Następnie po prostu zastosuj filtr [ValidateJSONAntiForgeryHeader] do swojej akcji (lub kontrolera) i powinna zostać wywołana poprawnie.

Na mojej stronie layoutu tuż nad </body> mam @AntiForgery.GetHtml();

Wreszcie, na mojej stronie Razor, wykonuję wywołanie ajax w następujący sposób:

var formForgeryToken = $('input[name="__RequestVerificationToken"]').val();

$.ajax({
  type: "POST",
  url: serviceURL,
  contentType: "application/json; charset=utf-8",
  dataType: "json",
  data: requestData,
  headers: {
     "__RequestVerificationToken": formForgeryToken
  },
     success: crimeDataSuccessFunc,
     error: crimeDataErrorFunc
});