Using the Telerik Extensions in ASP.NET MVC4 Today - A First Look

Update: This blog post treats the Telerik Extensions for ASP.NET MVC suite that has been obsolete since June 2013. For current development against MVC4 and later versions, please download the Telerik UI for ASP.NET MVC or Telerik UI for ASP.NET Core suite.

It's an exciting time to be an ASP.NET developer, especially with the upcoming ASP.NET 4.5 and MVC4 releases, and I know a lot of you are wondering how the Telerik Extensions ASP.NET MVC will work with ASP.NET MVC4. While we do not have official builds against MVC4 today, we will be providing these once the platform finally comes out of beta. For those of you curious as to whether or not it works in the current beta, I can tell you that it does! Actually, I'll do one better: I'll show you! :)

For the Love of Beta

For this demo I'm using Visual Studio 2010 and the MVC4 Beta, but if you take a look at this blog post you can see that the components should work in Visual Studio 11. This means that you early adopters should be able to follow along with the new version of Visual Studio as well.

As I mentioned in the beginning of this post, we do not have an official build against MVC4 and our Visual Studio Extensions do not quite know how to handle an MVC4 project, yet. This cannot stop the awesomeness that is the Telerik Extensions though, no sir! We really just have to add the associated files manually, modify our web.config and we're good to go.

First of all, let's create a basic ASP.NET MVC4 Internet application.

Side-note: Keep an eye out for future blog posts related to the Web API project – I know some of you are excited about this!

Once we've created the application and Visual Studio is good and ready we can go ahead and manually add a reference to the Telerik.Web.MVC assembly by right-clicking on our References folder and selecting Add Reference. I find that the easiest way to find the assembly is just to go with the Browse option and then find the install directory (usually Program Files\Telerik\Telerik Extensions for ASP.NET MVC [Version]) and locate the Binaries folder.

Now that we've added the assembly we need to open the Content and Scripts folder located in the install directory, as these contain the necessary folders that contain our CSS and JavaScript files. These are named after the version of the components we are using, but let's just drag this over to their respective folders (Content and Scripts) in our ASP.NET MVC project. We should end up with the following:

References Folder:

Content and Scripts Folders:

This takes care of all of the physical files. However, if you were to try to use the Telerik Extensions in a View in this state you would receive this ugly error message:

Although that looks upsetting, there's no need to fear :) We just haven't modified the Web.config to use our assembly yet, so let's go ahead and do so. Opening the Web.config file under Views (not Views/Shared) we will need to add the following to the namespaces section:

And to get intellisense we have to add this snippet to our configSections under the configuration area:

One more item can get added to the web.config if you want to go ahead and use combination and compression of the CSS and JavaScript resources. Within the <httpHandlers> tag (found in <system.web>) we add the following:

Then follow that up by finding the <handlers> tag within <system.webServer> and add this:

With these changes let's just build the application to make sure we don't get any odd issues from Visual Studio.

We can now use the Telerik Extensions in our Razor Views – intellisense and all! However, we have not added the necessary links to our CSS and JavaScript files in our Views yet, so let's go ahead and do that. In the _Layout.cshtml file located under Views/Shared we can start by sticking the following in the header:

Which allows me to use our Windows7 theme, as well as combine and compress these CSS files (optimization out of the gate – I like it!).

Now at the very bottom of the page, right before the </body> tag we should add this:

In case you're wondering, the ScriptRegistrar is the same as the StyleSheetRegistrar, but for our JavaScript files. The neat thing is that the components we place on a page will automatically register with the ScriptRegistrar – so we don't really need to add more than the line above. However, if you want to specify the files one by one, you can do so as well. Keep in mind to look at this page containing a list of all of the required JavaScript files for our individual components.

That's all there is to it! You can now feel free to use the Telerik Extensions in your ASP.NET MVC4 project! Just for the sake of testing, and so that you will believe me ;), I added a quick menu:

It's That Easy

So while the example above is fairly simple, you can of course start using some of our more complex MVC components (Grid, TreeView etc.) in your MVC4 project as well. This was just laying the foundation of the MVC4 goodness!

Keep an eye out on the MVC blogs as we'll be posting more content relating to how to use our Extensions in the ASP.NET MVC4 beta :D

Have any of you experimented with the Telerik MVC Extensions in the MVC4 beta yet? Feel free to post in the comment section below and share your experiences!