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ページを追加する前提です。
目次
テキストボックスに"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}");
}
}
}
InitTextBox.cshtml
@page
@model WorkStandard.Pages.inputoutput.InitTextBoxModel
<form>
<input asp-for="value1" />
<input type="submit" />
</form>