ヘッダー
C# サンプル集
 

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

input要素の値を取得する

2023/12/31

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

 

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

 

目次

 

input要素の値を取得する(HTTP POST版)

ReadTextBoxOnPost.cshtml.cs

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace WorkStandard.Pages
{
    public class ReadTextBoxOnPostModel : PageModel
    {
        [BindProperty]
        public string? value1 { get; set; } = "def";

        [BindProperty]
        public int value2 { get; set; } = 123;

        public void OnPost()
        {
            System.Diagnostics.Debug.WriteLine(value1);
            System.Diagnostics.Debug.WriteLine(value2);
        }
    }
}

→ Debug.WriteLineが表示される場所

 

ReadTextBoxOnPost.cshtml

@page
@model WorkStandard.Pages.ReadTextBoxOnPostModel

<form method="post">
    <input asp-for="value1" />
    <input asp-for="value2" />
    <input type="submit" />
</form>

 

 

input要素の値を取得する(HTTP GET版)

ReadTextBoxOnGet.cshtml.cs

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace WorkStandard.Pages
{
    public class ReadTextBoxOnGetModel : PageModel
    {
        [BindProperty(SupportsGet = true)]
        public string? value1 { get; set; } = "abc";

        [BindProperty(SupportsGet = true)]
        public int value2 { get; set; } = 123;

        public void OnGet()
        {
            System.Diagnostics.Debug.WriteLine(value1);
            System.Diagnostics.Debug.WriteLine(value2);
        }
    }
}

→ Debug.WriteLineが表示される場所

 

ReadTextBoxOnGet.cshtml

@page
@model WorkStandard.Pages.ReadTextBoxOnGetModel

<form>
    <input asp-for="value1" />
    <input asp-for="value2" />
    <input type="submit" />
</form>

 

 

入力された数値の合計を表示する(HTTP POST版)

ASP.NET Core Razor Pages たし算のサンプル

CalcSimpleAddOnPost.cshtml.cs

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace WorkStandard.Pages
{
    public class CalcSimpleAddOnPostModel : PageModel
    {
        [BindProperty]
        public int value1 { get; set; } = 2;

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

        public int result;

        public void OnPostAdd()
        {
            result = value1 + value2;
        }
    }
}

 

CalcSimpleAddOnPost.cshtml

@page
@model WorkStandard.Pages.CalcSimpleAddOnPostModel

<form method="post">
    <div class="mb-3">
        <input asp-for="value1" /> + <input asp-for="value2" /> =
    </div>
    <div class="mb-3">
        <input value="計算" type="submit" asp-page-handler="Add" class="btn btn-primary" />
    </div>
    <div>
        答えは @Model.result です。
    </div>
</form>

主なCSSクラスの効果

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

 

 

入力された数値の合計を表示する(HTTP GET版)

ASP.NET Core Razor Pages たし算のサンプル

CalcSimpleAddOnGet.cshtml.cs

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace WorkStandard.Pages
{
    public class CalcSimpleAddOnGetModel : PageModel
    {
        [BindProperty(SupportsGet = true)]
        public int value1 { get; set; } = 2;

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

        public int result;

        public void OnGetAdd()
        {
            result = value1 + value2;
        }
    }
}

 

CalcSimpleAddOnGet.cshtml

@page
@model WorkStandard.Pages.CalcSimpleAddOnGetModel

<form>
    <div class="mb-3">
        <input asp-for="value1" /> + <input asp-for="value2" /> =
    </div>
    <div class="mb-3">
        <input value="計算" type="submit" class="btn btn-primary" />
        <input type="hidden" name="handler" value="Add" />
    </div>
    <div>
        答えは @Model.result です。
    </div>
</form>

メモ：OnGetAdd を呼び出すために、hiddenを使って handler に Add を送信するようにしています。

主なCSSクラスの効果

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

 

 

たくさんのinput要素の値を取得する(HTTP POST版)

ReadManyItemsOnPost.cshtml.cs

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace WorkStandard.Pages
{
    public class ReadManyItemsOnPostModel : PageModel
    {
        [BindProperty]
        public FormItems items { get; set; } = new FormItems();

        public void OnPost()
        {
            System.Diagnostics.Debug.WriteLine(items.strValue1);
            System.Diagnostics.Debug.WriteLine(items.strValue2);
            System.Diagnostics.Debug.WriteLine(items.intValue);
            System.Diagnostics.Debug.WriteLine(items.dateValue);
        }

        public class FormItems
        {
            public string? strValue1 { get; set; } = "abc";
            public string? strValue2 { get; set; } = "def";
            public int intValue { get; set; } = 123;
            public DateTime dateValue { get; set; } = new DateTime(2023, 11, 9, 7, 12, 23);
        }
    }
}

→ Debug.WriteLineが表示される場所

 

ReadTextBoxOnPost.cshtml

@page
@model WorkStandard.Pages.ReadManyItemsOnPostModel

<form method="post">
    <div>
        <input asp-for="items.strValue1" />
    </div>
    <div>
        <input asp-for="items.strValue2" />
    </div>
    <div>
        <input asp-for="items.intValue" />
    </div>
    <div>
        <input asp-for="items.dateValue" />
    </div>
    <div>
        <input type="submit" />
    </div>
</form>

 

 

たくさんのinput要素の値を取得する(HTTP GET版)

ReadManyItemsOnGet.cshtml.cs

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace WorkStandard.Pages
{
    public class ReadManyItemsOnGetModel : PageModel
    {
        [BindProperty(SupportsGet = true)]
        public FormItems items { get; set; } = new FormItems();

        public void OnGet()
        {
            System.Diagnostics.Debug.WriteLine(items.strValue1);
            System.Diagnostics.Debug.WriteLine(items.strValue2);
            System.Diagnostics.Debug.WriteLine(items.intValue);
            System.Diagnostics.Debug.WriteLine(items.dateValue);
        }

        public class FormItems
        {
            public string? strValue1 { get; set; } = "abc";
            public string? strValue2 { get; set; } = "def";
            public int intValue { get; set; } = 123;
            public DateTime dateValue { get; set; } = new DateTime(2023, 11, 9, 7, 12, 23);
        }
    }
}

→ Debug.WriteLineが表示される場所

 

ReadTextBoxOnPost.cshtml

@page
@model WorkStandard.Pages.ReadManyItemsOnGetModel

<form>
    <div>
        <input asp-for="items.strValue1" />
    </div>
    <div>
        <input asp-for="items.strValue2" />
    </div>
    <div>
        <input asp-for="items.intValue" />
    </div>
    <div>
        <input asp-for="items.dateValue" />
    </div>
    <div>
        <input type="submit" />
    </div>
</form>

 

 

input要素の値を引数として取得する(HTTP POST版)

ReadWithParamOnPost.cshtml.cs

using Microsoft.AspNetCore.Mvc.RazorPages;

namespace WorkStandard.Pages.simpleio
{
    public class ReadWithParamOnPostModel : PageModel
    {
        public void OnPost(string value1, int value2)
        {
            System.Diagnostics.Debug.WriteLine(value1);
            System.Diagnostics.Debug.WriteLine(value2);
        }
    }
}

→ Debug.WriteLineが表示される場所

メモ：2つ目のinputに数値以外を入力するとvalue2は0になります。

 

ReadWithParamOnPost.cshtml

@page
@model WorkStandard.Pages.simpleio.ReadWithParamOnPostModel

<form method="post">
    <input type="text" name="value1" />
    <input type="text" name="value2" />
    <input type="submit" />
</form>

 

これでもできます。

ReadWithIFormCollectionParamOnPost.cshtml.cs

using Microsoft.AspNetCore.Mvc.RazorPages;

namespace WorkStandard.Pages.simpleio
{
    public class ReadWithIFormCollectionParamOnPostModel : PageModel
    {
        public void OnPost(IFormCollection data)
        {
            string value1 = data["value1"]!;

            //value2 は数値に変換できない場合 0 にします。
            int value2 = 0;
            int.TryParse(data["value2"], out value2);

            System.Diagnostics.Debug.WriteLine(value1);
            System.Diagnostics.Debug.WriteLine(value2);
        }
    }
}

→ Debug.WriteLineが表示される場所

メモ：IFormCollection型の値は引数として受け取る以外に、HttpContext.Request.ReadFormAsyncメソッドの戻り値として受け取ることもできます。

 

ReadWithIFormCollectionParamOnPost.cshtml

@page
@model WorkStandard.Pages.simpleio.ReadWithIFormCollectionParamOnPostModel

<form method="post">
    <input type="text" name="value1" />
    <input type="text" name="value2" />
    <input type="submit" />
</form>

 

これでもできます。

ReadWithDictionaryParamOnPostModel.cshtml.cs

using Microsoft.AspNetCore.Mvc.RazorPages;

namespace WorkStandard.Pages.simpleio
{
    public class ReadWithDictionaryParamOnPostModel : PageModel
    {
        public void OnPost(Dictionary<string, string> data)
        {
            string value1 = data["value1"];

            //value2 は数値に変換できない場合 0 にします。
            int value2 = 0;
            int.TryParse(data["value2"], out value2);

            System.Diagnostics.Debug.WriteLine(value1);
            System.Diagnostics.Debug.WriteLine(value2);
        }
    }
}

→ Debug.WriteLineが表示される場所

 

ReadWithDictionaryParamOnPostModel.cshtml

@page
@model WorkStandard.Pages.simpleio.ReadWithDictionaryParamOnPostModel

<form method="post">
    <input type="text" name="value1" />
    <input type="text" name="value2" />
    <input type="submit" />
</form>

 

 

input要素の値を引数として取得する(HTTP GET版)

ReadWithParamOnGet.cshtml.cs

using Microsoft.AspNetCore.Mvc.RazorPages;

namespace WorkStandard.Pages.simpleio
{
    public class ReadWithParamOnGetModel : PageModel
    {
        public void OnGet(string value1, int value2)
        {
            System.Diagnostics.Debug.WriteLine(value1);
            System.Diagnostics.Debug.WriteLine(value2);
        }
    }
}

→ Debug.WriteLineが表示される場所

メモ：2つ目のinputに数値以外を入力するとvalue2は0になります。

 

ReadWithParamOnGet.cshtml

@page
@model WorkStandard.Pages.simpleio.ReadWithParamOnGetModel

<form>
    <input type="text" name="value1" />
    <input type="text" name="value2" />
    <input type="submit" />
</form>

 

これでもできます。

ReadWithDictionaryParamOnGetModel.cshtml.cs

using Microsoft.AspNetCore.Mvc.RazorPages;

namespace WorkStandard.Pages.simpleio
{
    public class ReadWithDictionaryParamOnGetModel : PageModel
    {
        public void OnGetTest(Dictionary<string, string> data)
        {
            string value1 = data["value1"];

            //value2 は数値に変換できない場合 0 にします。
            int value2 = 0;
            int.TryParse(data["value2"], out value2);

            System.Diagnostics.Debug.WriteLine(value1);
            System.Diagnostics.Debug.WriteLine(value2);
        }
    }
}

→ Debug.WriteLineが表示される場所

メモ：初回に実行されないようにOnGet ではなく、OnGetTest にしました。OnGetだと初回実行されたときに何も値が入っていないので、data["value1"]でエラーになります。

 

ReadWithDictionaryParamOnGetModel.cshtml

@page
@model WorkStandard.Pages.simpleio.ReadWithDictionaryParamOnGetModel

<form>
    <input type="text" name="value1" />
    <input type="text" name="value2" />
    <input type="submit" />
    <input type="hidden" name="handler" value="Test" />
</form>

メモ：OnGetTest の方を呼び出すために、hiddenを使って handler に Test を送信するようにしています。

 

English Version