unobtrusive - aspnet mvc jquery validation




Use validação ASP.NET MVC com jquery ajax? (4)

Lado do Cliente

Usar a biblioteca jQuery.validate deve ser bem simples de configurar.

Especifique as seguintes configurações no seu arquivo Web.config :

<appSettings>
    <add key="ClientValidationEnabled" value="true"/> 
    <add key="UnobtrusiveJavaScriptEnabled" value="true"/> 
</appSettings>

Quando você constrói sua visão, você definiria coisas como esta:

@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)

NOTA: Estes precisam ser definidos dentro de um elemento de formulário

Então você precisaria incluir as seguintes bibliotecas:

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

Isso deve ser capaz de configurá-lo para validação do lado do cliente

Recursos

Lado do servidor

NOTA: Isso é somente para validação adicional do lado do servidor na parte superior da biblioteca jQuery.validation

Talvez algo assim possa ajudar:

[ValidateAjax]
public JsonResult Edit(EditPostViewModel data)
{
    //Save data
    return Json(new { Success = true } );
}

Onde ValidateAjax é um atributo definido como:

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;
        }
    }
}

O que isso faz é retornar um objeto JSON especificando todos os seus erros de modelo.

Exemplo de resposta seria

[{
    "key":"Name",
    "errors":["The Name field is required."]
},
{
    "key":"Description",
    "errors":["The Description field is required."]
}]

Isso seria retornado ao seu retorno de chamada de manipulação de erro da chamada $.ajax

Você pode percorrer os dados retornados para definir as mensagens de erro, conforme necessário, com base nas chaves retornadas (acho que algo como $('input[name="' + err.key + '"]') encontraria seu elemento de entrada

Eu tenho uma ação simples da ASP.NET MVC como esta:

public ActionResult Edit(EditPostViewModel data)
{

}

O EditPostViewModel tem atributos de validação como este:

[Display(Name = "...", Description = "...")]
[StringLength(100, MinimumLength = 3, ErrorMessage = "...")]
[Required()]
public string Title { get; set; }

Na exibição, estou usando os seguintes ajudantes:

 @Html.LabelFor(Model => Model.EditPostViewModel.Title, true)

 @Html.TextBoxFor(Model => Model.EditPostViewModel.Title, 
                        new { @class = "tb1", @Style = "width:400px;" })

Se eu fizer um envio em um formulário que esta caixa de texto é colocada em uma validação será feito primeiro no cliente e, em seguida, no serviço ( ModelState.IsValid ).

Agora eu tenho algumas perguntas:

  1. Isso pode ser usado com jQuery ajax enviar em vez disso? O que estou fazendo é simplesmente remover o formulário e, ao clicar no botão enviar, um javascript reunirá os dados e, em seguida, executará o $.ajax .

  2. O ModelState.IsValid do servidor funcionará?

  3. Como posso encaminhar o problema de validação de volta para o cliente e apresentá-lo como se estivesse usando a validação build int ( @Html.ValidationSummary(true) )?

Exemplo de chamada 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');
        }
    });
}

Editar 1:

Incluído na página:

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

Adicionada mais lógica à solução fornecida por @Andrew Burgess. Aqui está a solução completa:

Criado um filtro de ação para obter erros para a solicitação 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;
            }
        }
    }

Adicionado o filtro ao meu método de controle como:

[HttpPost]
// this line is important
[ValidateAjax]
public ActionResult AddUpdateData(MyModel model)
{
    return Json(new { status = (result == 1 ? true : false), message = message }, JsonRequestBehavior.AllowGet);
}

Adicionado um script comum para validação de 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);
}

Finalmente, adicionei o método error javascript ao meu formulário Ajax Begin:

@model My.Model.MyModel
@using (Ajax.BeginForm("AddUpdateData", "Home", new AjaxOptions { HttpMethod = "POST", OnFailure="onAjaxFormError" }))
{
}

O que você deve fazer é serializar seus dados de formulário e enviá-los para a ação do controlador. O ASP.NET MVC ligará os dados do formulário ao objeto EditPostViewModel (seu parâmetro do método de ação), usando o recurso de vinculação do modelo MVC.

Você pode validar seu formulário no lado do cliente e, se tudo estiver correto, envie os dados para o servidor. O método valid() será útil.

$(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
           })
        }

    });

});

Você pode fazer assim:

( Edit: Considerando que você está esperando por uma resposta json com dataType: 'json' )

.LÍQUIDO

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');
    }
},

Se você precisar, também posso explicar como fazer isso, retornando um erro 500 e obter o erro no erro de evento (ajax). Mas no seu caso isso pode ser uma opção







validation