How use Kendo UI Editor in asp.net mvc3 with razor?

Question

I'm using editor from Kendo UI, so I have big problem.

I don't know how display items which are returned by editor.

Editor convert something like:

<img src="someurl" />

to:

lt;p><img src="someurl"/></p>

and I keep converted string in database, and try display it with:

@Html.Raw(item.description)

where description is string returned by kendo.

So I have no idea how display it correctly in my View

Any help would be appreciated.

Solution 1

There is an option of the KendeUI editor called encoded which configures whether the Editor should submit encoded HTML tags or not.

The default value for encoded is true

If you wan't to store the unencoded text use this sniplet when creating your editor:

$("#Editor").kendoEditor({
     encoded: false
 });

But because you are not sending encoded text to the server the Asp.net request validator kicks in and it will abort your request.

If you are using strongly typed views what you can do is to use the AllowHtmlAttribute on your model property:

View:

@model MyModel

@using(Html.BeginForm("SomeAction", "SomeController"))
{
     @Html.TextAreaFor(m => m.Editor)
     <input type="submit" value="Save" />
}

<script type="text/javascript">
   $(function(){
      $("#Editor").kendoEditor({
        encoded: false
      });
   });
</script>

Model:

public class MyModel
{
    [AllowHtml]
    public string Editor { get; set; }
}

Controller action

public ActionResult SomeAction(MyModel myModel)
{
    //Save to db, etc.
}

You also need to set the following in your web.config or this attribute won't have effect in .NET 4.0:

<httpRuntime requestValidationMode="2.0"/>

Solution 2

I found this solution for MVC: in View

<div class="editor-field">
    @(Html.Kendo().EditorFor(model => model.HtmlField).Encode(false))
    @Html.ValidationMessageFor(model => model.HtmlField)
</div>

in model:

   [DataType(DataType.Html)]
   [AllowHtml]
   public string HtmlField{ get; set; }

That was enough

Solution 3

Simplier way to do it is make changes in controller, no in view and model. So:

View

$("#Editor").kendoEditor();

Model

public class MyModel
{
    public string Editor { get; set; }
}

Controller

Editor = Server.HtmlDecode(Editor);

HtmlDecode

Solution 4

The editor templates generated from the .NET Wrappers aren't working any more. Here is a fix.

http://pknopf.com/blog/kendo-ui-editor-templates-for-asp-net

View more solutions