Использовать проверку ASP.NET MVC с jquery ajax?

102

У меня есть простые действия 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 submit? Я просто удаляю форму и при нажатии кнопки отправки javascript собирает данные, а затем запускает $.ajax.

  • Работает ли серверная сторона ModelState.IsValid?

  • Как я могу перенаправить проблему проверки назад клиенту и представить его, как если бы я использовал проверку целостности сборки (@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>
  • 0
    Хороший ответ ниже. Вот связанный вопрос. Ответ учитывает проверку на стороне клиента или на стороне сервера. Я влюблен в код JQuery, который они предоставляют. (Нет, это был не мой ответ.) Stackoverflow.com/questions/28987752/…
Теги:
validation
asp.net-mvc

4 ответа

127
Лучший ответ

Сторона клиента

Использование библиотеки jQuery.validate должно быть довольно простым в настройке.

Задайте следующие параметры в файле Web.config:

<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 library

Возможно, что-то подобное может помочь:

[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 + '"]') найдет ваш элемент ввода

  • 1
    Отличный ответ, особенно с потрясающим ValidateAjaxAttribute! Спасибо!
  • 3
    Я не понимаю, почему этот ответ получил так много голосов. Он не отвечает на вопрос 1: как выполнить проверку клиента при публикации с помощью $ .ajax? Я думаю, что @Shyju ответ помогает в этом.
Показать ещё 5 комментариев
35

Что вам нужно сделать, это сериализовать данные формы и отправить ее в действие контроллера. 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
           })
        }

    });

});
  • 1
    Спасибо! Я пробовал этот $ ("form #" + formId) .validate (), но он говорит, что форма (которая найдена) не имеет validate ()?
  • 0
    См. Edit1, где я показываю, что сценарий проверки включен на веб-странице. Я также вижу, что проверка выполняется при использовании обычной кнопки ввода типа ввода.
Показать ещё 6 комментариев
5

Здесь довольно простое решение:

В контроллере мы возвращаем наши ошибки следующим образом:

if (!ModelState.IsValid)
        {
            return Json(new { success = false, errors = ModelState.Values.SelectMany(x => x.Errors).Select(x => x.ErrorMessage).ToList() }, JsonRequestBehavior.AllowGet);
        }

Вот некоторые из клиентов script:

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();
        }
    }
  • 3
    Ваш «GetModelStateErrors» может быть полностью упрощен путем преобразования его в более простой однострочный оператор: return ModelState.Values.SelectMany (x => x.Errors) .Select (x => x.ErrorMessage) .ToList ();
  • 0
    Почему бы просто не вернуть PartialView для рендеринга в Ajax?
1

Вы можете сделать это следующим образом:

( Изменить: Учитывая, что вы ожидаете ответа 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). Но в вашем случае это может быть вариант

  • 1
    Я знаю, как сделать обычный запрос Jason, однако это не поможет мне с проверкой свойств diffrent и даже не использует встроенную проверку ASP.NET MVC, о которой я просил. Я мог бы, вероятно, построить сложный объект Jason, чтобы объяснить ошибки проверки для каждой свойства, но это будет много работы, и я надеюсь, что вы можете повторно использовать встроенную функциональность проверки ASP.NET MVC для этого?
  • 0
    1 - Как запустить вашу функцию «SendPost» ?, а 2 - ваши действительные данные на клиенте?
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню