New to Telerik UI for ASP.NET MVC? Download free 30-day trial

Getting Started with the TextBox

This tutorial explains how to set up a basic Telerik UI for ASP.NET MVC TextBox and highlights the major steps in the configuration of the component.

You will initialize a TextBox component with a placeholder text and a label.

Sample Telerik UI for ASP.NET MVC TextBox

Prerequisites

To successfully complete the tutorial, you need a project that is already configured to use the Telerik UI for ASP.NET MVC components:

1. Prepare the CSHTML File

The first step is to add the required directives at the top of the .cshtml document:

  • To use the Telerik UI for ASP.NET MVC HtmlHelpers:

    @using Kendo.Mvc.UI
    

Optionally, you can structure the document by adding the desired HTML elements like headings, divs, paragraphs, and others.

    @using Kendo.Mvc.UI

    <h4>TextBox with a Placeholder</h4>
    <div>

    </div>

2. Initialize the TextBox

Use the TextBox HtmlHelper to add the component to a page:

  • The Name() configuration method is mandatory as its value is used for the id and the name attributes of the TextBox element.
  • The Placeholder() configuration specifies the text that appears initially as a hint.
@using Kendo.Mvc.UI

<h4>TextBox with a Placeholder</h4>
<div>
    @(Html.Kendo().TextBox()
        .Name("textbox")
        .Placeholder("Name...")
        .HtmlAttributes(new { style = "width: 300px;" })
    )
</div>

3. Define a Label Text

The next step is to present a description in front of the TextBox component by using the Label() property.

@using Kendo.Mvc.UI

<h4>TextBox with a Placeholder</h4>
<div>
    @(Html.Kendo().TextBox()
        .Name("textbox")
        .Label(l => l.Content("Set value:"))
        .Placeholder("Name...")
        .HtmlAttributes(new { style = "width: 300px;" })
    )
</div>

4. Handle a TextBox Event

The TextBox component provides convenient events for implementing your desired logic. In this tutorial, you will use the exposed Change() event to log a new entry in the browser's console.

@using Kendo.Mvc.UI

<h4>TextBox with a Placeholder</h4>
<div>
    <script>
       function change(e) {
          console.log("Change :: " + this.value());
       }
    </script>

    @(Html.Kendo().TextBox()
        .Name("textbox")
        .Label(l => l.Content("Set value:"))
        .Placeholder("Name...")
        .Events(e => e.Change("change"))
        .HtmlAttributes(new { style = "width: 300px;" })
    )
</div>

5. (Optional) Reference Existing TextBox Instances

You can reference the TextBox instances that you have created and build on top of their existing configuration:

  1. Use the id attribute of the component instance to establish a reference.

    <script>
        var textboxReference = $("#textbox").data("kendoTextBox"); // textboxReference is a reference to the existing TextBox instance of the helper.
    </script>
    
  2. Use the TextBox client-side API to control the behavior of the widget. In this example, you will use the value method to select an item.

    <script>
        var textboxReference = $("#textbox").data("kendoTextBox"); // textboxReference is a reference to the existing TextBox instance of the helper.
        textboxReference.value("Sample text"); 
    </script>
    

Next Steps

See Also

In this article