web-dev-qa-db-fra.com

Soumettre un formulaire de rasoir à l'aide de JQuery AJAX dans MVC6 en utilisant la fonctionnalité intégrée

Je voudrais savoir s'il existe un moyen spécifique de soumettre un formulaire à l'aide de jQuery AJAX dans MVC6, en utilisant toujours les fonctionnalités de liaison automatique d'ASP.NET MVC. Je crois que dans d'autres versions de MVC vous pourrait utiliser jquery.unobtrusive-ajax et simplement utiliser

@using (Ajax.BeginForm("SaveData", new AjaxOptions(){}

Puisqu'il y a eu quelques changements avec MVC6, je me demande quelle serait la nouvelle façon recommandée de faire cela en plus de faire un post normal AJAX sur le serveur lorsque le formulaire est soumis. Cela signifie que je le ferais manuellement récupérez les valeurs de chaque champ d'entrée, transformez-les en JSON et envoyez-les au contrôleur pour que tout soit lié au ViewModel.

Si j'utilise le code JavaScript suivant pour AJAX, l'un des paramètres de formulaire AJAX est-il important?

$('form').submit(function () {
    $.ajax({
        type: "POST",
        url: "/Products/Create/",
        data: JSON.stringify(data),
        contentType: "application/json; charset=utf-8",
        dataType: "json"
    });
});
javascriptjqueryajaxasp.net-mvcasp.net-core-mvc
25
Blake Rivell

Ajax fonctionne de la même manière, mais au lieu des assistants @Ajax, utilisez les nouveaux MVC 6 Tag Helpers (n'oubliez pas de référencer les scripts 'jquery' et 'jquery.unobtrusive-ajax').

JQuery Unobtrusive Ajax existe dans le référentiel Asp.Net GitHub et peut être tiré par Bower.

En utilisant les nouveaux MVC TagHelpers, vous déclarez simplement le formulaire comme suit:

<form asp-controller="Home" asp-action="SaveForm" data-ajax="true" data-ajax-method="POST">
...
</form>

Pour utiliser les AjaxOptions qui existaient sur l'Ajax Helper sur les versions précédentes de MVC, ajoutez simplement ces attributs comme suit:

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

Les attributs HTML (anciennement AjaxOptions) que vous pouvez utiliser dans le formulaire sont les suivants ( source d'origine ):

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

Un autre changement important concerne la façon dont vous vérifiez côté serveur si la demande est bien une demande AJAX . Sur les versions précédentes nous avons simplement utilisé Request.IsAjaxRequest().

Sur MVC6, vous devez créer une extension simple pour ajouter les mêmes options qui existaient sur les versions précédentes de MVC ( source d'origine ):

/// <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;
}
67
João Pereira

Voici un très joli tutoriel YouTube sur AJAX formulaires , et vous pouvez télécharger le projet à partir de ce lien GitHub . Il contient le script à utilisé pour AJAX.

Exemple de style copié à partir du projet ci-dessus:

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

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>
1
Behrouz Goudarzi