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.
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.
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.
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:
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.
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.
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.
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