如何使用 ASP.NET Core / Razor 通過單擊按鈕運行在 Razor 頁面上編寫的 C#？

Question

我想在頁面上單擊按鈕時執行我直接在剃須刀頁面上編寫的 C# 方法。 我發現如果我有對頁面上按鈕的引用，它會在第一次加載時執行該方法，但在我實際單擊按鈕時不再執行。 這是代碼：

Razor 頁面 C# 參考：

@functions
{
    int productIndex = 0;

    int AddProduct()
    {
        productIndex = productIndex + 1;
        return productIndex;
    }
}

按鈕參考：

 <button type="button" class="btn btn-success" onclick="@AddProduct()" value="New Product" />

我也試過這個參考並得到相同的結果：

<input class="btn btn-success" onclick="@AddProduct()" value="New Product"/>

我的第 2 部分問題是如何阻止它在頁面加載時執行，使其僅在單擊時運行？ 我找到了對Page.IsPostBack)的引用，但這似乎在客戶端無法識別。

Answer 1

這可能有點晚了，但我只是在使用 ASP.NET Core 和 Razor 頁面開發一個網站，這就是我在按鈕后面實現 C# 代碼所做的工作。 我的按鈕執行調用函數OnPostGenerateWebName()的發布操作（按鈕的處理程序名稱是GenerateWebName ），因此按鈕的發布操作將查找並運行名為OnPost<handler name>的函數：

首先，我在網頁上創建了一個按鈕（ BusinessDetails.cshmtl文件）：

 <button type="submit" asp-page-handler="GenerateWebName" class="btn btn-outline-info" id="btnGenerateWebName">Generate Business Web Name</button>

接下來，我在 C# 中創建處理程序OnPostGenerateWebName （在BusinessDetails.cshtml.cs文件中），它調用另一個 C# 函數CreateWebName() ：

  public async Task<IActionResult> OnPostGenerateWebName(string returnUrl = null)
    {
        CreateWebName();

        // all  done
        return Page();
    }


    private void CreateWebName()
    {
        //generate a web name for this business
        if (Business.BusinessName.Length > 0)
        {
            var WebName = Business.BusinessName;
            // remove all special characters, only keep 0-9,a-z,A-Z
            WebName = Regex.Replace(Business.BusinessName, "[^0-9a-zA-Z]+", "");
            // set the new web name
            ModelState.Clear();
            Business.BusinessWebName = WebName;

        }

此函數從業務名稱創建一個 Web 名稱，並通過設置基礎類模型元素Business.BusinessWebName在表單上顯示 Web 名稱。 為了讓它顯示在表單上，​​我必須調用ModelState.Clear() 。

希望這對您將來有所幫助。

Answer 2

似乎此時，客戶端 C#正在開發中（基於評論），並且僅基於您提供的示例，這是一個純 Javascript 解決方案。

HTML

<div>
    <button type="button" onclick="AddProduct()">New Product</button>

    <p id="ShowResult1">

    </p>
</div>

jQuery/Javascript

<script>
    var count = 0;

    function AddProduct() {

        count++;

        $("#ShowResult1").text(count);
    }
</script>

我希望這有幫助。

Answer 3

多年后，但這是我在 2022 年所做的事情：

我正在使用可重用組件，即 _Layout 頁面。

在我看來，這使得該解決方案更具可擴展性。

我所做的是復制_Layout，並將其重命名為_Layout2。

_Layout 和 _Layout2 之間的區別實際上只是“bg-white”與“bg-danger”。

現在剩下的就是綁定按鈕、鏈接、輸入 - 無論你喜歡 - 分別調用 _Layout 和 _Layout2。

我有我的html：

 @*This is on the Index.cshtml*@ @page @model IndexModel @{ ViewData["Title"] = "Home page"; } @*Div container to align my two buttons neatly*@ <div class="container"> <div class="row"> @*An option for styling - this one is the default Layout*@ <div class="col"> <form method="post"> <button type="submit" class="btn btn-primary" name="theme" value="_Layout">Blue!</button> @{Layout = Model.Message;} </form> </div> @*Another option - this one simply makes the navbar red*@ <div class="col"> <form method="post"> <button type="submit" class="btn btn-danger" name="theme" value="_Layout2">Red!</button> @{Layout = Model.Message;} </form> </div> </div> </div>

現在，處理 POST 的 C# 代碼 - 看到我正在使用按鈕：

public class IndexModel : PageModel
{
    private readonly ILogger<IndexModel> _logger;

    public IndexModel(ILogger<IndexModel> logger)
    {
        _logger = logger;
    }
    public string Message { get; set; } = "_Layout";
    public void OnGet()
    {

    }
    public IActionResult OnPost(string theme)
    {
        Message = theme;
        return Page();
    }
}

此代碼將由我在上面提供的 html 調用，並在兩個 _Layout 之間切換 - _Layout 和 _Layout2

（僅添加了一個 OnPost() 方法和一個 Message 屬性，其余為創建新 Razor 頁面時的樣板代碼）

我希望這是有道理的，我可以幫助別人！