Search results

MaskedTextBoxFor and Model Binding in ASP.NET Core MaskedTextBox control

22 Jul 2021 / 1 minute to read

This section demonstrates the Strongly typed extension support in MaskedTextBox. 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 MaskedTextBox.

tagHelper
modelBinding.cs
Copied to clipboard
@model EJ2CoreSampleBrowser.Controllers.MaskedTextbox.MaskValue
<div class="col-lg-12 control-section">
    <div class="content-wrapper">
        <form method="post">
            <ejs-maskedtextbox id="mask" name="value" ejs-for="@Model.value"></ejs-maskedtextbox>
                <div id="errorMessage">
                    <span asp-validation-for="value"></span>
                </div>
                <div id="submitbutton">
                    <ejs-button id="submitButton" content="Submit"></ejs-button>
                </div>
        </form>
    </div>
</div>

<style>
    .content-wrapper {
        width: 30%;
        margin: 0 auto;
        min-width: 185px;
    }

    .control-label {
        padding: 10px 0px 5px 0px;
        font-size: 12px;
    }

    #errorMessage {
        color: red;
        text-align: center
    }

    #submitbutton {
        margin: 10px auto;
        text-align: center;
    }
</style>
Copied to clipboard
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using System.ComponentModel.DataAnnotations;

namespace EJ2CoreSampleBrowser.Controllers.MaskedTextbox
{
    public class MaskValue
    {
        [Required]
        public string value { get; set; }

    }
    public partial class MaskedTextboxController : Controller
    {

        public ActionResult DefaultFunctionalities()
        {
            MaskValue val = new MaskValue();
            val.value = "10";
            return View(val);
        }
        [HttpPost]
        public ActionResult DefaultFunctionalities(MaskValue model)
        {
            MaskValue val = new MaskValue();
            val.value = model.value;
            return View(val);
        }
    }
}

Output be like the below.

MaskedTextBox Sample