NumericTextBoxFor and Model Binding

26 Oct 20223 minutes to read

This section demonstrates the Strongly typed extension support in NumericTextBox. The view which bind with any model is called as strongly typed view. You can bind any class as model to view. You can access model properties on that view. You can use data associated with model to render controls.

In this sample, first click the submit button to post the selected value in the MaskedTextBox. When posting the null value, validation error message will be shown below the NumericTextBox.

@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)
    <div class="col-lg-12 control-section">
        <div id="wrapper">
            @Html.EJS().NumericTextBoxFor(model => model.value).Width("200px").Render()
            <div>
                @Html.ValidationMessageFor(model => model.value)
            </div>
            <div id="submitbutton">
                @Html.EJS().Button("btn").Content("Post").Render()
            </div>
        </div>
    </div>
}

<style>
    #wrapper {
        max-width: 246px;
        margin: 30px auto;
        padding-top: 50px;
    }

    #submitbutton {
        margin-top: 20px;
        margin-left: 65px;
    }

    #control-content #wrapper .field-validation-error {
        color: red;
    }
</style>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using System.ComponentModel.DataAnnotations;

namespace EJ2CoreSampleBrowser.Controllers
{
    public class NumericValue
    {
        [Required]
        public int value { get; set; }

    }
    public partial class NumericTextBoxController : Controller
    {
        public ActionResult DefaultFunctionalities()
        {
            NumericValue val = new NumericValue();
            val.value = 10;
            return View(val);
        }
        [HttpPost]
        public ActionResult DefaultFunctionalities(NumericValue model)
        {
            NumericValue val = new NumericValue();
            val.value = model.value;
            return View(val);
        }
    }
}

Output be like the below.

NumericTextBox Sample