ASP.NET Core 2，在沒有 MVC 的情況下使用 Razor 頁面單擊按鈕

Question

正如有人在評論中指出的那樣，Razor 頁面不需要控制器，就像您在 MVC 中習慣做的那樣。 我現在 Razor 也沒有對按鈕單擊事件的本機處理。 要在用戶單擊按鈕時執行某些操作（在“代碼隱藏”中），我們至少有兩個選項：

• 使用提交按鈕
• 使用 ajax 調用

我找到了很多 MVC 示例，它們展示了如何定義控制器功能。 但正如所說，我沒有。

因此，我試圖理解兩種方式。 這是我的測試 cshtml：

<form method="post">
    <input type="submit" class="btn btn-primary" value="way1">Way 1/>
</form>

<button id="btn" type="button" class="btn btn-primary" value="way2">Way 2</button>

<script>
$(document).ready(function() {
    $("#btn").click(function (e) {
        e.preventDefault();
        $.ajax({
            url: "@Url.Action("Way2")",
            type: "POST",
            data: "foo",
            datatype: "text",
            success: function (data) {
                alert(data);
            }
        });
        return false;
    });
});
</script>

這里是 cshtml.cs：

公共類 TestModel : PageModel { private readonly MyContext _context;

public TestModel(MyContext context)
{
    _context = context;
}

public IActionResult OnPost()
{
    // here I can put something to execute 
    // when the submit button is clicked
}

public ActionResult Way2(string data)
{
    // this is never triggered
}

問題

1. 使用“Way1”（提交），我可以捕捉到一個按鈕的點擊，但有一些缺點。 默認情況下，頁面會因帖子而重新加載。 有時我不需要改變任何東西，只是調用一個 C# 函數。 但我不明白如何處理多個按鈕。 即如果我有 5 個按鈕，如何為每個按鈕做不同的事情？

2. 使用“Way2”時，我做錯了，因為從未到達 cs 代碼中的函數，並且我收到錯誤請求錯誤 (400)。 我錯過了什么？

Answer 1

范式提交

在做普通表單提交時，按照慣例，處理程序方法名稱需要遵循On{{HttpVerb}}{{YourHanderName}}格式

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

現在確保您的提交按鈕位於form標簽內，並且您提到了asp-page-handler 。 該屬性的值應該是頁面模型類（ Way2 ）中的處理程序名稱

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

上面的代碼將生成帶有formaction屬性的按鈕標記，該屬性設置為 url yourBaseUrl/YourPageName?data=foo&handler=Way2 。 當用戶點擊提交按鈕時，它會將表單發布到這個 url，因為 formaction 屬性值將覆蓋表單的默認操作 url。 當收到請求時，razor 頁面框架將使用此參數（ handler ）並將請求定向到相應的處理程序方法。

Ajax 調用

您收到 400（錯誤請求）響應，因為框架需要RequestVerificationToken作為已發布請求數據的一部分。 如果您檢查頁面的視圖源，您可以在表單內看到一個名為__RequestVerificationToken的隱藏輸入元素。 該框架使用它來防止可能的 CSRF 攻擊。 如果您的請求沒有此信息，框架將返回 400 bad request。

為了使您的 ajax 代碼正常工作，您所要做的就是明確地發送它。 這是一個工作示例

$("#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);
    });
});

現在，由於您正在進行 ajax 調用，因此返回 json 響應是有意義的

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

在上面的例子中，我們使用一些 jQuery 代碼來獲取名為__RequestVerificationToken的輸入元素並讀取它的值。 更健壯的方法是將IAntiforgery實現注入視圖並使用GetAndStoreTokens方法。

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

Answer 2

除了顯示的處理點擊的 jQuery 代碼之外，您還必須在 asp-page-handler 中包含函數的名稱，以便路由到正確的函數。 如果您沒有 asp-page-handler，請求將在默認的 OnPost() 函數中結束。 您希望它轉到 OnPostWay2 函數。

代碼：

<button id="btn" type="button" class="btn btn-primary" value="way2" asp-page-handler="Way2">Way 2</button>

Answer 3

如果您想執行任何處理程序並且只想導航到另一個頁面，這是另一種簡單的方法：

<button type="button" class="btn" onclick="window.location.href = '/YourPage'">Button Title</button>