UI controls for ASP.NET AJAX, MVC, WPF,Silverlight, Windows 8 and Windows Phone
Cross-platform Mobile Development Toolwith cloud-based architecture
Everything you need to build sites andmobile apps with JavaScript and HTML5
One easy tool for Functional, Performance,Load and Mobile software testing
Everything for your online business - contentmanagement, ecommerce, emarketing
Simple and intuitive project managementand collaboration software
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.
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.
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:
<%: 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>
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:
div
Name
<%: 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:
change
<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>) ) )
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:
Value
<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.
About the Author John Bristowe (@JohnBristowe) is a Developer Evangelist with Telerik and is based out of Melbourne, Australia. John enjoys all the meats of our technology stew, hacking on everything from angle brackets to .NET. John's passion lies in modern web standards like HTML5 and CSS3. His website is bristowe.com.
RadEditor - please enable JavaScript to use the rich text editor.
Copyright © 2011 - 2013 Telerik Inc. All rights reserved.