ヘッダー
C# サンプル集
 

input要素に値を設定する

2023/12/31

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

 

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

 

 

 

テキストボックスに"Hello!" + 現在日時 を表示する(HTTP POST版)

WriteToTextBoxOnPost.cshtml.cs

using Microsoft.AspNetCore.Mvc.RazorPages;

namespace WorkStandard.Pages
{
    public class WriteToTextBoxOnPostModel : PageModel
    {
        public string? value1 { get; set; } 

        public void OnPost()
        {
            value1 = $"Hello! {DateTime.Now:HH\\:mm\\:ss.fff}";
        }
    }
}

 

WriteToTextBoxOnPost.cshtml

@page
@model WorkStandard.Pages.WriteToTextBoxOnPostModel

<form method="post">
    <input value="@Model.value1" />
    <input value="更新" type="submit" />
</form>

 

これでもできます。

WriteToBindingTextBoxOnPost.cshtml.cs

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

namespace WorkStandard.Pages.inputoutput
{
    public class WriteToBindingTextBoxOnPostModel : PageModel
    {
        [BindProperty]
        public string? value1 { get; set; }

        public void OnPost()
        {
            ModelState.Remove(nameof(value1));
            value1 = $"Hello! {DateTime.Now:HH\\:mm\\:ss.fff}";
        }
    }
}

メモ:実のところ、この例ほどシンプルであれば BindProperty や ModelState.Remove は不要です。しかし、BindProperty が必要な場合の方が多数派だと思うので、これがあっても動作することを示すためにあえて付けています。

 

WriteToBindingTextBoxOnPost.cshtml

@page
@model WorkStandard.Pages.inputoutput.WriteToBindingTextBoxOnPostModel

<form method="post">
    <input asp-for="value1" />
    <input value="更新" type="submit" />
</form>

 

 

テキストボックスに"Hello!" + 現在日時 を表示する(HTTP GET版)

WriteToTextBoxOnGet.cshtml.cs

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

namespace WorkStandard.Pages
{
    public class WriteToTextBoxOnGetModel : PageModel
    {
        public string? value1 { get; set; } 

        public void OnGet()
        {
            value1 = $"Hello! {DateTime.Now:HH\\:mm\\:ss.fff}";
        }
    }
}

 

WriteToTextBoxOnGet.cshtml

@page
@model WorkStandard.Pages.WriteToTextBoxOnGetModel

<form>
    <input value="@Model.value1" />
    <input value="更新" type="submit" />
</form>

 

これでもできます。

WriteToBindingTextBoxOnGet.cshtml.cs

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

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

        public void OnGet()
        {
            ModelState.Remove(nameof(value1));
            value1 = $"Hello! {DateTime.Now:HH\\:mm\\:ss.fff}";
        }
    }
}

メモ:実のところ、この例ほどシンプルであれば BindProperty や ModelState.Remove は不要です。しかし、BindProperty が必要な場合の方が多数派だと思うので、これがあっても動作することを示すためにあえて付けています。

 

WriteToTextBoxOnGet.cshtml

@page
@model WorkStandard.Pages.inputoutput.WriteToBindingTextBoxOnGetModel

<form>
    <input asp-for="value1" />
    <input value="更新" type="submit" />
</form>

 

 

参考:input への初期値の設定

BindProperty属性などでバインドされているinput要素は、セッション開始時と2回目以降のアクセスとで値の設定方法が異なります。

セッション開始時: input要素に値を設定するには、asp-forで指定しているプロパティに値を設定します。(「2回目以降のアクセス」で説明している方法でも値を設定できます。)

2回目以降のアクセス: input要素に値を設定するには、inputタグの value要素に変数を指定するか(その例)、または、ModelStateからその項目の状態を削除したうえで、改めてasp-forで指定しているプロパティに値を設定します(その例)。

 

この違いにより、2回目以降のアクセスでは、サーバー側のC#のプログラムでプロパティに明示的に値を設定しなくても、input要素にセッション開始時に設定した値やユーザーが入力した値が維持されます。

 

この動作を理解しやすいように簡単なサンプルを紹介します。

このサンプルでは、リクエストするたびに value1 にランダムな数値を設定しますが、画面上のテキストボックスには最初の1回ランダムな数値が表示されるだけで、その後はいくら送信ボタンをクリックしても値が変わりません。OnGetのプログラムが実行されていることはDebug.WriteLineを見ればわかります。

InitTextBox.cshtml.cs

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

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

        public void OnGet()
        {
            System.Diagnostics.Debug.WriteLine($"OnGet開始時 value1 = {value1}");

            //0~9999の範囲でランダムな数値を設定します。
            value1 = Random.Shared.Next(0, 10000).ToString();

            System.Diagnostics.Debug.WriteLine($"OnGet終了時 value1 = {value1}");
        } 
    }
}

Debug.WriteLineが表示される場所

 

InitTextBox.cshtml

@page
@model WorkStandard.Pages.inputoutput.InitTextBoxModel

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

 


English Version