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).
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.
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
DataViz HTML Helpers
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:
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:
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:
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:
As an aside, if you’re targeting the Razor view engine, you can also utilize a templated Razor delegate to handle change events:
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:
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:
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.