Правильный способ использовать AJAX Post в jquery для передачи модели из строго типизированного представления MVC3
Я начинающий веб-программист, поэтому, пожалуйста, простите меня, если некоторые из моих "жаргон" не является правильным. У меня есть проект с использованием ASP.NET использование фреймворка MVC3.
Я работаю над представлением администратора, где администратор изменит список оборудования. Одна из функций-кнопка "обновить", которую я хочу использовать jquery для динамического редактирования записи на веб-странице после отправки сообщения на контроллер MVC.
Я предполагаю, что этот подход является "безопасным" в одном параметре администратора, где существует минимальная проблема веб-страницы, выходящей из синхронизации с базой данных.
Я создал представление, которое является строго типизированным и надеялся передать данные модели в элемент управления MVC с помощью сообщения AJAX.
в следующем посте, я нашел что-то похожее на то, что я смотрю на делать: Помощью jQuery AJAX и MVC3 ASP.NET вызывая параметры со значением null
Я буду использовать пример кода из выше должность.
модель:
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; }
}
:
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
[HttpPost]
public ActionResult Check(AddressInfo addressInfo)
{
return Json(new { success = true });
}
}
скрипт в вид:
<script type="text/javascript">
var ai = {
Address1: "423 Judy Road",
Address2: "1001",
City: "New York",
State: "NY",
ZipCode: "10301",
Country: "USA"
};
$.ajax({
url: '/home/check',
type: 'POST',
data: JSON.stringify(ai),
contentType: 'application/json; charset=utf-8',
success: function (data.success) {
alert(data);
},
error: function () {
alert("error");
}
});
</script>
у меня не было возможности использовать еще выше. Но мне было интересно, был ли это "лучший" метод для передачи данных модели обратно в элемент управления MVC с помощью AJAX?
должен ли я беспокоиться о раскрытии информации о модели?
5 ответов:
вы можете пропустить объявление var и stringify. В противном случае, это будет работать просто отлично.
$.ajax({ url: '/home/check', type: 'POST', data: { Address1: "423 Judy Road", Address2: "1001", City: "New York", State: "NY", ZipCode: "10301", Country: "USA" }, contentType: 'application/json; charset=utf-8', success: function (data) { alert(data.success); }, error: function () { alert("error"); } });
я нашел 3 способа реализовать это:
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; } }
действие:
[HttpPost] public ActionResult Check(AddressInfo addressInfo) { return Json(new { success = true }); }
JavaScript вы можете сделать это тремя способами:
1) Строка Запроса:
$.ajax({ url: '/en/Home/Check', data: $('#form').serialize(), type: 'POST', });
данные вот строка.
"Address1=blah&Address2=blah&City=blah&State=blah&ZipCode=blah&Country=blah"
2) Массив Объекта:
$.ajax({ url: '/en/Home/Check', data: $('#form').serializeArray(), type: 'POST', });
данные-это массив пар ключ/значение :
=[{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' });
сведения вот сериализованная строка JSON. Обратите внимание, что имя должно совпадать с именем параметра на сервере!!
='{"addressInfo":{"Address1":"blah","Address2":"blah","City":"blah","State":"blah", "ZipCode", "blah", "Country", "blah"}}'
вот как это работало для меня:
$.post("/Controller/Action", $("#form").serialize(), function(json) { // handle response }, "json"); [HttpPost] public ActionResult TV(MyModel id) { return Json(new { success = true }); }
то, что у вас есть хорошо - однако, чтобы сохранить некоторые набрав, вы можете просто использовать для ваших данных
data: $('#formId').serialize()см.http://www.ryancoughlin.com/2009/05/04/how-to-use-jquery-to-serialize-ajax-forms/ для деталей синтаксис довольно простой.
при использовании MVC 5 прочитайте это решение!
Я знаю, что вопрос специально вызван для MVC 3, но я наткнулся на эту страницу с MVC 5 и хотел опубликовать решение для кого-либо еще в моей ситуации. Я пробовал вышеуказанные решения, но они не работали для меня, фильтр действий никогда не достигался, и я не мог понять, почему. Я использую версию 5 в своем проекте и получил следующий фильтр действий:
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"; } }
-- обратите внимание на
using System.Web.Mvc
иusing System.Web.Mvc.Filters
, а неhttp
библиотеки (я думаю, что это одна из вещей, которые изменились с MVC v5. --тогда просто примените фильтр
[ValidateJSONAntiForgeryHeader]
к вашему действию (или контроллеру), и он должен быть вызван правильно.на моей странице макета прямо над
</body>
Я@AntiForgery.GetHtml();
наконец, на моей странице бритвы я делаю вызов ajax следующим образом:
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 });