ASP.NET Ajax Controls in ASP.NET MVC

The Q3 2008 release is now out and I am glad to inform you that RadScriptManager provides support for ASP.NET MVC view and master pages. What this means is that RadControls for ASP.NET Ajax can be used in ASP.NET MVC. We have tested with the ASP.NET MVC Beta 1 release.

Using RadControls for ASP.NET Ajax in ASP.NET MVC View Pages

1. Add an instance of RadScriptManager to your view page (or master page). Make sure the required HTTP handlers are properly registered (can be done from the smart tag in design time).

2. Add a control to your view page or master page. The following controls require further configuration in order to properly work in ASP.NET MVC:

• RadEditor
  • The dialog HTTP handler’s extension should be changed to "axd":
    Before:
    

    <add path="Telerik.Web.UI.DialogHandler.aspx" ... />  

    After:
    

    <add path="Telerik.Web.UI.DialogHandler.axd" ... />

  • The DialogHandler property of RadEditor should be set to
    "~/ Telerik.Web.UI.DialogHandler.axd":
    

    <telerik:RadEditor runat="server" ID="RadEditor1" DialogHandlerUrl="~/Telerik.Web.UI.DialogHandler.axd" /> 

  • RadEditor should be placed inside a form tag.
• RadUpload
  • The progress manager HTTP handler’s extension should be changed to "axd":
    Before:
    

    <add path="Telerik.RadUploadProgressHandler.ashx" ... />

    After:
    

    <add path="Telerik.RadUploadProgressHandler.axd" ... />

  • Set the AjaxUrl property of RadProgressManager to "~/Telerik.RadUploadProgressHandler.axd":
    

    <telerik:RadProgressManager runat="server" ID="RadProgressManager1" AjaxUrl="~/Telerik.RadUploadProgressHandler.axd"/> 

  • RadUpload should be placed inside a form tag
• RadSpell
  • The dialog HTTP handler’s extension should be changed to "axd":
    Before:
    

    <add path="Telerik.Web.UI.DialogHandler.aspx" ... />

    After:
    

    <add path="Telerik.Web.UI.DialogHandler.axd" ... /> 

  • The HandlerUrl property of RadEditor should be set to "~/ Telerik.Web.UI.DialogHandler.axd":

Samples

Using navigation controls and linking to actions

This approach is useful when you need a navigation control (RadTreeView, RadTabStrip, RadPanelBar, RadMenu, RadToolBar) to link to actions.

<% RadTreeView1.DataBind() %> 
 
<telerik:RadTreeView runat="server" ID="RadTreeView1"> 
    <Nodes> 
        <telerik:RadTreeNode NavigateUrl='<%# Url.Action("Index")%>' Text="Index" /> 
        <telerik:RadTreeNode NavigateUrl='<%# Url.Action("Home")%>' Text="Home" /> 
    </Nodes> 
</telerik:RadTreeView> 

DataBinding RadGrid

<% 
    RadGrid1.DataSource = ViewData["MyBusinessObjectCollection"]; 
    RadGrid1.DataBind(); 
%> 

<telerik:RadGrid runat="server" ID="RadGrid1" />  

For a more advanced example check this blog post. You can also go and check the live demo.

Uploading Files with RadUpload

<% using (Html.BeginForm("Upload", "Home")){%> 
 
<telerik:RadUpload runat="server" ID="RadUpload1" ></telerik:RadUpload> 
<telerik:RadProgressManager runat="server" ID="RadProgressManager1" AjaxUrl="~/Telerik.RadUploadProgressHandler.axd"/> 
<telerik:RadProgressArea runat="server" ID="RadProgressArea1"/> 
 
<input type="submit" value="Upload" /> 
 
<%} %>  

public ActionResult Upload() 
{ 
    if (Request.Files.Count > 0) 
    { 
        Request.Files[0].SaveAs("path_to_file"); 
    } 
    return View("Index"); 
} 

Known Limitations

RadAjaxManager, RadAjaxPanel, postbacks and ViewState are not supported

By default ASP.NET view pages don’t have server form tag (<form runat=”server”>) which is required for ViewState and postbacks support. Partial rendering is also not supported by ASP.NET MVC and as a result RadAjaxManager and RadAjax panel are not working.

RadScheduler does not support ASP.NET MVC at the time being.

RadScheduler relies on postbacks (or ajax requests) in order to insert, update, delete appointments. Support for ASP.NET MVC will be implemented in the upcoming Q1 2009 release.

RadGrid’s built-in insert, update, delete, sort, group are not supported

All those features rely on postbacks by default and as such are not supported in ASP.NET MVC. This blog post describes how to work around this problem.

Skin and base CSS files should be registered by hand when using the PartialView method

Alternatively you can use RadStyleSheetManager in the user control used in PartialView.

Updates via the built-in ASP.NET Ajax support are not supported

The HTML of the controls is successfully updated however JavaScript is not executed by the built-in ASP.NET MVC Ajax implementation. We would provide a workaround in the future.

Only the ASP.NET rendering engine is supported

This stems from the fact that RadControls for ASP.NET Ajax depend on the ASP.NET Page and control lifecycle.

Future

A full-blown ASP.NET MVC application built on top of RadControls for ASP.NET Ajax and Telerik OpenAccess is already in the works. I will blog when it is ready.