Использовать ASP.NET проверка MVC с помощью jQuery ajax?
у меня простой ASP.NET действие MVC выглядит так:
public ActionResult Edit(EditPostViewModel data)
{
}
на 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 ajax вместо этого? Я просто удаляю форму, и при нажатии кнопки отправки javascript будет собирать данные, а затем запускать
$.ajax
.будет на стороне сервера
ModelState.IsValid
работы?как я могу переслать проблему проверки обратно клиенту и представить ее, как будто Im использует проверку build 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
библиотека должна быть довольно простой в настройке.
укажите следующие настройки в вашем :
<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
object (ваш параметр метода действия), используя функцию привязки модели MVC.
вы можете проверить свою форму на стороне клиента, и если все нормально, отправить данные на сервер. The 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" }))
{
}