Getting Started

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.

Adding TagHelpers

Open the _ViewImports.cshtml to import Syncfusion.EJ2 package.

@addTagHelper *, Syncfusion.EJ2

Adding Styles

Add client side resource through CDN or local package in the layout page _Layout.cshtml.

@* Syncfusion Essential JS2 Styles *@
<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/material.css" />

@* Syncfusion Essential JS2 Scripts *@
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>

Adding ScriptManager

Add ScriptManager to the bottom of the layout.cshtml page. The ScriptManager used to place our control initialization script in the page.

<ej-scripts> </ej-scripts>

Adding component to the Application

Now open your view page to render Textbox component.

tagHelper

input.cs

@using Syncfusion.EJ2

@section ControlsSection{
<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 Name"/>
			</div>
        </div>
</div>
}

@section Script{
 <script>
        ej.base.enableRipple(true);
        var inputObject = {};
        var input = document.querySelectorAll('.e-input-group .e-input,.e-float-input.e-input-group input');
        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'); };
        };      
        for (var i = 0; i < input.length; i++) {
            input[i].addEventListener('focus', focusFn(i));
            input[i].addEventListener('blur', blurFn(i));
        }       
        function getParentNode(element) {
            var parentNode = element.parentNode;
            if (parentNode.classList.contains('e-input-in-wrap')) {
                return parentNode.parentNode;
            }
            return parentNode;
        }
</script>
}

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace EJ2CoreSampleBrowser.Controllers
{
    public partial class TextboxController : Controller
    {
        // GET: //
        public IActionResult DefaultFunctionalities()
        {
            return View();
        }
    }
}

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.

tagHelper

icon.cs

@using Syncfusion.EJ2

@section ControlsSection{
<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>
}

@section Script{
 <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>
}

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace EJ2CoreSampleBrowser.Controllers
{
    public partial class TextboxController : Controller
    {
        // GET: //
        public IActionResult DefaultFunctionalities()
        {
            return View();
        }
    }
}

Output be like the below.

textbox

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

tagHelper

floating.cs

@using Syncfusion.EJ2

@section ControlsSection{
<div class="control-section">
        <div class="control_wrapper accordion-control-section">
		<ejs-textbox id="firstname" placeholder="First Name" floatLabelType="Auto" ></ejs-textbox>
        </div>
</div>
}

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace EJ2CoreSampleBrowser.Controllers
{
    public partial class TextboxController : Controller
    {
        // GET: //
        public IActionResult DefaultFunctionalities()
        {
            return View();
        }
    }
}

Getting Started

Adding TagHelpers

Adding Styles

Adding ScriptManager

Adding component to the Application

Adding icons to the TextBox

Floating label

See Also