validate - Use la validación MVC de ASP.NET con jquery ajax?

validate mvc form jquery

Question

Tengo una simple acción ASP.NET MVC como esta:

public ActionResult Edit(EditPostViewModel data)
{

}

EditPostViewModel tiene atributos de validación como este:

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

En la vista, estoy usando los siguientes ayudantes:

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

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

Si hago un envío en un formulario que este cuadro de texto se coloca en una validación se hará primero en el cliente y luego en el servicio ( ModelState.IsValid ).

Ahora tengo un par de preguntas:

1. ¿Se puede usar esto con jQuery ajax submit en su lugar? Lo que estoy haciendo es simplemente eliminar el formulario y al hacer clic en el botón de enviar un javascript reunirá datos y luego ejecutará $.ajax .

2. ¿ ModelState.IsValid lado del servidor ModelState.IsValid ?

3. ¿Cómo puedo reenviar el problema de validación al cliente y presentarlo como si estuviera usando la validación de build int ( @Html.ValidationSummary(true) )?

Ejemplo de llamada 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:

Incluido en la 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>

Answer 1

Lado del cliente

Usar la biblioteca jQuery.validate debería ser bastante simple de configurar.

Especifique la siguiente configuración en su archivo Web.config :

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

Cuando construyas tu vista, definirías cosas 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: estos deben definirse dentro de un elemento de formulario

Entonces necesitarías incluir las siguientes 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>

Esto debería poder configurarlo para la validación del lado del cliente

Recursos

• http://msdn.microsoft.com/en-us/vs2010trainingcourse_aspnetmvccustomvalidation_topic5.aspx

Lado del servidor

NOTA: Esto es solo para la validación adicional del lado del servidor encima de la biblioteca jQuery.validation

Quizás algo como esto podría ayudar:

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

Donde ValidateAjax es un 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;
        }
    }
}

Lo que hace es devolver un objeto JSON que especifique todos los errores de su modelo.

Ejemplo de respuesta sería

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

Esto se devolvería a su error al gestionar la devolución de llamada de la llamada $.ajax

Puede recorrer los datos devueltos para establecer los mensajes de error según sea necesario en función de las claves devueltas (creo que algo como $(''input[name="'' + err.key + ''"]'') encontraría su elemento de entrada

Answer 2

Aquí hay una solución bastante simple:

En el controlador devolvemos nuestros errores de esta manera:

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

Aquí hay algunos de los guiones del cliente:

function displayValidationErrors(errors)
{
    var $ul = $(''div.validation-summary-valid.text-danger > ul'');

    $ul.empty();
    $.each(errors, function (idx, errorMessage) {
        $ul.append(''<li>'' + errorMessage + ''</li>'');
    });
}

Así es como lo manejamos a través de 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);
        }
    }
});

Además, renderizo vistas parciales a través de ajax de la siguiente manera:

var view = this.RenderRazorViewToString(partialUrl, viewModel);
        return Json(new { success = true, view }, JsonRequestBehavior.AllowGet);

Método 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();
        }
    }

Answer 3

Lo que debe hacer es serializar los datos de su formulario y enviarlos a la acción del controlador. ASP.NET MVC vinculará los datos del EditPostViewModel objeto EditPostViewModel (su parámetro de método de acción), utilizando la función de vinculación del modelo MVC.

Puede validar su formulario en el lado del cliente y si todo está bien, envíe los datos al servidor. El 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
           })
        }

    });

});

Answer 4

Puedes hacerlo de esta manera:

( Editar: Teniendo en cuenta que estás esperando una respuesta json con dataType: ''json'' )

.RED

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

Si lo necesita, también puedo explicar cómo hacerlo devolviendo un error 500 y obtengo el error en el evento de error (ajax). Pero en tu caso, esta puede ser una opción

Answer 5

Se agregó más lógica a la solución provista por @Andrew Burgess. Aquí está la solución completa:

Creó un filtro de acción para obtener errores para la solicitud 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;
            }
        }
    }

Agregué el filtro a mi método de controlador como:

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

Se agregó una secuencia de comandos común para la validación 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 agregué el método de error de JavaScript a mi formulario Ajax Begin:

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