I previously wrote about how easy NuGet makes it to install free and open source libraries into your projects. One essential library for any MVC project is Telerik Extensions for ASP.NET MVC (it has a grid, editor, date picker, and more), and it’s both open source and available through NuGet. You can view demos of it on Telerik’s website, but I want to walk you through setting it up in your own project from scratch.
From a new instance of Visual Studio, go to File | New | Project.
In the New Project dialog, select your desired language (I prefer Visual C#), then Web. In the middle column select ASP.NET MVC 3 Web Application.
You will then have the ability to choose a template. The default installed templates are Empty and Internet Application. I’m going to choose Internet Application for this demo. It includes a Home and Account controller, and it uses forms authentication. If you wish to build everything, choose the Empty template.
I also prefer to use Razor as the default view engine. A few steps in this article will assume you are using Razor. If you are using another view engine, use the analogous features for your particular engine.
The MVC application is created and should work properly. If you do not have NuGet installed, follow my instructions in You Should Use NuGet. Right-click References in your project, and choose Add Library Package Reference.
In the Add Library Package Reference dialog, click the Online tab, then search for “Telerik.” TelerikMvcExtensions will show up. Install the package.
NuGet will install the necessary artifacts to use Telerik Extensions for ASP.NET MVC. You will now have the necessary references, scripts, and styles. However, there are a few additional configuration steps if you would like to easily access the extensions throughout your application.
Open the web.config file located in the Views folder. Locate the following node: configuration/system.web.webPages.razor/namespaces, then add the following lines:
<add namespace="Telerik.Web.Mvc.UI" />
<add namespace="MvcApplication1.Models" />
The first line will cause the extension methods on HtmlHelper to become available in all razor views. The second is so you do not need to fully qualify all models within the razor views (or alternatively including @using symbols).
Next, open Views/Shared/_Layout.cshtml. Before the close of the body tag, place the following line:
<body>
…
@Html.Telerik().ScriptRegistrar()
</body>
This will register the necessary scripts for the controls to work. You can, of course, use the ScriptRegistrar to include additional scripts. Without doing this, or registering the requisite scripts yourself, many of the extensions will not work properly.
With this minimal set up, you can now begin exploring what is available. Open up a view, type @Html.Telerik() and take a look through IntelliSense. Better yet, take a look at the demos available on Telerik’s website, and follow the examples to implement the functionality you need.