.NET Core Razor Pages中ajax get和post的使用

ASP.NET Core Razor Pages Web項目大部分情況下使用繼承與PageModel中的方法直接調用就可以（asp-page），但是有些時候需要使用ajax調用，更方便些。那么如何使用ajax調用呢？？

1.Razor Pages普通頁面的跳轉

<a asp-page="About">About</a>

<form asp-page="./Index" method="get">
    <div class="form-actions no-color">
        <p>
            Find By Name:
            <input type="text" name="searchString" value="@Model.CurrentFilter" />
            <input type="submit" value="Search" class="btn btn-primary" />|
            <a asp-page="./Index">Back to full list</a>
        </p>
    </div>
</form>

form默認為post提交，asp-page跳轉的頁面，首先獲取的是get方法，如：OnGetAsync或者OnGet，同時存在運行會報錯

2. 針對一個頁面的多個按鈕處理

<form method="POST">
    <div>Name: <input asp-for="Customer.Name" /></div>
    <input type="submit" asp-page-handler="JoinList" value="Join" />
    <input type="submit" asp-page-handler="JoinListUC" value="JOIN UC" />
</form>

指向當前頁面的JoinList方法和JoinListUC方法，增加了handle，將跳轉到OnPost[handler]Async方法。

3. Razor Pages中ajax的Get使用

$.get("?handler=Filter", { id: $(this).attr("data-id") },
    function (result) {
        console.log(result);
});

$.ajax({
    type: 'GET',
    contentType: "application/json",
    dataType: "json",
    url: "?handler=Filter",
    success: function (result) {
        alert(result);
    }
});

跳轉到OnGetFilterAsync方法，url寫的需要注意(handler=)就可以了

4. Razor Pages中ajax的Post使用

Razor Pages 由防偽造驗證保護,FormTagHelper 將防偽造令牌注入 HTML 窗體元素，防止跨站點請求偽造 (XSRF/CSRF)。
XSS：跨站腳本（Cross-site scripting，通常簡稱為XSS）是一種網站應用程序的安全漏洞攻擊，是代碼注入的一種。它允許惡意用戶將代碼注入到網頁上，其他用戶在觀看網頁時就會受到影響。這類攻擊通常包含了HTML以及用戶端腳本語言。
CSRF:跨站請求偽造（英語：Cross-site request forgery），也被稱為 one-click attack 或者 session riding，通常縮寫為 CSRF 或者 XSRF， 是一種挾制用戶在當前已登錄的Web應用程序上執行非本意的操作的攻擊方法。
由於以上的問題，直接ajax post請求會出錯，錯誤這里就不貼圖了。

解決辦法1：推薦

1. ***.cshmtl你的頁面增加

@Html.AntiForgeryToken()

2. ajax post請求

$.ajax({
    url: '?handler=Filter2', type: 'POST', contentType: 'application/x-www-form-urlencoded',  data: {"__RequestVerificationToken":$('input:hidden[name="__RequestVerificationToken"]').val()}, success: function (result) { alert(result); } });

 

解決辦法2：

1. Startup.cs中的ConfigureServices方法增加

services.AddAntiforgery(o => o.HeaderName = "XSRF-TOKEN");

2. ***.cshmtl你的頁面增加

@Html.AntiForgeryToken()

3. ajax post請求

$.ajax({
    url: '?handler=Filter2',
    type: 'POST',
    contentType: 'application/json; charset=utf-8',
    headers: { "XSRF-TOKEN":$('input:hidden[name="__RequestVerificationToken"]').val() },
    success: function (result) {
        alert(result);
    }
});

解決方法3：不推薦

1. Startup.cs中的ConfigureServices方法增加

services.AddRazorPages().AddRazorPagesOptions(o=> { o.Conventions.ConfigureFilter(new IgnoreAntiforgeryTokenAttribute()); });

2. ajax post請求

$.ajax({
    url: '?handler=Filter2',
    type: 'POST',
    contentType: 'application/json; charset=utf-8',
    success: function (result) {
        alert(result);
    }
});