如何使用 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 页面时的样板代码）

我希望这是有道理的，我可以帮助别人！