ヘッダー
C# Sample Programs
 

Site Top > C# Sample Programs > C# Sample Programs TOC > ASP.NET Core > Razor Pages

Get value from 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.

 

TOC

 

Get values from input elements (HTTP POST version)

ReadTextBoxOnPost.cshtml.cs

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

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

        [BindProperty]
        public int value2 { get; set; } = 123;

        public void OnPost()
        {
            System.Diagnostics.Debug.WriteLine(value1);
            System.Diagnostics.Debug.WriteLine(value2);
        }
    }
}

→ Where Debug.WriteLine outputs to

 

ReadTextBoxOnPost.cshtml

@page
@model WorkStandard.Pages.ReadTextBoxOnPostModel

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

 

 

Get values from input elements (HTTP GET version)

ReadTextBoxOnGet.cshtml.cs

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

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

        [BindProperty(SupportsGet = true)]
        public int value2 { get; set; } = 123;

        public void OnGet()
        {
            System.Diagnostics.Debug.WriteLine(value1);
            System.Diagnostics.Debug.WriteLine(value2);
        }
    }
}

→ Where Debug.WriteLine outputs to

 

ReadTextBoxOnGet.cshtml

@page
@model WorkStandard.Pages.ReadTextBoxOnGetModel

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

 

 

Sum values in Textboxes (HTTP POST version)

ASP.NET Core Razor Pages Calc sum sample

CalcSimpleAddOnPost.cshtml.cs

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

namespace WorkStandard.Pages
{
    public class CalcSimpleAddOnPostModel : PageModel
    {
        [BindProperty]
        public int value1 { get; set; } = 2;

        [BindProperty]
        public int value2 { get; set; } = 3;

        public int result;

        public void OnPostAdd()
        {
            result = value1 + value2;
        }
    }
}

 

CalcSimpleAddOnPost.cshtml

@page
@model WorkStandard.Pages.CalcSimpleAddOnPostModel

<form method="post">
    <div class="mb-3">
        <input asp-for="value1" /> + <input asp-for="value2" /> =
    </div>
    <div class="mb-3">
        <input value="Calc" type="submit" asp-page-handler="Add" class="btn btn-primary" />
    </div>
    <div>
        The answer is @Model.result .
    </div>
</form>

The CSS classes...

  • mb-3 Set little margin at bottom.→ Spacing
  • btn btn-primary Make the button a Bootstrap look to indicate that it's a key feature.→ Buttons

 

 

Sum values in Textboxes (HTTP GET version)

ASP.NET Core Razor Pages Calc sum sample

CalcSimpleAddOnGet.cshtml.cs

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

namespace WorkStandard.Pages
{
    public class CalcSimpleAddOnGetModel : PageModel
    {
        [BindProperty(SupportsGet = true)]
        public int value1 { get; set; } = 2;

        [BindProperty(SupportsGet = true)]
        public int value2 { get; set; } = 3;

        public int result;

        public void OnGetAdd()
        {
            result = value1 + value2;
        }
    }
}

 

CalcSimpleAddOnGet.cshtml

@page
@model WorkStandard.Pages.CalcSimpleAddOnGetModel

<form>
    <div class="mb-3">
        <input asp-for="value1" /> + <input asp-for="value2" /> =
    </div>
    <div class="mb-3">
        <input value="Calc" type="submit" class="btn btn-primary" />
        <input type="hidden" name="handler" value="Add" />
    </div>
    <div>
        The answer is @Model.result .
    </div>
</form>

Note：A hidden send value "Add" to invoke OnGetAdd.

The CSS classes...

  • mb-3 Set little margin at bottom.→ Spacing
  • btn btn-primary Make the button a Bootstrap look to indicate that it's a key feature.→ Buttons

 

 

Get values from a lot of input elements (HTTP POST version)

ReadManyItemsOnPost.cshtml.cs

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

namespace WorkStandard.Pages
{
    public class ReadManyItemsOnPostModel : PageModel
    {
        [BindProperty]
        public FormItems items { get; set; } = new FormItems();

        public void OnPost()
        {
            System.Diagnostics.Debug.WriteLine(items.strValue1);
            System.Diagnostics.Debug.WriteLine(items.strValue2);
            System.Diagnostics.Debug.WriteLine(items.intValue);
            System.Diagnostics.Debug.WriteLine(items.dateValue);
        }

        public class FormItems
        {
            public string? strValue1 { get; set; } = "abc";
            public string? strValue2 { get; set; } = "def";
            public int intValue { get; set; } = 123;
            public DateTime dateValue { get; set; } = new DateTime(2023, 11, 9, 7, 12, 23);
        }
    }
}

→ Where Debug.WriteLine outputs to

 

ReadTextBoxOnPost.cshtml

@page
@model WorkStandard.Pages.ReadManyItemsOnPostModel

<form method="post">
    <div>
        <input asp-for="items.strValue1" />
    </div>
    <div>
        <input asp-for="items.strValue2" />
    </div>
    <div>
        <input asp-for="items.intValue" />
    </div>
    <div>
        <input asp-for="items.dateValue" />
    </div>
    <div>
        <input type="submit" />
    </div>
</form>

 

 

Get values from a lot of input elements (HTTP GET version)

ReadManyItemsOnGet.cshtml.cs

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

namespace WorkStandard.Pages
{
    public class ReadManyItemsOnGetModel : PageModel
    {
        [BindProperty(SupportsGet = true)]
        public FormItems items { get; set; } = new FormItems();

        public void OnGet()
        {
            System.Diagnostics.Debug.WriteLine(items.strValue1);
            System.Diagnostics.Debug.WriteLine(items.strValue2);
            System.Diagnostics.Debug.WriteLine(items.intValue);
            System.Diagnostics.Debug.WriteLine(items.dateValue);
        }

        public class FormItems
        {
            public string? strValue1 { get; set; } = "abc";
            public string? strValue2 { get; set; } = "def";
            public int intValue { get; set; } = 123;
            public DateTime dateValue { get; set; } = new DateTime(2023, 11, 9, 7, 12, 23);
        }
    }
}

→ Where Debug.WriteLine outputs to

 

ReadTextBoxOnPost.cshtml

@page
@model WorkStandard.Pages.ReadManyItemsOnGetModel

<form>
    <div>
        <input asp-for="items.strValue1" />
    </div>
    <div>
        <input asp-for="items.strValue2" />
    </div>
    <div>
        <input asp-for="items.intValue" />
    </div>
    <div>
        <input asp-for="items.dateValue" />
    </div>
    <div>
        <input type="submit" />
    </div>
</form>

 

 

Get values as ARGUMENTS from input elements (HTTP POST version)

ReadWithParamOnPost.cshtml.cs

using Microsoft.AspNetCore.Mvc.RazorPages;

namespace WorkStandard.Pages.simpleio
{
    public class ReadWithParamOnPostModel : PageModel
    {
        public void OnPost(string value1, int value2)
        {
            System.Diagnostics.Debug.WriteLine(value1);
            System.Diagnostics.Debug.WriteLine(value2);
        }
    }
}

→ Where Debug.WriteLine outputs to

Note：Inputting none-numeric value at second textbox lets value2 be 0.

 

ReadWithParamOnPost.cshtml

@page
@model WorkStandard.Pages.simpleio.ReadWithParamOnPostModel

<form method="post">
    <input type="text" name="value1" />
    <input type="text" name="value2" />
    <input type="submit" />
</form>

 

You can also do this.

ReadWithIFormCollectionParamOnPost.cshtml.cs

using Microsoft.AspNetCore.Mvc.RazorPages;

namespace WorkStandard.Pages.simpleio
{
    public class ReadWithIFormCollectionParamOnPostModel : PageModel
    {
        public void OnPost(IFormCollection data)
        {
            string value1 = data["value1"]!;

            //A None-numerice value lets value2 to be 0.
            int value2 = 0;
            int.TryParse(data["value2"], out value2);

            System.Diagnostics.Debug.WriteLine(value1);
            System.Diagnostics.Debug.WriteLine(value2);
        }
    }
}

→ Where Debug.WriteLine outputs to

Note: You can also get an instance of IFormCollection by calling  HttpContext.Request.ReadFormAsync method.

 

ReadWithIFormCollectionParamOnPost.cshtml

@page
@model WorkStandard.Pages.simpleio.ReadWithIFormCollectionParamOnPostModel

<form method="post">
    <input type="text" name="value1" />
    <input type="text" name="value2" />
    <input type="submit" />
</form>

 

You can also do this.

ReadWithDictionaryParamOnPostModel.cshtml.cs

using Microsoft.AspNetCore.Mvc.RazorPages;

namespace WorkStandard.Pages.simpleio
{
    public class ReadWithDictionaryParamOnPostModel : PageModel
    {
        public void OnPost(Dictionary<string, string> data)
        {
            string value1 = data["value1"];

            //A None-numerice value lets value2 to be 0.
            int value2 = 0;
            int.TryParse(data["value2"], out value2);

            System.Diagnostics.Debug.WriteLine(value1);
            System.Diagnostics.Debug.WriteLine(value2);
        }
    }
}

→ Where Debug.WriteLine outputs to

 

ReadWithDictionaryParamOnPostModel.cshtml

@page
@model WorkStandard.Pages.simpleio.ReadWithDictionaryParamOnPostModel

<form method="post">
    <input type="text" name="value1" />
    <input type="text" name="value2" />
    <input type="submit" />
</form>

 

 

Get values as ARGUMENTS from input elements (HTTP GET version)

ReadWithParamOnGet.cshtml.cs

using Microsoft.AspNetCore.Mvc.RazorPages;

namespace WorkStandard.Pages.simpleio
{
    public class ReadWithParamOnGetModel : PageModel
    {
        public void OnGet(string value1, int value2)
        {
            System.Diagnostics.Debug.WriteLine(value1);
            System.Diagnostics.Debug.WriteLine(value2);
        }
    }
}

→ Where Debug.WriteLine outputs to

Note：Inputting none-numeric value at second textbox lets value2 be 0.

 

ReadWithParamOnGet.cshtml

@page
@model WorkStandard.Pages.simpleio.ReadWithParamOnGetModel

<form>
    <input type="text" name="value1" />
    <input type="text" name="value2" />
    <input type="submit" />
</form>

 

You can also do this.

ReadWithDictionaryParamOnGetModel.cshtml.cs

using Microsoft.AspNetCore.Mvc.RazorPages;

namespace WorkStandard.Pages.simpleio
{
    public class ReadWithDictionaryParamOnGetModel : PageModel
    {
        public void OnGetTest(Dictionary<string, string> data)
        {
            string value1 = data["value1"];

            //A None-numerice value lets value2 to be 0.
            int value2 = 0;
            int.TryParse(data["value2"], out value2);

            System.Diagnostics.Debug.WriteLine(value1);
            System.Diagnostics.Debug.WriteLine(value2);
        }
    }
}

→ Where Debug.WriteLine outputs to

Note: I adopted OnGetTest instead of OnGet. The OnGet will raise error at first time because data["value1"] is nothing.

 

ReadWithDictionaryParamOnGetModel.cshtml

@page
@model WorkStandard.Pages.simpleio.ReadWithDictionaryParamOnGetModel

<form>
    <input type="text" name="value1" />
    <input type="text" name="value2" />
    <input type="submit" />
    <input type="hidden" name="handler" value="Test" />
</form>

Note：A hidden send value "Test" to invoke OnGetTest.

 

日本語版