HTML Helper Basics of Kendo UI for ASP.NET MVC Beta

Last week, we shipped the Beta release of Kendo UI for ASP.NET MVC. If you haven't already done so, I'd encourage you to check it out, especially if you're building websites with Kendo UI on ASP.NET MVC. In this blog post, we'll explore three basic concepts of using the HTML helpers of Kendo UI for ASP.NET MVC Beta; declarations, events, and configuration.

Download, Install, Integrate

To begin, the first thing we'll need to do is to download and install the MSI package for Kendo UI for ASP.NET MVC Beta (7.8 MB).

The installer will deploy a number of files to the destination folder, including the .NET assembly for Kendo UI for ASP.NET MVC, its associated JavaScript and stylesheet dependencies, documentation, and a set of examples highlighting the HTML helpers of Kendo UI for ASP.NET MVC Beta (more on this later). Important! The examples will NOT be installed unless ASP.NET MVC 3 is present.

Once the installer finishes, the next step is to integrate Kendo UI for ASP.NET MVC into your new/existing project(s). The steps to do this relatively simple. In fact, we've published a step-by-step guide to show you how to do this. It should only take a few minutes.

HTML Helpers

Now that everything is ready to go, the next step is to start using the HTML helpers that encapsulate the widgets for Kendo UI Web and Kendo UI DataViz.

HTML helpers are lightweight objects responsible for generating markup within a view. Kendo UI for ASP.NET Beta renders Web and DataViz widgets through as a set of custom HTML helpers defined in the Kendo.Mvc.UI namespace:

Web HTML Helpers

• AutoComplete
• Calendar
• ComboBox
• DatePicker
• DateTimePicker
• DropDownList
• Grid
• Menu
• NumericTextBox
• PanelBar
• Slider
• Splitter
• TabStrip
• TimePicker
• TreeView
• Window

DataViz HTML Helpers

• Chart
• LinearGauge
• RadialGauge

Declarations

Let's start with a simple HTML helper that allows us to examine how they operate. In this case, let's assume the Calendar HTML helper:

<%: Html.Kendo().Calendar()
	.Name("calendar")
%>

@(Html.Kendo().Calendar()
	.Name("calendar")
)

When the view is rendered, a Calendar widget is displayed in the browser:

Viewing the source, we see that the Calendar HTML helper is emiting the necessary markup and script to render the Calendar widget on the page:

<div class="k-widget k-calendar" id="calendar"></div>
<script>
	jQuery(function(){jQuery("\#calendar").kendoCalendar({});});
</script>

Events

As you can see, the ID of the target div element (above) matches the Name of the Calendar HTML helper. This is intentional as well as mandatory; the ID provides a means of the auto-wiring of client-side events when configuring the Calendar HTML helper:

<%: Html.Kendo().Calendar()
	.Name("calendar")
	.Events(e => e.Change("change"))
%>

<script>
	function change() {
		// handle the date change event here...
	}
</script>

@(Html.Kendo().Calendar()
	.Name("calendar")
	.Events(e => e.Change("change"))
)

<script>
	function change() {
		// handle the date change event here...
	}
</script>

In the code snippet(s) above, the Calendar HTML helper has been configured to have the resulting Calendar widget that's generated to invoke change when triggered by a user's interaction. Viewing the source, we see that the change event is appropriately configured:

<div class="k-widget k-calendar" id="calendar"></div>
<script>
	jQuery(function(){jQuery("\#calendar").kendoCalendar({change:change});});
</script>

<script>
	function change() {
		// handle the date change event here...
	}
</script>

As an aside, if you're targeting the Razor view engine, you can also utilize a templated Razor delegate to handle change events:

@(Html.Kendo().Calendar()
	.Name("calendar")
	.Events(e => e
		.Change(@<text>
			function() {
				/// handle the date change event here...
			}
		</text>)
	)
)

Configuration

Now, there's a good chance that we'll want to configure the Calendar HTML helper to modify its output and/or behavior. The APIs of the HTML helpers allow us to accomplish this task easily:

<%: Html.Kendo().Calendar()
	.Name("calendar")
	.Value(DateTime.Today)
%>

@(Html.Kendo().Calendar()
	.Name("calendar")
	.Value(DateTime.Today)
)

When the view is rendered, the Calendar widget is displayed in the browser with its selected value set to today's date:

It's worth noting how readable the code becomes through the fluent interface that's provided through method chaining. This style lends itself well to developers who have experience with Kendo UI already; it's similar to the one used to configure widgets for Kendo UI Web, Kendo UI DataViz, and Kendo UI Mobile. In the code snippet(s) above, the Value of the Calendar HTML helper is set to today's date, which generates the following output to the client:

<div class="k-widget k-calendar" id="calendar"></div>
<script>
	jQuery(function(){jQuery("\#calendar").kendoCalendar({value:new Date(2012,5,7,0,0,0,0)});});
</script>

So, there you have it. In this blog post, we covered three basic concepts of using the HTML helpers of Kendo UI for ASP.NET MVC; declarations, events, and configuration. In future blog posts, we'll explore more advanced topics like databinding, migration, templates, and much more! In the meantime, please take the time to download the Beta and give it a try for yourself. Also, please send us your feedback! We really appreciate it.