ASP.NET Core 2, Taste, klicken Sie mit der Razor-Seiten ohne MVC

Normale form Einreichen

Werden, wenn dabei eine normale form Einreichen, gemäß dem übereinkommen, müssen Sie die handler-Methode, Namen zu Folgen On{{HttpVerb}}{{YourHanderName}} format

public ActionResult OnPostWay2(string data)
{
    //to do : return something
}

Nun stellen Sie sicher, dass Sie den submit-button innerhalb eines form - tag und Sie erwähnt die asp-page-handler. Der Wert des Attributs sollte dein handler-name der Seite-Modell-Klasse (Way2)

<form method="POST">       
    <button type="submit" asp-route-data="foo" asp-page-handler="Way2">Way 2</button>
</form>

Den oben genannten code erzeugt das markup für die Schaltfläche mit einem formaction - Attribut, die auf die url yourBaseUrl/YourPageName?data=foo&handler=Way2.
Wenn die Verwendung eines Klicks auf die Schaltfläche "senden", es werde nach der form dieser url, weil formaction Attribut-Wert überschreibt den Standard-action-url des Formulars. Wenn die Anforderung empfangen wird, wird der razor-Seiten-framework wird mit diesem parameter (handler) und leiten die Anfrage an den entsprechenden handler-Methode.

Ajax-call

Erhalten Sie einen 400 (Bad Request) Antwort, weil das framework erwartet, dass der RequestVerificationToken als Teil der gesendeten Daten anfordern. Wenn Sie die Option " Quelltext anzeigen von der Seite, sehen Sie ein verstecktes input-element mit dem Namen __RequestVerificationToken im inneren der form. Das framework verwendet das, um zu verhindern, dass mögliche CSRF-Angriffe. Wenn Sie Ihre Anfrage nicht über diese Informationen, der Rahmen wird wieder die 400 bad request.

Machen Ihre ajax-code funktioniert, ist alles was Sie tun müssen, ist, senden Sie diese explizit. Hier ist ein funktionierendes Beispiel

$("#btn").click(function(e) {
    e.preventDefault();

    var t = $("input[name='__RequestVerificationToken']").val();
    $.ajax({
        url: $(this).attr("formaction"),
        headers:
        {
            "RequestVerificationToken": t
        },
        type: "POST",
        data: { data: 'foo2' },
    }).done(function(data) {
        console.log(data);
    }).fail(function(a, v, e) {
        alert(e);
    });
});

Nun, da Sie einen ajax-Aufruf, macht es Sinn, wieder eine json-Antwort

public ActionResult OnPostWay2(string data)
{
    return new JsonResult("Received "+ data + " at "+DateTime.Now);        
}

Im obigen Beispiel, wir sind mit einigen jQuery-code, um das input-element mit dem Namen __RequestVerificationToken und Lesen den Wert der it. Ein robuster Ansatz wäre die Injektion der IAntiforgery Umsetzung, um die Ansicht und die Verwendung der GetAndStoreTokens Methode.

@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
@functions{
    public string GetAntiXsrfRequestToken()
    {
        return Xsrf.GetAndStoreTokens(Model.HttpContext).RequestToken;
    }
}
<script>
     $(function () {

         $("#btn").click(function(e) {
             e.preventDefault();
             var t = '@GetAntiXsrfRequestToken()';
             $.ajax({
                      url: $(this).attr("formaction"),
                      headers:
                      {
                          "RequestVerificationToken": t
                      },
                      type: "POST",
                      data: { data: 'foo2' },
             }).done(function(data) {
                     console.log(data);
             }).fail(function(a, v, e) {
                     alert(e);
             });
         });
    })
</script>

InformationsquelleAutor Shyju