Telerik Extensions for ASP.NET MVC

This topic shows how to use Telerik Extensions for ASP.NET MVC in an ASP.NET MVC application.

Prerequisites

Before proceeding with Telerik Extensions for ASP.NET MVC make sure you have all the required components installed.

Using Telerik Extensions for ASP.NET MVC in an ASP.NET MVC web application

  1. Open an existing ASP.NET MVC application in Visual Studio or create a new one.

  2. Add a reference to Telerik.Web.Mvc.dll which is located in the Binaries folder of Telerik Extensions for ASP.NET MVC install location:

    • Right click the "References" item in Solution Explorer.
      Add Reference
    • Choose the Browse tab in the "Add Reference" dialog and browse to the location where you extracted the Telerik Extensions for ASP.NET MVC zip file. In case you have chosen the suggested location this would be C:\Program Files\Telerik\Extensions for ASP.NET MVC Q1 2011. Open the Binaries folder. If you are using ASP.NET MVC 1.0 open the Mvc1 folder. For ASP.NET MVC 2.0 applications open the Mvc2 folder. In this example we will use the Mvc1 folder.
    • Select Telerik.Web.Mvc.dll and click the OK button.
      Pick Reference
  3. Register the Telerik Extensions for ASP.NET MVC namespaces:

    • Open the web.config file of your ASP.NET MVC application.
    • Locate the <namespaces> tag which is within the <pages> tag.
    • Add the following line at the end of the <namespaces> tag:
      CopyXML
      <add namespace="Telerik.Web.Mvc.UI" />
      Here is the how the <namespaces> tag should look like:
      CopyXML
      <namespaces>
          <add namespace="System.Web.Mvc" />
          <add namespace="System.Web.Mvc.Ajax" />
          <add namespace="System.Web.Mvc.Html" />
          <add namespace="System.Web.Routing" />
          <add namespace="System.Linq" />
          <add namespace="System.Collections.Generic" />
      
          <add namespace="Telerik.Web.Mvc.UI" />
      </namespaces>
  4. Add the JavaScript files in the Scripts folder of your ASP.NET MVC application.

    The JavaScript files are located in a folder named after the version of the Telerik.Web.Mvc.dll assembly within the Scripts folder of your Telerik Extensions for ASP.NET MVC install location.

    • Browse to the Scripts folder of your Telerik Extensions for ASP.NET MVC install location. In case you have chosen the suggested location this would be C:\Program Files\Telerik\Extensions for ASP.NET MVC Q1 2011\Scripts.
    • Copy the subfolder within the Scripts folder.
    • In Visual Studio Solution Explorer expand the Scripts folder and paste the folder which you copied during the previous step.
    • Use ScriptRegistrar component to register the JavaScript code of the components.

      Important

      The ScriptRegistrar should be placed after all components on the page. Typically you could put the ScriptRegistrar component at the end of the master page.

      CopyScriptRegistrar declaration in Site.master
          <!-- other content -->
          <%= Html.Telerik().ScriptRegistrar() %>
        </body>
      </html>
      Note

      The ScriptRegistrar component looks for JavaScript files in the following order:

      • First it will search for a folder with the same name as the version of the Telerik.Web.Mvc.dll assembly located in the Scripts folder of your ASP.NET MVC application.

        If such a folder is found the ScriptRegistrar will look for the following extensions:

        1. *.debug.js
        2. *.min.js
        3. *.js
        4. If there is no such folder, the ScriptRegistrar will search in the Scripts folder of the ASP.NET MVC application. It is better to copy the folder with the version for easier upgrade.
      Important

      If you need to compress or combine the scripts you should add asset.axd HTTP handler. Review this link for more information.

    • Add the CSS files in the Content folder of your ASP.NET MVC application.

      The CSS files are located in a folder named after the version of the Telerik.Web.Mvc.dll assembly within the Content folder of your Telerik Extensions for ASP.NET MVC install location.

      • Browse to the location where you extracted the Telerik Extensions for ASP.NET MVC zip file. In case you have chosen the suggested location this would be C:\Program Files\Telerik\Extensions for ASP.NET MVC Q1 2011. Open Content folder and copy the subfolder within it.
      • In Visual Studio Solution Explorer expand the Content folder and paste the folder which you copied during the previous step.
      • Now to use these skins in your project, you will need to use the StyleSheetRegistrar component. Here is a code snippet showing how to register the "Vista" theme.
        CopyC#
        <%= Html.Telerik().StyleSheetRegistrar()
                .DefaultGroup(group => group.Add("telerik.common.css")
                                            .Add("telerik.vista.css"))
        %>

        This code should be copied within the <head> tag of your application. In most cases this is in the Site.master file.

        Explanation of the code:

        • The DefaultGroup(Action<(Of <<'(WebAssetItemGroupBuilder>)>>)) method returns the default asset group.
        • The Add(String) method adds the specified CSS file to the asset group.
          Important
          You should always include the telerik.common.css file as well as the theme. The telerik.common.css file contains common CSS rules used by all themes.
    • Now you can start using Telerik Extensions for ASP.NET MVC! Let's try the PanelBar component.

      • Open the master page of your ASP.NET MVC application. If using the defaults the master page is Views\Shared\Site.master.
        Note
        The Telerik Extensions for ASP.NET MVC can be used in master pages, view pages or partial views. Picking the default master page was for the example's purpose.
      • Let's add an PanelBar component with two header items and some content. You can paste the following in the <div id="menucontainer"> tag:
        CopyC#
        <% Html.Telerik().PanelBar()
               .Name("PanelBar")
               .Items(items =>
               {
                   items.Add().Text("Item 1")
                              .Content(() =>
                              {%>
                                    <p>Content</p>
                               <% });
                   items.Add().Text("Item 2")
                        .Items(subItems => 
                              {
                                  subItems.Add().Text("Sub Item 1");
                                  subItems.Add().Text("Sub Item 2");
                                  subItems.Add().Text("Sub Item 3");
                              });
               })
               .Render();
        %>
      • That's all! Build your application and run it. The output should look like this:
    • These are the basics required to start using Telerik Extensions for ASP.NET MVC. Please check the other topics in this manual for additional info.

    See Also