ヘッダー
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時)

ReadWriteTextBoxOnPost.cshtml.cs

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

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

        public void OnPost()
        {
            value1 = value1 + "★";
        }
    }
}

 

ReadWriteTextBoxOnPost.cshtml

@page
@model WorkStandard.Pages.ReadWriteTextBoxOnPostModel

<form method="post">
    <input asp-for="value1" value="@Model.value1" />
    <input type="submit" />
</form>

 

これでもできます。

ReadWriteTextBoxOnPost.cshtml.cs

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

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

        public void OnPost()
        {
            ModelState.Remove(nameof(value1));
            value1 = value1 + "★";
        }
    }
}

 

ReadWriteTextBoxOnPost.cshtml

@page
@model WorkStandard.Pages.ReadWriteBindingTextBoxOnPostModel

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

 

 

input要素の値に★を追加する(HTTP GET時)

ReadWriteTextBoxOnGet.cshtml.cs

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

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

        public void OnGet()
        {
            value1 = value1 + "★";
        }
    }
}

 

ReadWriteTextBoxOnGet.cshtml

@page
@model WorkStandard.Pages.ReadWriteTextBoxOnGetModel

<form>
    <input asp-for="value1" value="@Model.value1" />
    <input type="submit" />
</form>

 

これでもできます。

ReadWriteBindingTextBoxOnGet.cshtml.cs

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

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

        public void OnGet()
        {
            ModelState.Remove(nameof(value1));
            value1 = value1 + "★";
        }
    }
}

 

ReadWriteBindingTextBoxOnGet.cshtml

@page
@model WorkStandard.Pages.ReadWriteBindingTextBoxOnGetModel

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

 

 

input要素の大文字・小文字を変換する

ASP.NET Core Razor Pages テキストボックスの読み書き

ConvertCaseOnPost.cshtml.cs

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

namespace WorkStandard.Pages.inputoutput
{
    public class ConvertCaseOnPostModel : PageModel
    {
        [BindProperty]
        [DisplayName("変換対象の文字列")]
        public string value1 { get; set; } = "ASP.NET Razor Pages";

        [BindProperty]
        public string castType { get; set; } = "大文字→小文字";

        public void OnPost()
        {
            if (castType == "小文字→大文字")
            {
                value1 = value1.ToUpperInvariant();
            }
            else if (castType == "大文字→小文字")
            {
                value1 = value1.ToLowerInvariant();
            }
        }
    }
}

 

ConvertCaseOnPost.cshtml

@page
@model WorkStandard.Pages.inputoutput.ConvertCaseOnPostModel

<form method="post">
    <div class="mb-3 col-sm-4">
        <label asp-for="value1"></label>
        <input asp-for="value1" value="@Model.value1" class="form-control" />
    </div>
    <div class="mb-3 form-check-inline">
        <input type="radio" asp-for="castType" id="castType1" value="大文字→小文字" class="form-check-input" />
        <label for="castType1" class="form-check-label">大文字→小文字</label>

        <input type="radio" asp-for="castType" id="castType2" value="小文字→大文字" class="form-check-input" />
        <label for="castType2" class="form-check-label">小文字→大文字</label>
    </div>
    <div>
        <input type="submit" value="変換" class="btn btn-primary" />
    </div>
</form>

主なCSSクラスの効果

  • mb-3 下に少し余白(margin)を設けます。→ 余白
  • col-sm-4 幅を行の4/12にします。ウィンドウ幅が576px(sm)より小さい場合は100%にします。→ グリッドシステム
  • form-control inputをBootstrapの外観にします。→ フォーム
  • form-check-inline form-check-input inputをBootstrapの横並びラジオボタンの外観にします。→ 横並びチェックボックス
  • form-check-inline form-check-label labelをBootstrapのラジオボタンの外観にします。→ ラジオボタン
  • btn btn-primary ボタンをBootstrapの外観にして、主要な機能であることを示します。→ ボタン

 

English Version