Senden eines Razor-Formulars mit JQuery AJAX in MVC6 unter Verwendung der integrierten Funktionalität

Question 1

Ich würde gerne wissen, ob es eine bestimmte Möglichkeit gibt, ein Formular mit jQuery AJAX in MVC6 zu senden, wobei immer noch die automatischen Bindungsfunktionen von ASP.NET MVC verwendet werden. Ich glaube, dass Sie in anderen Versionen von MVC jquery.unobtrusive-ajax verwenden und einfach verwenden könnten

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

Da es einige Änderungen mit MVC6 gegeben hat, frage ich mich, was die neue empfohlene Methode wäre, dies zu tun, außer einen normalen AJAX-Post an den Server zu senden, wenn das Formular gesendet wird. Das heißt, ich würde die Werte jedes Eingabefelds manuell abrufen, sie in JSON umwandeln und an den Controller senden, damit alles an das ViewModel gebunden wird.

Wenn ich das folgende JavaScript für AJAX verwende, spielen die AJAX-Formulareinstellungen überhaupt eine Rolle?

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

Question 2

Ajax funktioniert auf die gleiche Weise, aber verwenden Sie anstelle der @Ajax-Hilfsprogramme die neuen MVC 6-Tag-Hilfsprogramme (vergessen Sie nicht, auf die Skripte „jquery“ und „jquery.unobtrusive-ajax“ zu verweisen).

JQuery Unauffälliges Ajax ist im Asp.Net GitHub-Repo vorhanden und kann von Bower gezogen werden.

Mit den neuen MVC-TagHelpern deklarieren Sie das Formular einfach wie folgt:

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

Um die AjaxOptions zu verwenden, die im Ajax Helper in früheren MVC-Versionen vorhanden waren, fügen Sie einfach diese Attribute hinzu und führen Sie das Form-Tag wie folgt aus:

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

Die HTML-Attribute (ehemals AjaxOptions), die Sie im Formular verwenden können, sind die folgenden (Originalquelle):

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

Eine weitere wichtige Änderung besteht darin, wie Sie auf der Serverseite prüfen, ob es sich bei der Anfrage tatsächlich um eine AJAX-Anfrage handelt. Auf früheren Versionen haben wir einfach verwendet Request.IsAjaxRequest().

Auf MVC6 müssen Sie eine einfache Erweiterung erstellen, um dieselben Optionen hinzuzufügen, die in früheren MVC-Versionen vorhanden waren (Originalquelle):

/// <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;
}

Question 3

Hier ist ein wirklich schönes YouTube-Tutorial zu AJAX-Formularenund Sie können das Projekt von dort herunterladen GitHub-Link. Es enthält das für AJAX zu verwendende Skript.

Aus dem obigen Projekt kopierter Beispielstil:

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

Question 4

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

AjaxTagHelper

Eine einfache Lösung für die Verwendung von Links und Ajax-Formularen mit Tag Helper im Aspnet-Kern

Kopieren Sie zunächst die Klasse AjaxTagHelper aus dem Ordner „Extensions“ in Ihr Projekt.

Kopieren Sie zweitens die Datei AjaxTagHelper.js aus dem js-Ordner in wwwroot und fügen Sie sie Ihrem Projekt hinzu.

Gehen Sie dann wie folgt vor: Öffnen Sie die viewImports-Datei und fügen Sie den folgenden Code hinzu

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

Um Action Ajax zu verwenden, fügen Sie den folgenden Code anstelle des Tags hinzu.

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

Verwenden Sie den folgenden Code, um das Formular mit AJAX an den Server zu senden.

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

Fügen Sie schließlich die Skripte hinzu, die Sie zum Anzeigen benötigen, überprüfen Sie den folgenden Code

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


    }
    function SuccessDelete(data) {
        $("#tr" + data.id).fadeOut();
    }
</script>
<script src="https://stackoverflow.com/questions/35202804/~/js/AjaxHelper.js"></script>