Working with Telerik Controls in ASP.NET MVC2

In this article I will be showing how to start working with Telerik controls in ASP.Net MVC Project.

I will be showing all the prerequisites for using a Telerik control in ASP.Net MVC Project.

I will be using Visual Studio 2010 ( ASP.NET MVC 2.0)

1. To start using Telerik - The first step would be to Download Telerik Extensions for ASP.NET MVC by logging in your Telerik account.
(http://www.telerik.com/account.aspx) - Create your account if you are a new user.

2. Open Visual Studio 2010 - Create new ASP.Net MVC2 Web Application.

Select File -> New -> Project and from the new project dialog select ASP.Net MVC 2 Web Application -> Name it -> say - MVCwithTelerikSample

3. For this sample application - Let's not create the unit test project.- So select the radio button - No, Do not create a unit Test Project.

4. Now we need to copy the dll Telerik.Web.Mvc.dll from the downloaded folder in our hard drive to the local bin folder of our project. (Check for this dll in the downloaded folder - after installing Telerik and go to subfolder Binaries\MVC2 ) - since we are using MVC2 Project here



5. Add a reference to the above dll

Right Click the Solution explorer - Add Reference - Browse - bin (folder - where you have placed the telerik dll) - Select Telerik.Web.Mvc.dll) -Click Ok

6. Include the Scripts folder from the installed Telerik location from your hard drive) to the project



The folder name- 2010.3.1318 highlighted above inside the Scripts folder may have a different Version number if you are downloading the latest version.

Go to the Script sub-folder in the installed Telerik location on your harddrive  and drag and drop the entire folder (Ex folder name -2010.3.1318) inside the Scripts folder in the solution explorer of your current project




7. Include the Content folder from the installed Telerik location(from your hard drive) to the project.



Go to the Content sub-folder (refer above Screen shot) in the installed Telerik location in your harddrive Drag and drop the entire folder (Ex folder name -2010.3.1318) inside the Content folder in the solution explorer of your current project.




Note - Suppose after completing the project - in future if there is an Telerik upgrade - we can just copy the new scripts folder, Content folder, along with the new dll reference.

8. Update the Web.config file

In web.config file-in the namespace section - include - <add namespace="Telerik.Web.Mvc.UI" />




This will help us work with Telerik extension methods inside of all views

9. Build the Project - Do a quick build of the project which will help intellisense in Visual Studio to catch up with Extension methods.


10. We have added the Scripts and Themes to our Projects folder - Now we need to add it in the Views where we are going to use it.

For this sample application, the best place to add it would be in the master Page - since it is used in all the Views.


Go to Views->Shared->Site.master ->need to add .css in the head of the page ->within server tags

        <%--Including Telerik Style Sheets--%>
        <% Html.Telerik().StyleSheetRegistrar()
        .DefaultGroup(group => group.Add("telerik.common.min.css")
                                     .Add("telerik.vista.min.css"))
                                                 .Render();

         %>

        <%--END--%>


11. Now we need to add a ScriptRegistrar- add towards the bottom of the master page - script registrar needs to occur after all the UI extensions on the page.

       <%
       Html.Telerik().ScriptRegistrar().Render();

        %>

The above line of code will help to automatically look into the Scripts folder ->Version subfolder->to find the Scripts required.

So - now we are done with all the prerequisites for using Telerik controls - Now let's add one of the Telerik control and see it working -

12. Open up the Default index view



13. We will add here a Telrik Menu - to show how we can work with it.



Menu Code

<%
        Html.Telerik().Menu()
            .Name("MenuID")
            .Items(items =>
                {
                    items.Add().Text("MainMenu01").Items(subItem1 =>
                        {
                            subItem1.Add().Text("SubMenu01");
                        });
                    items.Add().Text("MainMenu02").Items(subItem1 =>
                        {
                            subItem1.Add().Text("SubMenu01");
                        });
                   
                }
        )
        .Render();       

                 %>

For any control within the Telerik extensions - We just simply need to call .Render() at the end-to output the HTML

OUTPUT: Run the application - We should see the Menu Control and  the Vista theme applied.



In this article we have seen how we can get started with using Telerik controls in ASP.NET MVC Application.

I have attached the code which I have used for this sample application.

Happy Learning!