Использование ASP.NET проверка MVC с помощью jQuery ajax?
у меня просто ASP.NET действие MVC выглядит так:
public ActionResult Edit(EditPostViewModel data)
{
}
The EditPostViewModel есть атрибуты проверки, как это:
[Display(Name = "...", Description = "...")]
[StringLength(100, MinimumLength = 3, ErrorMessage = "...")]
[Required()]
public string Title { get; set; }
в представлении я использую следующие помощники :
@Html.LabelFor(Model => Model.EditPostViewModel.Title, true)
@Html.TextBoxFor(Model => Model.EditPostViewModel.Title,
new { @class = "tb1", @Style = "width:400px;" })
если я делаю отправить на форму, что это текстовое поле помещается в проверку будет сделано сначала на клиенте, а затем на службе(ModelState.IsValid).
теперь у меня есть пара вопросов :
можно ли это использовать с jQuery Аякс отправить вместо этого? То, что я делаю, это просто удалить форму и при нажатии на кнопку Отправить javascript будет собирать данные, а затем запустить
$.ajax.будет на стороне сервера
ModelState.IsValidработы?как я могу переслать проблему проверки обратно клиенту и представить ее, как если бы я использовал проверку сборки int (
@Html.ValidationSummary(true))?
пример вызова Ajax:
function SendPost(actionPath) {
$.ajax({
url: actionPath,
type: 'POST',
dataType: 'json',
data:
{
Text: $('#EditPostViewModel_Text').val(),
Title: $('#EditPostViewModel_Title').val()
},
success: function (data) {
alert('success');
},
error: function () {
alert('error');
}
});
}
изменить 1:
на странице :
<script src="/Scripts/jquery-1.7.1.min.js"></script>
<script src="/Scripts/jquery.validate.min.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.min.js"></script>
5 ответов:
На Стороне Клиента
С помощью
jQuery.validateбиблиотека должна быть довольно простой в настройке.укажите следующие настройки в вашем
Web.configfile:<appSettings> <add key="ClientValidationEnabled" value="true"/> <add key="UnobtrusiveJavaScriptEnabled" value="true"/> </appSettings>когда вы создаете свой взгляд, вы бы определили такие вещи:
@Html.LabelFor(Model => Model.EditPostViewModel.Title, true) @Html.TextBoxFor(Model => Model.EditPostViewModel.Title, new { @class = "tb1", @Style = "width:400px;" }) @Html.ValidationMessageFor(Model => Model.EditPostViewModel.Title)Примечание: они должны быть определены в элементе формы
тогда вам нужно будет включить следующие библиотеки:
<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>этот должна быть возможность настроить вас для проверки на стороне клиента
ресурсы
На Стороне Сервера
Примечание: это только для дополнительной проверки на стороне сервера поверх
jQuery.validationбиблиотекавозможно, что-то вроде этого может помочь:
[ValidateAjax] public JsonResult Edit(EditPostViewModel data) { //Save data return Json(new { Success = true } ); }здесь
ValidateAjax- это атрибут определяется как:public class ValidateAjaxAttribute : ActionFilterAttribute { public override void OnActionExecuting(ActionExecutingContext filterContext) { if (!filterContext.HttpContext.Request.IsAjaxRequest()) return; var modelState = filterContext.Controller.ViewData.ModelState; if (!modelState.IsValid) { var errorModel = from x in modelState.Keys where modelState[x].Errors.Count > 0 select new { key = x, errors = modelState[x].Errors. Select(y => y.ErrorMessage). ToArray() }; filterContext.Result = new JsonResult() { Data = errorModel }; filterContext.HttpContext.Response.StatusCode = (int) HttpStatusCode.BadRequest; } } }это возвращает объект JSON, указывающий все ошибки вашей модели.
пример ответа будет
[{ "key":"Name", "errors":["The Name field is required."] }, { "key":"Description", "errors":["The Description field is required."] }]это будет возвращено в ваш обратный вызов обработки ошибок
$.ajaxвызоввы можете перебирать возвращенные данные, чтобы установить сообщения об ошибках по мере необходимости на основе возвращенных ключей (я думаю, что-то вроде
$('input[name="' + err.key + '"]')нашел бы ваш элемент ввода
что вы должны сделать, это сериализовать данные формы и отправить его к действию. ASP.NET MVC свяжет данные формы с
EditPostViewModelобъект (параметр метода действия), используя функцию привязки модели MVC.вы можете проверить свою форму на стороне клиента, и если все нормально, отправить данные на сервер. Элемент
valid()метод пригодится.$(function () { $("#yourSubmitButtonID").click(function (e) { e.preventDefault(); var _this = $(this); var _form = _this.closest("form"); var isvalid = _form .valid(); // Tells whether the form is valid if (isvalid) { $.post(_form.attr("action"), _form.serialize(), function (data) { //check the result and do whatever you want }) } }); });
вот довольно простое решение:
в контроллере мы возвращаем наши ошибки следующим образом:
if (!ModelState.IsValid) { return Json(new { success = false, errors = ModelState.Values.SelectMany(x => x.Errors).Select(x => x.ErrorMessage).ToList() }, JsonRequestBehavior.AllowGet); }вот некоторые из клиентских скриптов:
function displayValidationErrors(errors) { var $ul = $('div.validation-summary-valid.text-danger > ul'); $ul.empty(); $.each(errors, function (idx, errorMessage) { $ul.append('<li>' + errorMessage + '</li>'); }); }вот как мы справляемся с этим через ajax:
$.ajax({ cache: false, async: true, type: "POST", url: form.attr('action'), data: form.serialize(), success: function (data) { var isSuccessful = (data['success']); if (isSuccessful) { $('#partial-container-steps').html(data['view']); initializePage(); } else { var errors = data['errors']; displayValidationErrors(errors); } } });кроме того, я визуализирую частичные представления через ajax следующим образом:
var view = this.RenderRazorViewToString(partialUrl, viewModel); return Json(new { success = true, view }, JsonRequestBehavior.AllowGet);метод RenderRazorViewToString:
public string RenderRazorViewToString(string viewName, object model) { ViewData.Model = model; using (var sw = new StringWriter()) { var viewResult = ViewEngines.Engines.FindPartialView(ControllerContext, viewName); var viewContext = new ViewContext(ControllerContext, viewResult.View, ViewData, TempData, sw); viewResult.View.Render(viewContext, sw); viewResult.ViewEngine.ReleaseView(ControllerContext, viewResult.View); return sw.GetStringBuilder().ToString(); } }
вы можете сделать это так:
(Edit: учитывая, что вы ждете ответа
jsonСdataType: 'json').NET
public JsonResult Edit(EditPostViewModel data) { if(ModelState.IsValid) { // Save return Json(new { Ok = true } ); } return Json(new { Ok = false } ); }JS:
success: function (data) { if (data.Ok) { alert('success'); } else { alert('problem'); } },Если вам нужно, я также могу объяснить, как это сделать, вернув ошибку 500, и получить ошибку в ошибке события (ajax). Но в вашем случае это может быть вариант
добавил еще немного логики в решение, предоставленное @Andrew Burgess. Вот полное решение:
создан фильтр действий для получения ошибок для ajax запроса:
public class ValidateAjaxAttribute : ActionFilterAttribute { public override void OnActionExecuting(ActionExecutingContext filterContext) { if (!filterContext.HttpContext.Request.IsAjaxRequest()) return; var modelState = filterContext.Controller.ViewData.ModelState; if (!modelState.IsValid) { var errorModel = from x in modelState.Keys where modelState[x].Errors.Count > 0 select new { key = x, errors = modelState[x].Errors. Select(y => y.ErrorMessage). ToArray() }; filterContext.Result = new JsonResult() { Data = errorModel }; filterContext.HttpContext.Response.StatusCode = (int)HttpStatusCode.BadRequest; } } }добавлен фильтр к моему методу контроллера как:
[HttpPost] // this line is important [ValidateAjax] public ActionResult AddUpdateData(MyModel model) { return Json(new { status = (result == 1 ? true : false), message = message }, JsonRequestBehavior.AllowGet); }добавлен общий скрипт для проверки jquery:
function onAjaxFormError(data) { var form = this; var errorResponse = data.responseJSON; $.each(errorResponse, function (index, value) { // Element highlight var element = $(form).find('#' + value.key); element = element[0]; highLightError(element, 'input-validation-error'); // Error message var validationMessageElement = $('span[data-valmsg-for="' + value.key + '"]'); validationMessageElement.removeClass('field-validation-valid'); validationMessageElement.addClass('field-validation-error'); validationMessageElement.text(value.errors[0]); }); } $.validator.setDefaults({ ignore: [], highlight: highLightError, unhighlight: unhighlightError }); var highLightError = function(element, errorClass) { element = $(element); element.addClass(errorClass); } var unhighLightError = function(element, errorClass) { element = $(element); element.removeClass(errorClass); }наконец-то добавлен метод ошибки javascript в мою форму Ajax Begin:
@model My.Model.MyModel @using (Ajax.BeginForm("AddUpdateData", "Home", new AjaxOptions { HttpMethod = "POST", OnFailure="onAjaxFormError" })) { }
Comments