ヘッダー
C# Sample Programs
 

Site Top > C# Sample Programs > C# Sample Programs > ASP.NET Core > Razor Pages

Handle button click

01/01/2024

This article deals with ASP.NET Core Razor Pages.

 

All sample programs in this article are based on the Visual Studio Project template "ASP.NET Core Web App" and you must add the Razor pages in th Pages folder.

 

TOC

 

Show a message when a button is clicked (HTTP POST version)

ButtonClickOnPost.cshtml.cs

using Microsoft.AspNetCore.Mvc.RazorPages;

namespace WorkStandard.Pages.button
{
    public class ButtonClickOnPostModel : PageModel
    {
        public string Message = "";

        public void OnPost()
        {
            Message = $"{DateTime.Now:HH\\:mm\\:ss.fff} button click";
        }
    }
}

 

ButtonClickOnPost.cshtml

@page
@model WorkStandard.Pages.button.ButtonClickOnPostModel

<form method="post">
    <div>
        @Model.Message
    </div>
    <div>
        <input type="submit" class="btn btn-primary" />
    </div>
</form>

The CSS classes...

  • btn btn-primary Give the button a Bootstrap look to indicate that it's a key feature.→ Buttons

 

 

Show a message when a button is clicked (HTTP GET version)

ButtonClickOnGet.cshtml.cs

using Microsoft.AspNetCore.Mvc.RazorPages;

namespace WorkStandard.Pages.button
{
    public class ButtonClickOnGetModel : PageModel
    {
        public string Message = "";

        public void OnGetButton1()
        {
            Message = $"{DateTime.Now:HH\\:mm\\:ss.fff} button click";
        }
    }
}

 

ButtonClickOnGet.cshtml

@page "{handler?}"
@model WorkStandard.Pages.button.ButtonClickOnGetModel

<form>
    <div>
        @Model.Message
    </div>
    <div>
        <input type="submit" asp-page-handler="Button1" class="btn btn-primary" />
    </div>
</form>

The CSS classes...

  • btn btn-primary Give the button a Bootstrap look to indicate that it's a key feature.→ Buttons

 

You can also use anchor tag. Using btn btn-primary with the tag makes it same appearance of a button.

ButtonClickOnGet.cshtml

@page
@model WorkStandard.Pages.button.ButtonClickOnGetModel

<div>
    @Model.Message
</div>
<div>
    <a asp-route-handler="Button1" class="btn btn-primary">Button1</a>
</div>

The CSS classes...

  • btn btn-primary Give the button a Bootstrap look to indicate that it's a key feature.→ Buttons

 

 

Two buttons which shows different messages (HTTP POST version)

TwoButtonClickOnPost.cshtml.cs

using Microsoft.AspNetCore.Mvc.RazorPages;

namespace WorkStandard.Pages.button
{
    public class TwoButtonClickOnPostModel : PageModel
    {
        public string Message = "";

        public void OnPostButton1()
        {
            Message = $"{DateTime.Now:HH\\:mm\\:ss.fff} Button1 click";
        }

        public void OnPostButton2()
        {
            Message = $"{DateTime.Now:HH\\:mm\\:ss.fff} Button2 click";
        }
    }
}

 

TwoButtonClickOnPost.cshtml

@page
@model WorkStandard.Pages.button.TwoButtonClickOnPostModel

<form method="post">
    <div>
        @Model.Message
    </div>
    <div>
        <input type="submit" value="Button1" asp-page-handler="Button1" class="btn btn-primary" />
        <input type="submit" value="Button2" asp-page-handler="Button2" class="btn btn-secondary" />
    </div>
</form>

The CSS classes...

  • btn btn-primary Give the button a Bootstrap look to indicate that it's a key feature.→ Buttons
  • btn btn-secondary Give the button a Bootstrap look to indicate that it's a secondary feature.→ Buttons

 

 

Two buttons which shows different messages (HTTP GET version)

TwoButtonClickOnGet.cshtml.cs

using Microsoft.AspNetCore.Mvc.RazorPages;

namespace WorkStandard.Pages.button
{
    public class TwoButtonClickOnGetModel : PageModel
    {
        public string Message = "";

        public void OnGetButton1()
        {
            Message = $"{DateTime.Now:HH\\:mm\\:ss.fff} Button1 click";
        }

        public void OnGetButton2()
        {
            Message = $"{DateTime.Now:HH\\:mm\\:ss.fff} Button2 click";
        }
    }
}

 

TwoButtonClickOnGet.cshtml

@page "{handler?}"
@model WorkStandard.Pages.button.TwoButtonClickOnGetModel

<form>
    <div>
        @Model.Message
    </div>
    <div>
        <input type="submit" value="Button1" asp-page-handler="Button1" class="btn btn-primary" />
        <input type="submit" value="Button2" asp-page-handler="Button2" class="btn btn-secondary" />
    </div>
</form>

The CSS classes...

  • btn btn-primary Give the button a Bootstrap look to indicate that it's a key feature.→ Buttons
  • btn btn-secondary Give the button a Bootstrap look to indicate that it's a secondary feature.→ Buttons

 

You can also use anchor tag. Using btn btn-primary with the tag makes it same appearance of a button.

TwoButtonClickOnGet.cshtml

@page
@model WorkStandard.Pages.button.TwoButtonClickOnGetModel

<div>
    @Model.Message
</div>
<div>
    <a asp-route-handler="Button1" class="btn btn-primary">Button1</a>
    <a asp-route-handler="Button2" class="btn btn-secondary">Button2</a>
</div>

The CSS classes...

  • btn btn-primary Give the button a Bootstrap look to indicate that it's a key feature.→ Buttons
  • btn btn-secondary Give the button a Bootstrap look to indicate that it's a secondary feature.→ Buttons

 

 

Four buttons which calculates ＋－×÷ (HTTP POST version)

ASP.NET Core Razor Pages ４つのボタンのサンプル

 

CalcButtonsOnPost.cshtml.cs

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using System.ComponentModel.DataAnnotations;

namespace WorkStandard.Pages.button
{
    public class CalcButtonsOnPostModel : PageModel
    {
        [BindProperty]
        public int Value1 { get; set; } = 4;

        [BindProperty]
        public int Value2 { get; set; } = 3;

        public decimal Answer { get; set; }

        public void OnPostAdd()
        {
            Answer = Value1 + Value2;
        }

        public void OnPostSubtract()
        {
            Answer = Value1 - Value2;
        }

        public void OnPostMultiply()
        {
            Answer = Value1 * Value2;
        }

        public void OnPostDivide()
        {
            Answer = (decimal)Value1 / Value2;
        }
    }
}

 

CalcButtonsOnPost.cshtml

@page
@model WorkStandard.Pages.button.CalcButtonsOnPostModel

<form method="post">
    <div class="mb-3">
        <input asp-for="Value1" />
        <input asp-for="Value2" />
    </div>
    <div>
        @Model.Answer
    </div>
    <div>
        <input type="submit" value="＋" asp-page-handler="Add" class="btn btn-primary" />
        <input type="submit" value="ー" asp-page-handler="Subtract" class="btn btn-primary" />
        <input type="submit" value="×" asp-page-handler="Multiply" class="btn btn-primary" />
        <input type="submit" value="÷" asp-page-handler="Divide" class="btn btn-primary" />
    </div>
</form>

The CSS classes...

  • mb-3 Set little margin at bottom.→ Spacing
  • btn btn-primary Give the button a Bootstrap look to indicate that it's a key feature.→ Buttons

 

 

Four buttons which calculates ＋－×÷ (HTTP GET version)

ASP.NET Core Razor Pages ４つのボタンのサンプル

 

CalcButtonsOnGet.cshtml.cs

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using System.ComponentModel.DataAnnotations;

namespace WorkStandard.Pages.button
{
    public class CalcButtonsOnGetModel : PageModel
    {
        [BindProperty(SupportsGet = true)]
        public int Value1 { get; set; } = 4;

        [BindProperty(SupportsGet = true)]
        public int Value2 { get; set; } = 3;

        public decimal Answer { get; set; }

        public void OnGetAdd()
        {
            Answer = Value1 + Value2;
        }

        public void OnGetSubtract()
        {
            Answer = Value1 - Value2;
        }

        public void OnGetMultiply()
        {
            Answer = Value1 * Value2;
        }

        public void OnGetDivide()
        {
            Answer = (decimal)Value1 / Value2;
        }
    }
}

 

CalcButtonsOnGet.cshtml

@page "{handler?}"
@model WorkStandard.Pages.button.CalcButtonsOnGetModel

<form>
    <div class="mb-3">
        <input asp-for="Value1" />
        <input asp-for="Value2" />
    </div>
    <div>
        @Model.Answer
    </div>
    <div>
        <input type="submit" value="＋" asp-page-handler="Add" class="btn btn-primary" />
        <input type="submit" value="ー" asp-page-handler="Subtract" class="btn btn-primary" />
        <input type="submit" value="×" asp-page-handler="Multiply" class="btn btn-primary" />
        <input type="submit" value="÷" asp-page-handler="Divide" class="btn btn-primary" />
    </div>
</form>

The CSS classes...

  • mb-3 Set little margin at bottom.→ Spacing
  • btn btn-primary Give the button a Bootstrap look to indicate that it's a key feature.→ Buttons

 

日本語版