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.
| 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() |
| 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() |