如何使用 ASP.NET Core / Razor 通过单击按钮运行在 Razor 页面上编写的 C#？

Question

I would like to execute a C# method that I wrote directly on the razor page when a button is clicked on the page. What I'm finding is if I have the reference to the button on the page, it executes the method on first load but never again when I actually click the button. Here's the code:

Razor Page C# Reference:

@functions
{
    int productIndex = 0;

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

Button Reference:

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

I've also tried this reference and got the same result:

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

Part 2 question that I have is how do you stop it from executing on page load so it only runs onclick? I've found references to Page.IsPostBack) but this isn't recognized on the client side, it seems.

Answer 1

This may be a little late but I am just developing a website using ASP.NET Core and Razor pages and this is what I have done to implement C# code behind a button. My button performs a post operation calling the function OnPostGenerateWebName() (the handler name for the button is GenerateWebName ) so the button's post operation will look for and run the function named OnPost<handler name> :

First I created a button on the web page ( BusinessDetails.cshmtl file):

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

Next I create the handler OnPostGenerateWebName in C# (in the BusinessDetails.cshtml.cs file) which calls another C# function 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;

        }

This function creates a webname from the business name and displays the web name on the form by setting the underlying class model element Business.BusinessWebName . In order for this to display on the form I had to call ModelState.Clear() .

Hope this helps you in the future.

Answer 2

It seems as though at this point in time, client-side C# is in development (based off of the comments), and based solely off of the example you provided this is a pure Javascript solution.

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>

I hope this helps.

Answer 3

Years later, but here is what I am doing in 2022:

I am using re-usable component which is the _Layout page.

This makes the solution slightly more scalable, in my opinion.

What I have done is make a copy of _Layout, and renamed it _Layout2.

Difference between _Layout and _Layout2 is literally just "bg-white" vs "bg-danger".

Now what is left is to bind buttons, links, inputs - however you like - to call _Layout, and _Layout2 respectively.

I have my 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>

Now, C# code to handle a POST - seeing as I am using buttons:

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

This code will be called by the html I provided above and toggle between the two _Layout's - _Layout and _Layout2

(Only added an OnPost() method, and a Message property, the rest is boiler plate code when creating a fresh Razor Page)

I hope this makes sense and that I could help someone!