Read Write input elements

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>

You can also do this.

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>

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>

You can also do this.

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>

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("Source text")]
        public string value1 { get; set; } = "ASP.NET Razor Pages";

        [BindProperty]
        public string castType { get; set; } = "To lower cases";

        public void OnPost()
        {
            if (castType == "To upper cases")
            {
                value1 = value1.ToUpperInvariant();
            }
            else if (castType == "To lower cases")
            {
                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="To lower cases" class="form-check-input" />
        <label for="castType1" class="form-check-label">To lower cases</label>

        <input type="radio" asp-for="castType" id="castType2" value="To upper cases" class="form-check-input" />
        <label for="castType2" class="form-check-label">To upper cases</label>
    </div>
    <div>
        <input type="submit" value="Convert" class="btn btn-primary" />
    </div>
</form>

The CSS classes...

• mb-3 Set little margin at bottom.→ Spacing
• col-sm-4 Set the width to 4/12 of the row. If window width narrower than 576px then 100% of the row.→ Grid system
• form-control Make the input a Bootstrap look.→ Forms
• form-check-inline form-check-input Make the input a Bootstrap radio button look on a same horizontal row.→ Inline checkboxes
• form-check-inline form-check-label Make the label a Bootstrap radio label look.→ Radio buttons
• btn btn-primary Give the button a Bootstrap look to indicate that it's a key feature.→ Buttons