Me gustaría saber si hay una forma específica de enviar un formulario usando jQuery AJAX en MVC6, aún usando las funciones de enlace automático de ASP.NET MVC. Creo que en otras versiones de MVC podrías usar jquery.unobtrusive-ajax y simplemente usar
@using (Ajax.BeginForm("SaveData", new AjaxOptions(){}Dado que ha habido algunos cambios con MVC6, me pregunto cuál sería la nueva forma recomendada de hacer esto además de hacer una publicación AJAX normal en el servidor cuando se envía el formulario. Esto significa que obtendría manualmente los valores de cada campo de entrada, los convertiría en JSON y los enviaría al controlador para que todo se vinculara al ViewModel.
Si uso el siguiente JavaScript para AJAX, ¿importa alguna de las configuraciones del formulario AJAX?
$('form').submit(function () { $.ajax({ type: "POST", url: "/Products/Create/", data: JSON.stringify(data), contentType: "application/json; charset=utf-8", dataType: "json" }); });Ajax funciona de la misma manera, pero en lugar del ayudante @Ajax, use los nuevos ayudantes de etiquetas MVC 6 (no olvide hacer referencia a los scripts 'jquery' y 'jquery.unobtrusive-ajax').
JQuery Unbtrusive Ajax existe en el repositorio de Asp.Net GitHub y se puede extraer de Bower.
Usando los nuevos MVC TagHelpers, simplemente declara el formulario de la siguiente manera:
<form asp-controller="Home" asp-action="SaveForm" data-ajax="true" data-ajax-method="POST"> ... </form>Para usar AjaxOptions que existían en Ajax Helper en versiones anteriores de MVC, simplemente agregue esos atributos y haga la etiqueta de formulario de esta manera:
<form asp-controller="Home" asp-action="SaveForm" data-ajax="true" data-ajax-method="POST" data-ajax-mode="replace" data-ajax-update="#content"> ... </form> <div id="content"></div>Los atributos HTML (anteriormente AjaxOptions) que puede usar en el formulario son los siguientes ( fuente original ):
+------------------------+-----------------------------+ | AjaxOptions | HTML attribute | +------------------------+-----------------------------+ | Confirm | data-ajax-confirm | | HttpMethod | data-ajax-method | | InsertionMode | data-ajax-mode | | LoadingElementDuration | data-ajax-loading-duration | | LoadingElementId | data-ajax-loading | | OnBegin | data-ajax-begin | | OnComplete | data-ajax-complete | | OnFailure | data-ajax-failure | | OnSuccess | data-ajax-success | | UpdateTargetId | data-ajax-update | | Url | data-ajax-url | +------------------------+-----------------------------+ Otro cambio significativo es cómo verifica en el lado del servidor si la solicitud es realmente una solicitud AJAX . En versiones anteriores, simplemente Request.IsAjaxRequest() .
En MVC6, debe crear una extensión simple para agregar las mismas opciones que existían en versiones anteriores de MVC ( fuente original ):
/// <summary> /// Determines whether the specified HTTP request is an AJAX request. /// </summary> /// /// <returns> /// true if the specified HTTP request is an AJAX request; otherwise, false. /// </returns> /// <param name="request">The HTTP request.</param><exception cref="T:System.ArgumentNullException">The <paramref name="request"/> parameter is null (Nothing in Visual Basic).</exception> public static bool IsAjaxRequest(this HttpRequest request) { if (request == null) throw new ArgumentNullException("request"); if (request.Headers != null) return request.Headers["X-Requested-With"] == "XMLHttpRequest"; return false; }Aquí hay un muy buen tutorial de YouTube sobre formularios AJAX , y puede descargar el proyecto desde este enlace de GitHub . Contiene el script que se utilizará para AJAX.
Ejemplo de estilo copiado del proyecto anterior:
<form asp-controller="Home1" asp-action="SaveForm" data-ajax="true" data-ajax-method="POST" data-ajax-mode="replace" data-ajax-update="#content" data-ajax-loading ="#divloading" data-ajax-success="Success" data-ajax-failure ="Failure"> <div class="form-group"> <div> <h4>@Html.Label("Name")</h4> </div> <div> @Html.TextBox("Name","",htmlAttributes:new { @class="form-control",id="Name"})</div> </div> <div class="form-group"> <div><h4>@Html.Label("Age")</h4></div> <div>@Html.TextBox("Age", "", htmlAttributes: new { @class = "form-control", id ="Age" })</div> </div> <br/> <input type="submit" name="Submit" class="btn btn-block btn-success" /> </form>https://github.com/Behrouz-Goudarzi/AjaxTagHelper
AjaxTagHelper
Una solución simple para usar enlaces y formularios ajax usando Tag Helper en aspnet core
Primero, copie la clase AjaxTagHelper de la carpeta Extensiones a su proyecto.
En segundo lugar, copie el archivo AjaxTagHelper.js de la carpeta js en wwwroot y agréguelo a su proyecto.
Luego haga lo siguiente: Abra el archivo viewImports y agregue el siguiente código
@using AjaxTagHelper.Extensions @using AjaxTagHelper @using AjaxTagHelper.Models @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers @addTagHelper *, AjaxTagHelperPara usar Action Ajax, agregue el siguiente código en lugar de la etiqueta.
<ajax-action ajax-action="Delete" ajax-controller="Home" ajax-data-id="@Model.Id" class="btn btn-danger btn-sm" ajax-success-func="SuccessDelete"> Delete </ajax-action>Use el siguiente código para usar AJAX para enviar el formulario al servidor.
<div class="row"> <form id="frmCreate" class="col-sm-9"> <div class="row"> <div class="col-sm-4 form-control"> <input placeholder="Enter Name" name="Name" class="input-group" type="text" /> </div> <div class="col-sm-4 form-control"> <input placeholder="Enter Family" name="Family" class="input-group" type="text" /> </div> <div class="col-sm-4 form-control"> <input placeholder="Enter Email@site.com " name="Email" class="input-group" type="email" /> </div> </div> </form> <div class="col-sm-3"> <ajax-button ajax-controller="Home" ajax-action="Create" ajax-form-id="frmCreate" ajax-success-func="SuccessCreate" class="btn btn-sm btn-success"> Create </ajax-button> </div> </div>Finalmente, agregue los scripts que necesita para verlo, verifique el código a continuación
<script> function SuccessCreate(data) { console.log(data); $("#tbodyPerson").append(data); } function SuccessDelete(data) { $("#tr" + data.id).fadeOut(); } </script> <script src="~/js/AjaxHelper.js"></script>