[Solved] Editor to edit documents

[Jessica]

I am trying to use the Editor to edit documents.  These documents are located in my solution, but the links are also in a database so that when a link is clicked on a pervious page you know which document needs to be edited.  I am very very new to MVC and quite frankly I do not know what I am doing.  So here is what I have currently:

<iframe src="(~/TaskHtml/@Html.Telerik().EditorFor(model => model.Url)" width="99%" height="500" frameborder="0">
                            </iframe>

                @Html.ValidationMessageFor(model => model.Url)

It is giving me the error:

Microsoft JScript runtime error: Unable to get value of the property 'contentWindow': object is null or undefined

If I click continue, I then get the follow error inside the Editor:

HTTP Error 400 - Bad Request. ASP.NET Development Server 10.0.0.0

So obviously my code is wrong, but I do not know what to do to fix it.  So I am looking for some guidance please.

[Dimo]

Hi Jessica,

I am not sure I understood what exactly are you trying to do, but the following string does not produce a valid URL:

(~/TaskHtml/@Html.Telerik().EditorFor(model => model.Url)

URLs in MVC should be constructed like

~ / [Controller] / [View] / [optional parameters].

The HTML extensions ( Html.Telerik()... ) should be used inside the view markup, not in URLs.

I recommend you to improve your general knowledge about the MVC platform, otherwise it will be very hard for you to do your job.

Let me know if you have additional questions related to our components.

Greetings,
Dimo
the Telerik team

[Jessica]

Hello Dimo,

Thank you for the reply.  I have since developed a whole MVC application.  The only thing that I cannot get working it the Telerick Editor.  So what I am trying to do is edit documents with the Editor that are located in my application.  To explain below a little bit.  This part of the code (model => model.Url) is the where the last part of the URL exists in the database.  The first part for the code (~/TaskHtml/ is the folder where the documents exist in the application.

So when I use this code:

<iframe src="(~/TaskHtml/@Html.Telerik().EditorFor(model => model.Url)" width="99%" height="500" frameborder="0">
  </iframe>

it displays in the iframe, but I want the document to display in the Editor so that the documents can be edited and I cannot get it to work.

Thank you,
Jessica

[Dimo]

Hi Jessica,

I am glad that my assumption about your scenario was correct. However, as I mentioned in my previous reply, you can't put an HTML extension declaration inside a URL string. The part in red is wrong, you simply can't have it there:

~/TaskHtml/@Html.Telerik().EditorFor(model => model.Url)

If you take a look at the HTML markup, which is generated by the above code (which will be non-valid), you will see what I mean.

In addition, even after you manage to load the desired URL inside the iframe, you can't use the MVC Editor to edit it directly. You need to load the document as an HTML string using server-side code, and then set it as a string value to the Editor using its Value() method.

http://www.telerik.com/help/aspnet-mvc/telerik-ui-components-editor-introduction.html#SetContent

http://demos.telerik.com/aspnet-mvc/editor/

Regards,
Dimo
the Telerik team

[Jessica]

Thanks Dimo you are correct that does not work.  This does

<iframe src="(~/TaskHtml/@Html.DisplayFor(model => model.Url)" width="99%" height="500" frameborder="0">
</iframe>

for dispay only.

I will have to work on loading the file into server side code.  I am not that familar with server-side code because normally I am a C# programmer, we are just trying something new. 

Thank you for the information and guidance.

[Jessica]

Dimo, 

I wrote some code but the MVC Telerik Editor will not display it nor will it allow me to type anything in the Editor.  I know my code works because I can get the html to display after the Editor.   Please let me know what you think.  Thanks!!!!

           @{

                var htmlFilePath = "~/TaskHtml/" + Model.Url;

                var fileContents = "";

                var physicalPath = Server.MapPath(htmlFilePath);

                fileContents = File.ReadAllText(physicalPath);

 

                Html.Telerik().Editor()

                    .Name("editor")

                    .HtmlAttributes(new { style = "height:500px" })

                    .Encode(true)

                    .Value(@<text>@fileContents</text>).Render();

            }

                //information in the file does display here

               <p>@fileContents</p>

[Dimo]

Hi Jessica,

You should not use @<text> inside the Value() statement, because it double-encodes the value. In addition, please note that the Editor value should contain only the part of the HTML page, that is inside the <body> tag, not a complete web page.

Greetings,
Dimo
the Telerik team

[Jessica]

It is inside a @using (Html.BeginForm()) tag and then inside a <div> also, the editor shows up but it is not editable and no matter what I put inside the Editor it does not show up.  I copied the Hello World example and it does not show up it will not allow me to type anything in it.  I have taken out the <text> tag and I still get nothing.

<div>
           @{
                string htmlFilePath = "~/TaskHtml/" + Model.Url;
                string fileContents = "";
                string physicalPath = Server.MapPath(htmlFilePath);
                fileContents = File.ReadAllText(physicalPath);

                Html.Telerik().Editor()
                    .Name("editor")
                    .HtmlAttributes(new { style = "height:500px; width:99%;frameborder:0" })
                    .Encode(false)
                    .Value(@fileContents).Render();


            }
                //html file shows here
               <p>@fileContents</p>
           </div>

[Dimo]

Hi Jessica,

I already tested your code snippet on my side and apart from the notes provided previously, it worked as expected. In case you have no Javascript errors, I recommend you to prepare a simple standalone runnable example and send it, so that I can inspect it locally.

Regards,
Dimo
the Telerik team

[Jessica]

Here is my entire page's code:

I get no Javascript errors or anything but the Editor is not editable at all.

@model BbkValidation.Models.Task
@{
    ViewBag.Title = "Edit";
}
<!--<h2>Edit</h2>-->
<h2>@Html.DisplayFor(model => model.Title)</h2>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)
    <fieldset>
        @Html.HiddenFor(model => model.TaskID)
        @Html.HiddenFor(model => model.Title)
        @Html.HiddenFor(model => model.Url)
        <div style="overflow: auto; width: 100%;">
            <div class="editor-field;" style="margin-top: 5px; margin-bottom: 20px; float: left">
                Task Status<br />
                @Html.RadioButton("Status", "Open") Open<br />
                @Html.RadioButton("Status", "Meditech") Meditech<br />
                @Html.RadioButton("Status", "Closed") Closed<br />
                @Html.ValidationMessageFor(model => model.Status)
            </div>
            <div style="float: right; margin-top: 5px; margin-bottom: 5px; margin-left: 17px">
                Notes<br />
                @Html.TextAreaFor(model => model.Notes)
                @Html.ValidationMessageFor(model => model.Notes)
            </div>
            <!----------------replace the following lame iframe with telerik Html Editor-->
           <div>
           @{
                string htmlFilePath = "~/TaskHtml/" + Model.Url;
                string fileContents = "";
                string physicalPath = Server.MapPath(htmlFilePath);
                fileContents = File.ReadAllText(physicalPath);

                Html.Telerik().Editor()
                    .Name("editor")
                    .HtmlAttributes(new { style = "height:500px; width:99%;frameborder:0" })
                    .Encode(false)
                    .Value(@fileContents).Render();


            }
                //html file shows here
               <p>@fileContents</p>
           </div>
        </div>
        <p>
            <input type="submit" value="Save" />
            @Html.ActionLink("Cancel, back to list", "Index")

        </p>

        <!-- other content -->


    </fieldset>

}

[Dimo]

Hi Jessica,

Thank you for your reply, however, in order to track the cause of the problem, I need a complete runnable project.

Kind regards,
Dimo
the Telerik team