RadControls for ASP.NET AJAX

This section is a step-by step tutorial which describes how to integrate RadControls for ASP.NET AJAX in ASP.NET MVC Web Application.

Tip
We also offer native ASP.NET MVC extensions designed in par with the Model-View-Controller paradigm.

1. Open Visual Studio 2008/2010 and create a new ASP.NET MVC Web Application. Make sure you have installed ASP.NET MVC 1.0 or 2.0 first. You can get them from here and here respectively.

1.1. Using ASP.NET MVC 1.0/2.0 and VS 2008/.NET 3.5 SP1

 

1.2. Using ASP.NET MVC 2.0 and VS 2010/.NET 4

 

1.3. Using ASP.NET MVC 3.0 and VS 2010/.NET 4 (WebForms views only, Razor views are not supported)

 

2. RadControls for ASP.NET AJAX need asp ScriptManager or RadScriptManager control to be added in the page. Drag and drop a RadScriptManager control from your Visual Studio toolbox (or add it declaratively) to a view page to a master page.

Note
We recommend placing the RadScriptManager at the end of the master page - just before the closing tag. Note that RadScriptManager will combine/compress the client scripts of the Telerik controls to reduce their loading time.

3. Register the HTTP handler required by RadScriptManager by either

• clicking on the "Register Telerik.Web.UI.WebResource.axd" smart tag option:

   

  

• pasting the following in your web.config inside the <httpHandlers /> tag:

  CopyXML

  <add path="Telerik.Web.UI.WebResource.axd" type="Telerik.Web.UI.WebResource" 
      verb="*" validate="false" />

  and the following inside the <handlers /> tag:

  CopyXML

  <add name="Telerik_Web_UI_WebResource_axd" verb="*" 
      preCondition="integratedMode" path="Telerik.Web.UI.WebResource.axd" 
      type="Telerik.Web.UI.WebResource" />

4. Add any RadControl to your View Page. Check the additional resources for more specific guidelines on how to use RadControls for ASP.NET AJAX in ASP.NET MVC. In this example RadMenu will be used.

CopyASPX

<telerik:RadMenu runat="server" ID="RadMenu1" Skin="Web20">
    <Items>
        <telerik:RadMenuItem Text="Home" NavigateUrl='<%# Url.Action("Index", "Home") %>' />
        <telerik:RadMenuItem Text="About" NavigateUrl='<%# Url.Action("About", "Home") %>' />
    </Items>
</telerik:RadMenu>

5. Data-binding expressions ( <%# %>) are used to specify the NavigateUrl of the item. This is required in order to retrieve the correct URL to the specified action and controller. The proper resolution of data-binding expressions requires a call to the DataBind method of RadMenu. Let’s add one:

CopyASPX

<%
  RadMenu1.DataBind();
%>
<telerik:RadMenu runat="server" ID="RadMenu1" Skin="Web20">
    <Items>
        <telerik:RadMenuItem Text="Home" NavigateUrl='<%# Url.Action("Index", "Home") %>' />
        <telerik:RadMenuItem Text="About" NavigateUrl='<%# Url.Action("About", "Home") %>' />
    </Items>
</telerik:RadMenu>

6. Build and run.

Tip

If you stumble upon the following error when running the application: The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>). The most possible cause is that the StyleSheet Register declaration (most often it is located in the MasterPage) should be wrapped with RadCodeBlock, e.g: CopyASPX <telerik:RadCodeBlock ID="RadCodeblock1" runat="server"> <%: Html.Telerik().StyleSheetRegistrar().DefaultGroup(group => group.Add("telerik.common.css").Add("telerik.default.css").Combined(true).Compress(true)) %> </telerik:RadCodeBlock>

This is how the final result should look like:

 

Clicking on the menu items should navigate to the proper controller actions (Home and About in this example).