ASP.NET Core textbox control

21 Dec 20222 minutes to read

NOTE

From v16.3.21 version, the textbox is provided as ASP.NET Core 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 Core textbox control.

Normal textbox

Rendering mode	CSS textbox	ASP.NET Core textbox control
Default rendering	<div class='e-input-group'> <input class='e-input' type='text' placeholder='Enter Value'/> </div>	<ejs-textbox id="default" placeholder="Enter Value" floatLabelType="Never" ></ejs-textbox>
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.	<ejs-textbox id="clear-input" placeholder="Enter Value" showClearButton="true" floatLabelType="Never" ></ejs-textbox>
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.	<ejs-textbox id="validation" placeholder="Enter Value" cssClass="e-error" floatLabelType="Never" ></ejs-textbox>

Floating label textbox

Rendering mode	CSS textbox	ASP.NET Core 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>	<ejs-textbox id="default" placeholder="Enter Value" floatLabelType="Auto" ></ejs-textbox>
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.	<ejs-textbox id="clear-input" placeholder="Enter Value" showClearButton="true" floatLabelType="Auto" ></ejs-textbox>
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.	<ejs-textbox id="validation" placeholder="Enter Value" cssClass="e-error" floatLabelType="Auto" ></ejs-textbox>