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 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.
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:
>' does not contain a definition for 'Telerik' and no extension method 'Telerik […]
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:
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.
@(Html.Telerik().StyleSheetRegistrar().DefaultGroup(group => group.Add("telerik.common.css").Add("telerik.windows7.css").Combined(true).Compress(true)))
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:
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:
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!