Telerik Rich Text Editor and ASP.NET MVC

  • Posted by liammclennan on May 28, 2009
  • 3 comments

The good people at Telerik have been kind enough to integrate their UI controls with the ASP.NET MVC framework so that we don't have to go without glorious and essential features like spell checking and paste-from-word. Their website does provide guidance for doing this, however I found that their instructions don't quite work so I will post my own. These instructions cover the text editor but the other controls should be similar. I won't go though everything, just the bits that Telerik left out, so make sure you read the official documentation.

Install the Telerik RAD controls

That name bugs me. They might as well have called it the 'like-cowabunga-narly-rad-fully-awesome-mega-xp-titanium-control-suite'. If, like me, you don't fancy running a 300M installer you can instead download  a zip and manually copy the files you need. I recommend this approach since it terns out you only need one file.

Add a Reference to Telerik.Web.UI.dll

All that is required is to add a reference from your MVC project to the Telerik.Web.UI.dll. Here is the first place where the telerik documentation let me down. They say to reference the dll in the bin directory but if you are using .NET 3.5 then you need to reference the dll in the bin35 directory.

Add some things to Web.config

Read the instructions and add the required handlers to web.config. If you want the editors dialog boxes to work then you must also add a http handler for that. The changes to the web.config are:

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

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

If you add the editor control to an mvc partial then you must include the rad stylesheet manager and rad script manager in the partial. You must also include the rad script manager in the view that includes the partial. Weird I know. Here is an example of what the partial might look like:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<telerik:RadScriptManager ID="scriptmanager2" runat="server"></telerik:RadScriptManager>

<%
    editor.Content = Model.Content;
%>
<telerik:RadStyleSheetManager ID="stylesheetmanager" runat="server" ></telerik:RadStyleSheetManager>
<telerik:RadEditor runat="server" ID="editor" DialogHandlerUrl="~/Telerik.Web.UI.DialogHandler.axd"  /> 
</div>

Conclusion

I was impressed that Telerik have any MVC support at all, and only slightly disappointed that their instructions left a few things out. I usually find the RAD suite too heavy weight. In the past adding it to a project has added something like 10,000 files. However, in this case I have been able to add the editor control to an application in a clean and lightweight manner. Telerik win because it is a good editor and it has a trial version, unlike Tiny MCE which has no trial for the image upload functionality is not guaranteed to work with MVC.

 


Comments

Comments are closed