Edit HTML file using MVC w/ ACE Editor

Question

I am trying to build a page which can read the contents of a HTML file and output it's data to the screen.

To get the HTML files data I am doing:

ViewBag.PageHtml = System.IO.File.ReadAllText(@"W:\1.html");

Then in the View, I have the following

 @Html.Raw(ViewBag.PageHtml)

The HTML data is this:

<html>
    <head>
        <title>Test Title</title>
    </head>
    <body>
        <p>The body</p>
    </body>
</html>

The result of the Html.Raw is this, some how the <html><head> etc tags are being removed.

<title>Test Title</title>
<p>The body</p>

Can someone please explain to me why this is, and how I can prevent it from happening?

Thanks in advance

score 1 · Answer 1 · answered Mar 22 '15 at 11:30

I managed to solve this myself, the first step was to add a hidden textarea field.

<textarea id="templateHtml" style="display: none">@ViewBag.PageHtml</textarea>

I left the div empty like this

<div id="txtArea"></div>

Then I just used the value of the text area as the value of the ACE Editor.

var el = document.getElementById("txtArea");
editor = ace.edit(el);
editor.session.setValue($("#templateHtml").val());
editor.setTheme("ace/theme/github");
editor.getSession().setMode("ace/mode/html");
editor.setOption("showPrintMargin", false);

Glad to see you solved it! This was a more editor-specific question, would have been nice if you were more specific in your question. Either way, good work! — mausworks, Mar 22 '15 at 12:04

score 0 · Answer 2 · edited May 23 '17 at 11:50

This is interesting to see.

It seems as if @Html.Raw sanitizes the input; which is usually a good idea.
In your case however; it seems to not help you that much.

However, having multiple <html>and <body> tags is not allowed. See this question: Multiple <html><body> </html></body> in same file

If you know that these tags are removed, then simply re-add them. With that said however; i think you are having the wrong approach to this.

If all you want to do is return a static HTML-file from a HTML-document, then you could just serve this "as is". If you are looking to do this "dynamically" somehow (maybe from a database or similar) then you should probably do it directly from the controller using a ContentResult.

namespace Project.Controllers
{
    public class HomeController : Controller
    {
        public ContentResult ServePureHtml()
        {
            string htmlData = System.IO.File.ReadAllText(@"W:\1.html");

            return Content(htmlData, "text/html");
        }
    }
}

You could use this as a partial result as well. Using Html.Action or Html.RenderAction

For instance

<!-- ... -->
<div class="editor-content">
    @{
         Html.RenderAction("ServePureHtml", "Home");
    }

</div>
<!-- ... -->

Also, be cautious of using the ViewBag. Its behavior is usually not amazing.

But are you trying to add a full HTML-document to a already existing document? This is (as I stated) not allowed. If you _must_ add the entire document (including the html, head and body tags), then use a iframe. Your question is still a bit fuzzy. — mausworks, Mar 22 '15 at 11:59
Sorry for the fuzzyness, my main goal is to edit the contents of the HTML. So no, I am not adding two sets of HTML tags etc, I just want to allow people to edit the contents of the .html file from the browser. — UnitStack, Mar 22 '15 at 12:04

Edit HTML file using MVC w/ ACE Editor

2 Answers2