Telerik Extensions for ASP.NET MVC

This topic shows how to use the Editor UI component in an ASP.NET MVC application.

Important

All Telerik UI components need a ScriptRegistrar component in order to output their JavaScript objects and register their JavaScript files. The ScriptRegistrar component should be defined *after* all other UI components in the page. If you create the components on the client-side and do not use the MVC extensions, you need to manually register all requried JavaScript files. For further information check this help topic (Step 4 - Register Scripts)

This topic contains the following sections.

Prerequisites

Before proceeding make sure that:
  • You have all the required components installed.
  • Make sure that your ASP.NET MVC project refers the Telerik.Web.Mvc.dll assembly and you have a ScriptRegistrar and a StyleSheetRegistrar defined in your application (either in the master page or in the view where you are going to use the Grid UI component).
  • All required JavaScript and CSS files are properly copied to your project. This is outlined in here - steps 4 and 5.

Editor Declaration

The following example shows how to add the Editor UI component to an existing ASP.NET MVC view:

CopyView
<%= Html.Telerik().Editor()
        .Name("Editor")
        .Value("<strong>Hello world!</strong>")
%>
Use the Value method to set the HTML content of the editor. As an alternative you could use the Value overload:
CopyView
<% Html.Telerik().Editor()
       .Name("Editor")
       .Value(()=>
       {
           %>
               <strong>Hello world!</strong>
           <%
       })
       .Render();
%>
Important
There are two important things to note when using the the Value method:
  1. It is advisable to HTML encode the content by using > instead of > and < instead of <. This is required in order for the editor output to be valid XHTML.
  2. The Render method should be used to output the editor.

You can also use the EditorFor method to declare an editor in your view. Here is how to do this (assuming that your view is strongly typed for the Employee).

CopyView
<%= Html.Telerik().EditorFor(employee => employee.Notes)%>

Setting the Editor Value

As demonstrated in the Declaration section you should use the Value or Value method to set the value of the editor. This value will be then displayed by the editor so the end user can edit it.

In a real world scenario this data would be retrieved from a backend store (e.g. a database) and then passed from the controller to the view via ViewData:

CopyController
public ActionResult Index()
{
     // Set up a new Linq to SQL data context to the Northwind database.
     var northwind = new NorthwindDataContext();
     // Retrieve the first record from the Employees table.
     var employee = northwind.Employees.First();
     // Store its Notes property in ViewData. It will be set as the editor value.
     ViewData["notes"] = employee.Notes;

     return View();
}
CopyView
<%= Html.Telerik().Editor()
        .Name("notes")
        .Value((string)ViewData["notes"])
%>
Note
The editor will look in ViewData for an item whose key is the same as the editor's Name. If such an item is found the editor will use it as its value.

Getting the Editor Value

Getting the value of the editor is very similar to getting the value of a textbox. The following example shows how to get the value of the editor after posting a form.

  1. Make sure the editor is placed within a <form>.
    CopyView
    <% Html.BeginForm("Save", "Home"); %>
    <%= Html.Telerik().Editor()
            .Name("notes")
            .Value((string)ViewData["notes"])
    %>
    <input type="submit" value="Save" />
    <% Html.EndForm(); %>
  2. In your controller add an action method which has a parameter named after the Name of the editor (which is "notes" in this case):
    CopyController
    public ActionResult Save(string notes)
    {
       return View();
    }
  3. That parameter will contain the HTML encoded value of the editor. It is important that you use the HtmlDecode method before using the value:
    CopyController
    public ActionResult Save(string notes)
    {
       // HTML decode the value before using it.
       notes = System.Web.HttpUtility.HtmlDecode(notes);
    
       return View();
    }
    Note
    The value of the editor is encoded before posting in order to avoid request validation exceptions.