Documentación de etiquetas auxiliares de Ajax en Asp.net Core

6 minutos de lectura

¿Hay algún enlace para la documentación de las etiquetas de ayuda de Ajax en Asp.net Core? Estoy tratando de aprender ajax con asp.net core pero no encontré documentación para ello. En asp.net mvc usamos @Ajax.Form y luego usamos el método AjaxOptions para trabajar en ajax. Después de muchas horas de búsqueda encontré este enlace.
https://dotnetthoughts.net/jquery-unobtrusive-ajax-helpers-in-aspnet-core/
En este enlace hay una forma de trabajar con ajax en asp.net core. Lo implemento en mi proyecto y con éxito. Luego busqué su documentación pero no encontré nada. Quiero su enlace de documentación. Por favor, alguien que me ayude con su documentación.

  • Si quieres inclinarte ajax, el usojQuery.ajax()no lo obsoleto Ajax métodos

    usuario3559349

    3 de mayo de 2018 a las 6:38

  • ¿Está obsoleto el asistente de etiquetas Ajax? Este es un método fácil en asp.net core para trabajar con ajax. como menciono arriba de un enlace

    – Zeeshan Safdar

    3 de mayo de 2018 a las 6:52

  • Creo que la dirección general que debe seguir es escribir JavaScript para escribir JavaScript. Entonces, no, no hay ayudantes del lado del servidor en ASP.NET Core de forma predeterminada. jquery-ajax-unobtrusive es un paquete de JavaScript que agrega comportamiento del lado del cliente para buscar varios atributos para agregar funcionalidad sobre su formulario estándar. Sin embargo, no parece haber documentación al respecto, por lo que tendría que consultar su fuente para obtener más información: github.com/aspnet/jquery-ajax-unobtrusivo

    – dar un toque

    3 de mayo de 2018 a las 6:54


  • los Ajax.BeginForm() y Ajax.ActionLink() los ayudantes no se han incluido en mvc-core. MS no lo recomiendo. Ya no se actualiza. Siempre fue solo un envoltorio alrededor del $.ajax() métodos de todos modos, y el $.ajax() métodos le dan mucha más flexibilidad

    usuario3559349

    3 de mayo de 2018 a las 6:56

  • Gracias @poke Ahora entiendo lo que sucede en segundo plano.

    – Zeeshan Safdar

    3 de mayo de 2018 a las 6:59

avatar de usuario de poke
dar un toque

No hay ayudantes del lado del servidor, como @Ajax.Form, en ASP.NET Core. Probablemente podría escribir sus propios asistentes de etiquetas para funciones similares, pero no he visto a nadie hacer esto. La idea general es escribir JavaScript real cuando desea tener un comportamiento del lado del cliente. Ocultar estas cosas detrás de la magia del lado del servidor no suele ser la mejor idea.

jquery-ajax-unobtrusive es un paquete de JavaScript que agrega comportamiento del lado del cliente para buscar varios atributos en la página renderizada final para agregar funcionalidad además de sus formularios estándar. Así que esta sería una solución totalmente basada en JavaScript.

Desafortunadamente, no parece haber documentación al respecto. Puedes echar un vistazo a su código fuente para averiguar lo que puede o no ser posible.


jquery-ajax-unobtrusive documentación

Al echar un vistazo rápido a la fuente (descargo de responsabilidad: sin probar la funcionalidad yo mismo), estos parecen ser los atributos de datos admitidos y la funcionalidad disponible del paquete:

  • data-ajax="true" – Para habilitar la funcionalidad de un formulario.
  • data-ajax-update – Selector de los elementos que se actualizan con el resultado AJAX, utilizando el modo.
  • data-ajax-mode
    • data-ajax-mode="before"Antepone los datos al elemento.
    • data-ajax-mode="after"anexa los datos al elemento.
    • data-ajax-mode="replace-with"Reemplaza el elemento con los datos.
    • De lo contrario establece el contenido HTML del elemento a los datos.
  • data-ajax-confirm – Mensaje que se muestra al usuario para confirmar el envío del formulario.
  • data-ajax-loading – Selector de elemento que se muestra durante la carga.
  • data-ajax-loading-duration (predeterminado: 0) – Duración de la animación para mostrar/ocultar del elemento de carga.
  • data-ajax-method – Permite sobrescribir el método HTTP para la solicitud AJAX.
  • data-ajax-url – Permite sobrescribir la URL para la solicitud AJAX.
  • data-ajax-cache – Establecer en otro valor que "true" para deshabilitar el jQuery AJAX cache parámetro.
  • data-ajax-begin – Función de devolución de llamada antes de que comience la solicitud (argumentos: xhr)
  • data-ajax-complete – Función de devolución de llamada cuando se completa la solicitud (argumentos: xhr, status)
  • data-ajax-success – Función de devolución de llamada cuando la solicitud fue exitosa (argumentos: data, status, xhr)
  • data-ajax-failure – Función de devolución de llamada cuando falla la solicitud (argumentos: xhr, status, error)

Las funciones de devolución de llamada son el equivalente de jQuery beforeSend, complete, successy failure. Por cómo se ve, puede especificar las devoluciones de llamada usando una ruta de objeto de JavaScript a la función.

Por ejemplo data-ajax-success="foo.bar.onSuccess" llamará a la función foo.bar.onSuccess()es decir, buscará un objeto foo en el windowconsigue su bar miembro y llamar onSuccess en ese.

  • … y de repente había documentación para el paquete xD

    – dar un toque

    3 de mayo de 2018 a las 7:21

  • ¿Hay algún método para abortar() ing la solicitud?

    – Vikrant

    28 de noviembre de 2018 a las 12:16


  • @Vikrant Regresando false desde el data-ajax-begin método parece funcionar. Aunque probablemente ya lo hayas encontrado…

    – Auspex

    31 de mayo a las 10:58

  • Sí, @Auspex, lo hice, pero muchas gracias por la entrada correcta. 😉

    – Vikrant

    31 de mayo a las 11:03

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 *, AjaxTagHelper

Para 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="https://stackoverflow.com/questions/50148418/~/js/AjaxHelper.js"></script>

Si está buscando los ayudantes de Ajax de estilo antiguo en Core, este paquete de Nuget podría ayudar:

AspNetCore.Discreto.Ajax

Puedes instalarlo usando –

PM> Install-Package AspNetCore.Unobtrusive.Ajax

Esto le permitirá utilizar ayudantes como

@Html.AjaxActionLink()
@Html.AjaxBeginForm()
@Html.AjaxRouteLink()

Aquí están los detalles de github. Puedes encontrar más documentación allí.

Github Url al proyecto

¿Ha sido útil esta solución?