ヘッダー
C# サンプル集
 

Visual Basic 中学校 > C# サンプル集 > C# サンプル集目次 > ASP.NET Core > Razor Pages

ボタンクリックで処理を実行する

2023/12/31

この記事は ASP.NET Core Razor Pages を対象にしています。

 

この記事内のサンプルは、プロジェクトテンプレート「ASP.NET Core Web アプリ」を使用して、PagesフォルダーにRazorページを追加する前提です。

 

目次

 

ボタンをクリックするとメッセージを表示する(HTTP POST版)

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:H時m分s秒} ボタンクリック。";
        }
    }
}

 

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>

主なCSSクラスの効果

  • btn btn-primary ボタンをBootstrapの外観にして、主要な機能であることを示します。→ ボタン

 

 

ボタンをクリックするとメッセージを表示する(HTTP GET版)

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:H時m分s秒} ボタンクリック。";
        }
    }
}

 

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>

主なCSSクラスの効果

  • btn btn-primary ボタンをBootstrapの外観にして、主要な機能であることを示します。→ ボタン

 

aタグでもできます。btn btn-primaryを付けることで外見はボタンと同じになります。

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>

主なCSSクラスの効果

  • btn btn-primary ボタンをBootstrapの外観にして、主要な機能であることを示します。→ ボタン

 

 

２つのボタンで異なるメッセージを表示する(HTTP POST版)

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:H時m分s秒} Button1 クリック。";
        }

        public void OnPostButton2()
        {
            Message = $"{DateTime.Now:H時m分s秒} Button2 クリック。";
        }
    }
}

 

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>

主なCSSクラスの効果

  • btn btn-primary ボタンをBootstrapの外観にして、主要な機能であることを示します。→ ボタン
  • btn btn-secondary ボタンをBootstrapの外観にして、副次的な機能であることを示します。→ ボタン

 

 

２つのボタンで異なるメッセージを表示する(HTTP GET版)

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:H時m分s秒} Button1 クリック。";
        }

        public void OnGetButton2()
        {
            Message = $"{DateTime.Now:H時m分s秒} Button2 クリック。";
        }
    }
}

 

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>

主なCSSクラスの効果

  • btn btn-primary ボタンをBootstrapの外観にして、主要な機能であることを示します。→ ボタン
  • btn btn-secondary ボタンをBootstrapの外観にして、副次的な機能であることを示します。→ ボタン

 

aタグでもできます。btn btn-primary等を付けることで外見はボタンと同じになります。

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>

主なCSSクラスの効果

  • btn btn-primary ボタンをBootstrapの外観にして、主要な機能であることを示します。→ ボタン
  • btn btn-secondary ボタンをBootstrapの外観にして、副次的な機能であることを示します。→ ボタン

 

 

＋－×÷を行う４つのボタン(HTTP POST版)

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>

主なCSSクラスの効果

  • mb-3 下に少し余白(margin)を設けます。→ 余白
  • btn btn-primary ボタンをBootstrapの外観にして、主要な機能であることを示します。→ ボタン

 

 

＋－×÷を行う４つのボタン(HTTP GET版)

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>

主なCSSクラスの効果

  • mb-3 下に少し余白(margin)を設けます。→ 余白
  • btn btn-primary ボタンをBootstrapの外観にして、主要な機能であることを示します。→ ボタン

 

English Version