ヘッダー
C# Sample Programs
 

Set value to input elements

01/01/2024

This article deals with ASP.NET Core Razor Pages.

 

All sample programs in this article are based on the Visual Studio Project template "ASP.NET Core Web App" and you must add the Razor pages in th Pages folder.

 

 

 

Set "Hello!" + current time to a Textbox (HTTP POST version)

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="Update" type="submit" />
</form>

 

You can also do this.

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}";
        }
    }
}

Note: In fact, This sample is so simple that you don't need BindProperty or ModelState.Remove. However, at almost cases, It's necessary to use BindProperty, so I adopted these to prove this mechanism works.

 

WriteToBindingTextBoxOnPost.cshtml

@page
@model WorkStandard.Pages.inputoutput.WriteToBindingTextBoxOnPostModel

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

 

 

Set "Hello!" + current time to a Textbox (HTTP GET version)

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="Update" type="submit" />
</form>

 

You can also do this.

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}";
        }
    }
}

Note: In fact, This sample is so simple that you don't need BindProperty or ModelState.Remove. However, at almost cases, It's necessary to use BindProperty, so I adopted these to prove this mechanism works.

 

WriteToTextBoxOnGet.cshtml

@page
@model WorkStandard.Pages.inputoutput.WriteToBindingTextBoxOnGetModel

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

 

 

Note:Set initial value to input element

The input elements bound with BindProperty attributes etc needs different way of setting value when the session is started and when after second access.

Session start: To set value to input element, set property specified with asp-for.(You can also set the value as described in "After second access")

After second access: To set value to input element, set a variable to value attribute of the input tag(example), or remove a state of the item from ModelState and set property specified with asp-for(example).

 

This difference brings keeping initial value or user input even if you don't set value at every access explicitly at server side C#.

 

I wrote a following sample code to understand the mechanism.

In this sample, value1 is set to a random number each request. But a textbox on the screen keeps same value ins spite of how many submit button click. You can check OnGet method executed by checking output of 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 Start value1 = {value1}");

            //Generate random number 0 to 9999.
            value1 = Random.Shared.Next(0, 10000).ToString();

            System.Diagnostics.Debug.WriteLine($"OnGet End value1 = {value1}");
        } 
    }
}

Where Debug.WriteLine outputs to

 

InitTextBox.cshtml

@page
@model WorkStandard.Pages.inputoutput.InitTextBoxModel

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

 


日本語版