ASP.NET MVC textbox control

21 Dec 20222 minutes to read

NOTE

From v16.3.21 version, the textbox is provided as ASP.NET MVC control to achieve the floating label textbox with minimal code. You can find the available textbox properties, methods, and events in the API reference.

The following table describes the migration from CSS textbox to ASP.NET MVC textbox control.

Normal textbox

Rendering mode	CSS textbox	ASP.NET MVC textbox control
Default rendering	<div class='e-input-group'> <input class='e-input' type='text' placeholder='Enter Value'/> </div>	@Html.EJS().TextBox("default"). Placeholder("Enter Value"). FloatLabelType (FloatLabelType.Never). Render()
Textbox with clear button	<div class='e-input-group'> <input class='e-input' placeholder='Enter Value' required='true'> <span class='e-clear-icon'></span> </div> Note: You have to write action for clear button.	@Html.EJS().TextBox("clear-input").Placeholder("Enter Value").ShowClearButton(true). FloatLabelType(FloatLabelType .Never).Render()
Validation states	<div class='e-input-group e-error'> <input class='e-input' type='text' placeholder='Enter Value' /> </div> Note: Textbox control consists of three types of validation rules such as success, warning, and error.	@Html.EJS().TextBox("clear-input").Placeholder("Enter Value").CssClass("e-error").FloatLabelType (FloatLabelType.Never). Render()

Floating label textbox

Rendering mode	CSS textbox	ASP.NET MVC textbox control
Default rendering	<div class='e-float-input'> <input type='text' required /> <span class='e-float-line'></span> <label class='e-float-text'>Enter Value</label> </div>	@Html.EJS().TextBox("default"). Placeholder("Enter Value"). FloatLabelType (FloatLabelType.Auto). Render()
Textbox with clear button	<div class='e-float-input e-input-group'> <input type='text' required value= 'Clear Input' /> <span class='e-float-line'></span> <label class='e-float-text'>Enter Value</label> <span class='e-clear-icon'></span> </div> Note: You have to write action for clear button.	@Html.EJS().TextBox("clear-input").Placeholder("Enter Value").ShowClearButton(true). FloatLabelType(FloatLabelType .Auto).Render()
Validation states	<div class='e-float-input e-error'> <input type='text' required /> <span class='e-float-line'></span> <label class='e-float-text'>Enter Value</label> </div> Note: Textbox control consists of three types of validation rules such as success, warning, and error.	@Html.EJS().TextBox("clear-input").Placeholder("Enter Value").CssClass("e-error").FloatLabelType (FloatLabelType.Auto). Render()