Kendo UI for ASP.NET MVC and Web API

Kendo UI for ASP.NET MVC and Web API

Telerik recently announced the Kendo UI HTML Helpers for ASP.NET MVC, which allow you to write fluent code in Razor or WebForms View Engine to emit the necessary HTML and JavaScript code for Kendo UI controls. For those ASP.NET MVC Developers who have just started using Kendo UI, it is certainly an advantage to learning the various HTML5 Controls in Kendo UI using the wonderful code completion, intellisense, etc. in Visual Studio 2010 and 2012 while developing HTML5 JavaScript Websites.

Kendo UI for ASP.NET MVC in Beta

Currently, Kendo UI for ASP.NET MVC is in beta and suggests it only supports ASP.NET MVC 3. With ASP.NET MVC 4 in RC and a go-live license, I'd be crazy not to try the helpers in ASP.NET MVC 4, and of course, use Web API. Turns out Kendo UI for ASP.NET MVC appears to work fine in ASP.NET MVC 4 using Web API.

My goal was to try something simple. I wanted to create an autocomplete textbox that reads the names of the U.S. states from an ASP.NET MVC 4 Web API Controller on the server. As you type in the name of a state a list of possible states is provided allowing you to pick the one you intended to type in the autocomplete textbox.

ASP.NET MVC 4 and Web API with Kendo UI

Web API Controller in ASP.NET MVC 4

The Web API Controller in ASP.NET MVC 4 is dirt simple. You are just returning a list of states and content negotiation is handled automagically by Web API.

public class StatesController : ApiController {
  public IEnumerable Get() {
return new[]
{
"Alabama",
"Alaska",
"Arizona",
"Arkansas",
"..."
};
}
}

Kendo UI ASP.NET MVC HTML Helpers

Now in your view you just need to use the Kendo UI HTML Helpers to create an autocomplete textbox and specify that it needs to get it's data from the StatesController's Get Method. You can specify actions and routes, but I couldn't get those to work with an ApiController ( it worked with Controller fine ) on my first few attempts, so I just specified a URL. Ideally I recommend not using a URL, and instead specify actions and controllers, etc.

This is how incredibly easy it is to use the Kendo UI ASP.NET MVC HTML Helpers. I am using the Razor View Engine, of course:

@(Html.Kendo().AutoComplete()
  .Name("State")
  .DataSource(source =>
    {
      source.Read(read => read.Url("/api/states/get"));
    })
  )

Conclusion

I've been using Kendo UI for quite awhile, but this is my first look at the ASP.NET MVC HTML Helpers since they were just released in beta. If you are interested in developing HTML5 JavaScript Web Applications in Visual Studio 2010 or Visual Studio 2012, check out Kendo UI.