What the Kendo UI MVC Server Wrappers Are and Why You Should Be Using Them - Part 1

Microsoft’s ASP.NET MVC is a major departure from their traditional Web Form architecture. With the post-back and page life cycle approach, Web Forms enabled developers to make heavy use of the concept of server-side binding in which developers set the individual values of the elements on an HTML page with server side code, then send the HTML down to the client. This made things easier for the developer, but if a page required constant post-backs it becomes frustrating for the user to wait for all of those refreshes.

ASP.NET MVC distances itself from the post-back model and lends itself well to liberal use of client side JavaScript and AJAX calls to update pages with dynamic HTML. This creates a more pleasing experience for the users, but for developers who are unfamiliar with JavaScript or AJAX it presents a learning curve.

The architecture of Web Forms did a lot to lower the profile of JavaScript for ASP.NET developers. The post-back model allowed developers to do many of the things that would normally be done on the client side with JavaScript to be done on the server with either C# or VB.NET. The other side of that coin is the way Web Forms handled rendering controls on the client side made using JavaScript in Web Forms application difficult. The result of these things is that many .NET developers who have been doing Web Forms for a significant amount of time are leery of JavaScript and as such, their JavaScript skills can be described as “rusty.” So how does a developer who’s spent the past several years in the Web Forms world transition quickly to a more client-side model that heavily leverages the features of JavaScript and be productive immediately?

Enter Kendo UI is a set of controls based on HTML 5, JavaScript and CSS. The great thing about this framework is that as it is based on the HTML/CSS/JS stack, it is cross-platform compatible. You can use the same framework in Java, PHP, Ruby, static HTML pages, SPA’s and yes, from ASP.NET. In fact, “out of the box” Kendo UI works _very_ nicely with ASP.NET MVC.

For developers who are comfortable with JavaScript and jQuery, adding Kendo controls to an MVC view is simple. In the example below I’m using the Kendo calendar control. To do this I create a div where I want the control to appear. Then I use the jQuery document ready function to bind my div to the Kendo calendar control:

Please note in the above method I’ve already added the Kendo js and css files to my project and made the necessary changes to BundleConfig and my _Layout.cshtml view to make the Kendo UI library available. I’ll cover how to do this in a future post, or if you don’t want to wait you can checkout this page for MVC 4 and this page for MVC 5.

The above example is pretty trivial; at this point I’m just creating a control. I can of course add some more information and functionality to this control by passing in some parameters (as a JavaScript object) into the kendoCalendar function:

In the example above I’ve added a default selected date (Christmas) and added a function to the change event of the control that shows an alert box with the new selected date.

Even for developers who are not familiar with JavaScript the code I’ve shown here might be pretty easy to follow. But if you’re not familiar with JavaScript, writing this code may be quite difficult. And this is a pretty trivial example. Let’s see what a more complex example would look like.

One of the most popular, yet most frustrating controls web developers deal with is the grid. This is especially true in situations where there is a large amount of data to present. Users have expectations about how grids should work; they should be filterable, sortable, page able and users should be able to manipulate the data in the grid. And it should do all of this “fast.” That can be a tall order.

In the example below (part of which, I admit, I cribbed from the demos on the Kendo UI Demo page) you can see how a grid can be added to a page:

This is quite a bit more involved than the calendar example. If you’re not familiar with JavaScript some of this can look quite foreign. Maybe even a little intimidating.

The JavaScript necessary to render the grid is just half the story. If you look at line five you’ll see that I am including a JavaScript file called projects.js. This file contains an array of objects called products that my grid is bound to on line 11. A grid that binds to a static set of data is not very valuable. To be truly useful I need to bind this grid to a dynamic data source. In this case the best option would be to bind it to a REST based web service that will return a collection of JavaScript objects (in format known as JSON) that my grid can use as its data source.

If I’m using ASP.NET MVC it’s easy to create an action on my controller that returns a list of products formatted as JSON:

If you’re not familiar with REST or JSON don’t worry; I’ll cover the basics of these and how they relate to Kendo UI and the MVC server extensions in a future post.

The GetProducts action will work great, as long as I want a list of all the products. What if I want to do some server side pageing or filtering? How do I let the controller action know which page of the data I want or which products to filter out?

Kendo has facilities to do this on the client side. For this to work the control must have all the data stored locally (in other words, in your browser) to be able to do this. If the data is relatively small and static this might not be a problem. But it doesn’t take much data before the performance of the clietns browser starts to show signs of strain.

Kendo also enables you to do paging, sorting and filter on the server and then send the appropriate sub-set of data back to the client. If I’ve enabled these features on the client side Kendo UI will pass the needed information for paging, sorting and filtering on the server side to my controller action. Kendo also enables me to edit and change data in a grid. But again, I need to be able to pass that information to the server so the necessary changes are made to the database. This too is done by sending an object with appropriate information as a message in a REST service call.

This ability to off load activity to the sever is great. But then I need to understand what this structure of the messages will look like and how to work with them. Most .NET developers would approach this by creating a series of classes that would server as strongly typed REST messages. This is fine, but it can be a lot of work. It’s possible to receive anonymous types as REST messages, but most .NET developers aren’t familiar with this practice.

What _Are_ the Kendo UI ASP.NET MVC Extensions?

You can use the out of the box Kendo UI framework in ASP.NET MVC without any additional components. For developers familiar with JavsScript, REST and JSON this is a great option and it’s easy to be very successful with this stack.

However most ASP.NET developers are more comfortable working in something a little closer to their .NET language of choice. ASP.NET MVC uses the Razor engine to enable .NET developers to produce views in ASP.NET MVC by declaratively adding HTML controls, JavaScript functionality and other items which will be rendered by the Razor engine to HTML/CSS/JS and sent to the client.

That’s where the Kendo UI ASP.NET MVC Extensions come in! The extensions include the Kendo UI JavaScript and CSS files. They also include extension methods of the ASP.NET MVC static HTML helper object and the DataSourceRequest class that will help you wrangle all the information needed by Kendo UI for AJAX calls to your server side code. I’ll be covering use the of the DataSourceRequest class in the next post.

Let’s look at that date picker example from the beginning of the post. I re-wrote that using the ASP.NET MVC extensions. Here’s what the code looks like:

Once again, don’t worry about how the Kendo extensions of ASP.NET MVC are added to my project. I’ll be covering the different techniques for implementing the extensions in your Visual Studio project in a future post.

This example differs significantly from the JavaScript only version. For starters I don’t have to define a div where I want my control to appear and then add additional script to create it. In this case I’m calling a method on the Kendo extensions (DatePicker) right where I want the control to appear. This method of adding controls to MVC view is a more familiar and comfortable for most ASP.NET MVC developers.

Once I called DatePicker I was able to call extension methods to define other attributes of my widget. This is referred to as a fluent interface and it makes development syntax cleaner, clearer and easier to deal with. I was able to use the Value method to define a default value for my date picker (again, Christmas) and was able to assign a client side JavaScript function to the Change even on my date picker. Client side event handlers still need to be written in JavaScript, however most ASP.NET MVC developer find the approach demonstrated here cleaner and easier to understand.

In the next post I’ll show you how to not only covert the grid example into Razor syntax with the ASP.NET MVC Kendo extensions, I’ll also show you how to use the features of the extensions to get the most out of your server with REST service calls.

While you can certainly write great web applications in ASP.NET MVC that leverage Kendo UI without the extensions, the extensions clearly make your development easier, faster and less prone to error. You read more about the Kendo UI ASP.NET MVC Extensions and download a free 30 day trial from the product page. In future posts I will be exploring in more detail the many ways these extension make your software development with ASP.NET MVC easier and demonstrate many of the great feature of Kendo UI