Features

Input

Input

This view shows how to use input controls in a form in Razor Pages.

Features

Overview
FlexGrid
Batch Editing
Unobtrusive Validation
FlexChart
Input

Description

Steps for using input controls in a form in Razor Pages:

  1. Add a public property CustomerOrder with BindProperty attribute for model binding.
  2. Initialize the Input controls in a form in razor page view using the input control tags.
  3. Add a handler OnPost for post back.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
@page
@model InputModel
@{
    string message = (string)ViewData["Message"];
    List<string> countries = Model.Countries;
    List<string> products = Model.Products;
    countries.Insert(0, "");
}
  
<div>
    <form method="post">
        <div asp-validation-summary="All">
        </div>
        <div>
            <label asp-for="CustomerOrder.Country"></label>
            <c1-auto-complete for="CustomerOrder.Country">
                <c1-items-source source-collection="countries"></c1-items-source>
            </c1-auto-complete>
            <span asp-validation-for="CustomerOrder.Country"></span>
        </div>
        <div>
            <label asp-for="CustomerOrder.Product"></label>
            <c1-combo-box for="CustomerOrder.Product">
                <c1-items-source source-collection="products"></c1-items-source>
            </c1-combo-box>
            <span asp-validation-for="CustomerOrder.Product"></span>
        </div>
        <div>
            <label asp-for="CustomerOrder.Price"></label>
            <c1-input-number for="CustomerOrder.Price"></c1-input-number>
            <span asp-validation-for="CustomerOrder.Price"></span>
        </div>
        <div>
            <label asp-for="CustomerOrder.Count"></label>
            <c1-input-number for="CustomerOrder.Count"></c1-input-number>
            <span asp-validation-for="CustomerOrder.Count"></span>
        </div>
        <div>
            <label asp-for="CustomerOrder.OrderTime"></label>
            <c1-input-date-time for="CustomerOrder.OrderTime"></c1-input-date-time>
            <span asp-validation-for="CustomerOrder.OrderTime"></span>
        </div>
        <div style="margin-top: 10px">
            <input type="submit" class="wj-btn wj-btn-default" value="Submit" />
        </div>
    </form>
</div>
<p>@message</p>
  
@section Summary{
    <p>This view shows how to use input controls in a form in Razor Pages.</p>
}
  
@section Description{
    <p>
        Steps for using input controls in a form in Razor Pages:
    </p>
    <ol>
        <li>Add a public property CustomerOrder with <b>BindProperty</b> attribute for model binding.</li>
        <li>Initialize the Input controls in a form in razor page view using the input control tags.</li>
        <li>Add a handler <b>OnPost</b> for post back.</li>
    </ol>
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
using System;
using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using RazorPagesExplorer.Models;
  
namespace RazorPagesExplorer.Pages
{
    public class InputModel : PageModel
    {
        public readonly List<string> Countries = Models.Countries.GetCountries();
        public readonly List<string> Products = Models.Products.GetProducts();
        private CustomerOrder _customerOrder= new CustomerOrder { ID = 101, OrderTime = DateTime.Now, Product = "PlayStation 4" };
        [BindProperty]
        public CustomerOrder CustomerOrder
        {
            get { return _customerOrder; }
            set { _customerOrder = value; }
        }
  
        public void OnGet()
        {
        }
  
        public void OnPost()
        {
            if (ModelState.IsValid)
            {
                ViewData["Message"] = "CustomerOrder updated successfully, thanks!";
            }
        }
    }
}