How to use Kendo user interface editor in asp.net mvc3 with razor?

Question

I use the editor from the Kendo user interface, so I have a big problem.

I do not know how the displayed items are returned by the editor.

The editor converts something like:

<img src="someurl" /> 

in

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

and I continue to convert the string to the database and try to display it with:

 @Html.Raw(item.description) 

where description is the string returned by kendo.

Therefore, I have no idea how to correctly display it in a view

Any help would be appreciated.

Answer 1

There is a KendeUI editor option called encoded that sets whether the editor should send encoded HTML tags or not.

The default value for encoded is true

If you do not want to store unencrypted 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 validation activist will abort your request.

If you use strongly typed views, what you can do is use AllowHtmlAttribute in the 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 will have no effect in .NET 4.0:

 <httpRuntime requestValidationMode="2.0"/> 

Answer 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

Answer 3

An easier way to do this is to make changes to the controller; there is no model in the field of view. So:

View

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

Model

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

controller

 Editor = Server.HtmlDecode(Editor); 

Htmldecode

Answer 4

Editor templates created from .NET Wrappers no longer work. Here is the fix.

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