Getting started with Telerik Extensions for ASP.NET MVC 3–Razor (VS 2010)

Download Telerik Extensions the  from CodePlex

Download Change Set 61235, released on Nov 10 2010: http://telerikaspnetmvc.codeplex.com/releases/view/57046

Telerik project in Visual Studio 2010

Open the solution file using VS 2010 and convert to a VS 2010 solution.

Go to the property page for each individual project within this solution and target “.NET Framework 4” framework.

You can switch the target framework through the properties pane for both “Telerik.Web.MVC” and “Telerik.Web.Mvc.Examples” however you need to manually update the project files for “Telerik.Web.Mvc.JavaScriptTests” and “Telerik.Web.Mvc.Tests”.

For this, you can either use the PowerCommands for Visual Studio 2010 or manually update the .csproj file in the project folders.

Edit the Telerik.Web.Mvc.JavaScriptTests.csproj file (line 14).  Replace “v3.5” with “v4.0”.

Edit the Telerik.Web.Mvc.Tests.csproj file (line 13). Again, replace “v3.5” with “v4.0”.

Reload both projects in your open solution.

Now, edit the "Telerik.Web.Examples.csproj file as follows. Replace the selected line (104) with

<Reference Include="System.Web.Mvc, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35, processorArchitecture=MSIL" />

Add an assembly reference for “System.Web.WebPages” to both “Telerik.Web.Mvc” and “Telerik.Web.Mvc.Tests”.

Change the solution configuration to “Debug MVC3” or “Release MVC3” and then build the solution.

ASP.NET MVC 3 project

Create a new ASP.NET MVC 3 project or open an existing one.

References

Make a reference to <Telerik download folder>\Source\Telerik.Web.Mvc\bin\Debug MVC3\Telerik.Web.Mvc.dll (or replace Debug MVC3 with Release MVC3 if you built the Telerik project with the release configuration.)

Web.Config

<configSections>
    <sectionGroup name="system.web.webPages.razor" type="System.Web.WebPages.Razor.Configuration.RazorWebSectionGroup, System.Web.WebPages.Razor, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35">
        <section name="host" type="System.Web.WebPages.Razor.Configuration.HostSection, System.Web.WebPages.Razor, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" />
        <section name="pages" type="System.Web.WebPages.Razor.Configuration.RazorPagesSection, System.Web.WebPages.Razor, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" />
    </sectionGroup>
</configSections>

<system.web.webPages.razor>
    <pages pageBaseType="System.Web.Mvc.WebViewPage">
        <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="Telerik.Web.Mvc.UI" />
        </namespaces>
    </pages>
</system.web.webPages.razor>

Content folder

Create a subfolder with the version number of the assembly.  In this case, it will the same name as the subfolder under the bin folder as follows:

<Telerik download folder>\Source\Telerik.Web.Mvc\bin\Release MVC3\Content\2010.3.1110

Copy all content to under this folder in your ASP.NET MVC 3 project and include in your project.

Scripts folder

Create a subfolder with the version number of the assembly. In this case, it will the same name as the subfolder under the bin folder as follows:

<Telerik download folder>\Source\Telerik.Web.Mvc\bin\Release MVC3\Scripts\2010.3.1110

Copy all content to under this folder in your ASP.NET MVC 3 project and include in your project.

/Views/Shared/_Layout.cshtml

Add the following to the head element:

@(
Html.Telerik().StyleSheetRegistrar()
     .DefaultGroup(group => group.Add("telerik.common.css")
                     .Add("telerik.vista.css"))
)

Add the following to bottom of the body element

@(Html.Telerik().ScriptRegistrar())

/Home/Index.cshtml

Add the following to the Home View Template, for example.

@(Html.Telerik().PanelBar()
    .Name("PanelBar")
    .HtmlAttributes(new { style = "width: 200px;" } )
    .Items(items => {
        items.Add().Text("Item 1")
         .Items(subItems => {
             subItems.Add().Text("Sub Item 1");
             subItems.Add().Text("Sub Item 2");
             subItems.Add().Text("Sub Item 3");
         });
    })
)

F5

That should be it.  You should see a page that looks like this:

Sample project download

You can download this ASP.NET MVC 3 (razor) project