Getting started with ASP.NET Core TextBox control
This section briefly explains about how to include a simple Textbox in your ASP.NET Core application. You can refer ASP.NET Core Getting Started documentation page for introduction part part of the system requirements and configure the common specifications.
Starting with v16.2.0.x, if you reference Syncfusion assemblies from trial setup or from the NuGet feed, you also have to include the license key in your projects. Please refer to this link to know about registering Syncfusion license key in your ASP.NET Core application to use our components.
Initialize TextBox control to the Application
TextBox control can be rendered by using the ejs-textbox tag helper in ASP.NET Core application. Add the below simple code to your index.cshtml page which is available within the Views/Home folder, to initialize the TextBox.
<div class="control-section">
<div class="control_wrapper accordion-control-section">
<ejs-textbox id="firstname" placeholder="First Name"></ejs-textbox>
</div>
</div>public ActionResult Index()
{
return View();
}Running the above code will display the basic TextBox on the browser.
Adding icons to the TextBox
You can create a TextBox with icon as a group by creating the parent div element with the class e-input-group and add the icon element as span with the class e-input-group-icon. For detailed information, refer to the Groups section.
<div class="control-section">
<div class="control_wrapper accordion-control-section">
<div class="e-input-group">
<input class="e-input" name='input' type="text" placeholder="Enter Date" />
<span class="e-input-group-icon e-input-popup-date"></span>
</div>
</div>
</div>
<script>
ej.base.enableRipple(true);
var inputObject = {};
var input = document.querySelectorAll('.e-input-group .e-input,.e-float-input.e-input-group input');
var inputIcon = document.querySelectorAll('.e-input-group-icon');
var focusFn = function (index) {
return function () {
getParentNode(input[index]).classList.add('e-input-focus');
};
};
var blurFn = function (index) {
return function () { getParentNode(input[index]).classList.remove('e-input-focus'); };
};
var mouseupFn = function () {
var ele = this; setTimeout(function () {
ele.classList.remove('e-input-btn-ripple');
}, 500);
};
for (var i = 0; i < input.length; i++) {
input[i].addEventListener('focus', focusFn(i));
input[i].addEventListener('blur', blurFn(i));
}
for (var j = 0; j < inputIcon.length; j++) {
inputIcon[j].addEventListener('mousedown', function () {
this.classList.add('e-input-btn-ripple');
});
inputIcon[j].addEventListener('mouseup', mouseupFn);
}
function getParentNode(element) {
var parentNode = element.parentNode;
if (parentNode.classList.contains('e-input-in-wrap')) {
return parentNode.parentNode;
}
return parentNode;
}
</script>
<style>
.e-input-group-icon:before {
font-family: e-icons;
}
.e-input-group .e-input-group-icon.e-input-popup-date { /* csslint allow: adjoining-classes */
font-size: 16px;
}
.e-input-group-icon.e-input-popup-date:before { /* csslint allow: adjoining-classes */
content: "";
}
.e-input-group-icon.e-input-up:before { /* csslint allow: adjoining-classes */
content: '\e85e';
}
</style>public ActionResult Index()
{
return View();
}Output be like the below.
Floating label
The floating label TextBox floats the label above the TextBox after focusing, or filled with value in the TextBox. You can create the floating label TextBox by using the floatLabelType API
<div class="control-section">
<div class="control_wrapper accordion-control-section">
<ejs-textbox id="firstname" placeholder="First Name" floatLabelType="Auto"></ejs-textbox>
</div>
</div>public ActionResult Index()
{
return View();
}