mvc5 - ¿Por qué UnobtrusiveJavaScriptEnabled=true inhabilita my ajax para funcionar?

mvc 5 razor ajax

Question

Estaba haciendo una muestra con la maquinilla de afeitar MVC3 y escribí esto:

<p>
    Show me the time in:
    @Ajax.ActionLink("UTC", "GetTime", new { zone = "utc" }, new AjaxOptions { UpdateTargetId = "myResults" })
    @Ajax.ActionLink("BST", "GetTime", new { zone = "bst" }, new AjaxOptions { UpdateTargetId = "myResults" })
    @Ajax.ActionLink("MDT", "GetTime", new { zone = "mdt" }, new AjaxOptions { UpdateTargetId = "myResults" })
</p>
<div id="myResults" style="border: 2px dotted red; padding: .5em;">
    Results will appear here
</div>
<p>
    This page was generated at @DateTime.UtcNow.ToString("h:MM:ss tt") (UTC)
</p>

Todas mis llamadas ajax no funcionaron hasta que cambié esta clave en web.config:

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

Eso de lo que leí en este artículo: http://weblogs.asp.net/owscott/archive/2010/11/17/mvc-3-ajax-redirecting-instead-of-updating-div.aspx
Pero ahora toda la validación de mi cliente no funciona como antes.

Mi pregunta es : ¿cómo hacer que el código ajax funcione y las validaciones del lado del cliente al mismo tiempo? y ¿qué es esta propiedad sobre "UnobtrusiveJavaScriptEnabled"? ¿Es un cambio entre ellos? Espero entender más sobre esto en palabras simples.

Answer 1

En ASP.NET MVC 3 hay dos cosas: validación del lado del cliente y JavaScript no intrusivo que están controlados por sus valores correspondientes en web.config:

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

La validación del lado del cliente se basa en el complemento jquery.validate.js junto con el script jquery.validate.unobtrusive.js de Microsoft. Cuando incluye esos dos scripts dentro de una vista que contiene un formulario HTML, la validación del lado del cliente se realizará según las reglas de anotación de datos que haya definido en su modelo. Cuando mira el código fuente HTML generado de la vista, notará que los campos de entrada tienen atributos HTML5 data-* que contienen las reglas de validación. La secuencia de comandos de validación discreta de Microsoft leería esas reglas y configuraría el complemento jquery validate.

El javascript discreto es diferente. Está basado en jquery. Cuando utiliza uno de los ayudantes HTML Ajax.* Como Ajax.ActionLink , en ASP.NET MVC 3, esos ayudantes también emiten atributos HTML5 data-* en el ancla correspondiente. Esos atributos luego son interpretados por el jquery.unobtrusive-ajax.js Microsoft que debe incluir en su página y AJAXify esos enlaces. Entonces, por ejemplo, cuando escribes:

@Ajax.ActionLink("UTC", "GetTime", new { zone = "utc" }, new AjaxOptions { UpdateTargetId = "myResults" })

esto generaría el siguiente HTML:

<a data-ajax="true" data-ajax-mode="replace" data-ajax-update="#myResults" href="/Home/GetTime?zone=utc">UTC</a>

Como puede ver ahora, toda la información sobre cómo realizar la solicitud AJAX está contenida en el DOM. Por lo tanto, podría tener un archivo javascript por separado donde suscribirse para el evento click de este enlace, enviar una solicitud AJAX a la URL contenida en el atributo href y luego, en función del valor del atributo data-ajax-mode reemplazar el html de algún contenedor con id contenido en el selector de atributos data-ajax-update . Y eso es exactamente lo que hace jquery.unobtrusive-ajax.js . Es solo que está en un archivo separado y su marcado y javascript son independientes, que no era el caso en versiones anteriores.

Por lo tanto, al contrario que ASP.NET MVC 1 y 2, en ASP.NET MVC 3 jQuery es el marco javascript predeterminado y los helpers HTML se basan en él. Todos MicrosoftAjax* scripts de MicrosoftAjax* ya no se usan.

Answer 2

Resolví que usando este código:

@using (Ajax.BeginForm("Index2","Home", 
    new AjaxOptions
        {
            UpdateTargetId = "result", 
            HttpMethod = "POST"
        }, 
    new
        {
            onclick = "Sys.Mvc.AsyncForm.handleClick(this, new Sys.UI.DomEvent(event));",
            onsubmit="Sys.Mvc.AsyncForm.handleSubmit(this, new Sys.UI.DomEvent(event), { insertionMode: Sys.Mvc.InsertionMode.replace, httpMethod: ''POST'', updateTargetId: ''result'' });"
        }))
{
    <input type="hidden" name="id" value=''1''/>
    <input type="submit" value="OK" />
}

Agregar las líneas:

new
        {
            onclick = "Sys.Mvc.AsyncForm.handleClick(this, new Sys.UI.DomEvent(event));",
            onsubmit="Sys.Mvc.AsyncForm.handleSubmit(this, new Sys.UI.DomEvent(event), { insertionMode: Sys.Mvc.InsertionMode.replace, httpMethod: ''POST'', updateTargetId: ''result'' });"
        }))

Está agregando el mismo comportamiento que Ajax.BeginForm sin perder el comportamiento de javascript.

Lo probé con MVC4