Telerik Extensions for ASP.NET MVC Manual

What is ASP.NET MVC

ASP.NET MVC is a free and fully supported Microsoft framework for building web applications that use a model-view-controller pattern. Like ASP.NET Web Forms, ASP.NET MVC is built on top of the ASP.NET framework.
ASP.NET MVC provides the following benefits:

• Provides complete control over your HTML markup
• Enables rich AJAX integration
• Intuitive website URLs
• Clear separation of concerns which results in web applications that are easier to maintain and extend over time.
• Testability – including support for test-driven development.

What is Telerik Extensions for ASP.NET MVC

Telerik Extensions for ASP.NET MVC is a lightweight framework which helps you build rich user interfaces for ASP.NET MVC applications while enjoying great developer productivity.
Telerik Extensions for ASP.NET MVC has the following features:

• Based on jQuery.
• Extensions of the HtmlHelper object for rendering UI elements.
• Rich web asset (JavaScript and CSS) management
  
  
  
  • GZIP compression of resources to save some kilobytes of traffic.
  • Combination of many resources in one request to reduce the number of requests made to the web server.
  • Componentization of resources and grouping - you can combine and compress individual groups of web assets.
  • CDN support. After testing your web site you can deploy your web assets on a Content Distribution Network and easily link them in your ASP.NET MVC application. 
  
  

 Using Telerik Extensions for ASP.NET MVC in your project

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
   
   
   
   
   
   1. Register the Telerik Extensions for ASP.NET MVC namespaces:
      
      
      
      
      • Open the web.config file of your ASP.NET MVC application.
      • Locate the tag which is within the tag.
      • Add the following line at the end of the 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>

        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 2010\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.
          

The ScriptRegistrar should be placed after all components on the page. Tipically 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>

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 2010. 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 tag of your application. In most cases this is in the Site.master file.
  Explanation of the code:
  

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:

 

% 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();
%>