web-dev-qa-db-fra.com

Documentation des balises d'assistance Ajax dans Asp.net Core

Existe-t-il un lien pour la documentation des balises d'aide Ajax dans Asp.net Core? J'essaie d'apprendre ajax avec le noyau asp.net mais je n'ai trouvé aucune documentation pour cela. Dans asp.net mvc, nous utilisons @ Ajax.Form, puis utilisons la méthode AjaxOptions pour travailler sur ajax. Après plusieurs heures de recherche, j'ai trouvé ce lien. https://dotnethnessts.net/jquery-unobtrusive-ajax-helpers-in-aspnet-core/ Dans ce lien, il existe un moyen de travailler avec ajax dans le noyau asp.net. Je l'implémente dans mon projet et réussis. Ensuite, je recherche sa documentation mais je n'ai rien trouvé. Je veux son lien vers la documentation.Veuillez aider quelqu'un pour sa documentation

c#jqueryajaxasp.net-mvcasp.net-core
8
Zeeshan Safdar

Il n'y a pas d'aide côté serveur, comme @Ajax.Form, Dans ASP.NET Core. Vous pourriez probablement écrire vos propres assistants de balises pour des fonctionnalités similaires, mais je n'ai vu personne faire cela. L'idée générale est d'écrire du JavaScript réel lorsque vous souhaitez avoir un comportement côté client. Cacher ces choses derrière la magie côté serveur n'est généralement pas la meilleure idée.

jquery-ajax-unobtrusive est un package JavaScript qui ajoute un comportement côté client pour rechercher divers attributs dans la page finale rendue pour ajouter des fonctionnalités au-dessus de vos formulaires standard. Ce serait donc une solution entièrement basée sur JavaScript.

Malheureusement, il ne semble pas y avoir de documentation à ce sujet. Vous pouvez jeter un œil à son code source pour comprendre ce qui peut ou ne peut pas être possible.

Documentation jquery-ajax-unobtrusive

De jeter un coup d'œil à la source (avertissement: sans tester moi-même la fonctionnalité), cela semble être les attributs de données pris en charge et la fonctionnalité disponible du package:

  • data-ajax="true" - Pour activer la fonctionnalité d'un formulaire.
  • data-ajax-update - Sélecteur des éléments mis à jour avec le résultat AJAX, en utilisant le mode.
  • data-ajax-mode
    • data-ajax-mode="before" - Prepends les données à l'élément.
    • data-ajax-mode="after" - Ajoute les données à l'élément.
    • data-ajax-mode="replace-with" - remplace l'élément avec les données.
    • Sinon définit le contenu HTML de l'élément aux données.
  • data-ajax-confirm - Message affiché à l'utilisateur pour confirmer la soumission du formulaire.
  • data-ajax-loading - Sélecteur d'élément affiché lors du chargement.
  • data-ajax-loading-duration (Par défaut: 0) - Durée de l'animation pour afficher / masquer de l'élément de chargement.
  • data-ajax-method - Permet d'écraser la méthode HTTP pour la demande AJAX.
  • data-ajax-url - Permet d'écraser l'URL de la demande AJAX.
  • data-ajax-cache - Définissez sur une valeur autre que "true" Pour désactiver le paramètre jQuery AJAX cache .
  • data-ajax-begin - Fonction de rappel avant le début de la requête (arguments: xhr)
  • data-ajax-complete - Fonction de rappel lorsque la demande est terminée (arguments: xhr, status)
  • data-ajax-success - Fonction de rappel lorsque la demande a réussi (arguments: data, status, xhr)
  • data-ajax-failure - Fonction de rappel lorsque la demande a échoué (arguments: xhr, status, error)

Les fonctions de rappel sont l'équivalent de beforeSend, complete, success et failure de jQuery. D'après son apparence, vous pouvez spécifier les rappels à l'aide d'un chemin d'objet JavaScript vers la fonction.

Par exemple, data-ajax-success="foo.bar.onSuccess" Appellera la fonction foo.bar.onSuccess(), c'est-à-dire qu'il recherchera un objet foo dans le window, obtiendra son bar membre, et appelez onSuccess à ce sujet.

25
poke

https://github.com/Behrouz-Goudarzi/AjaxTagHelper

AjaxTagHelper

Une solution simple pour utiliser des liens et des formulaires ajax à l'aide de Tag Helper dans le noyau aspnet

Tout d'abord, copiez la classe AjaxTagHelper du dossier Extensions dans votre projet.

Ensuite, copiez le fichier AjaxTagHelper.js du dossier js dans wwwroot et ajoutez-le à votre projet.

Procédez ensuite comme suit: Ouvrez le fichier viewImports et ajoutez le code suivant

@using AjaxTagHelper.Extensions
@using AjaxTagHelper
@using AjaxTagHelper.Models
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, AjaxTagHelper

Pour utiliser Action Ajax, ajoutez le code suivant au lieu de la balise.

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

Utilisez le code suivant pour utiliser AJAX pour envoyer le formulaire au serveur.

<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 protected] " 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>

Enfin, ajoutez les scripts dont vous avez besoin pour le visualiser, vérifiez le code ci-dessous

<script>
    function SuccessCreate(data) {
        console.log(data);
        $("#tbodyPerson").append(data);


    }
    function SuccessDelete(data) {
        $("#tr" + data.id).fadeOut();
    }
</script>
<script src="~/js/AjaxHelper.js"></script>
2
Behrouz Goudarzi