TextArea with html output

Question

_{Tuesday, September 3, 2013 5:32 PM}

Hi.

I am using a Readonly textarea to display some information for the user. I am NOT looking for an HTML editor control but what I want to be able to do is to render HTML content in the textbox if possible.

I am using MVC 4 and Razor.

IS there a way to do this using TextArea/For?

All replies (5)

_{Wednesday, September 4, 2013 3:29 AM ✅Answered}

An alternative is to use CSS and render your HTML within a DIV. The CSS word wraps the content and gives you a vertical scroll bar to allow you to scroll the contents.

<style type="text/css">
    .divTextArea {
        padding: 2px;
        width: 250px;
        height: 200px;
        border: solid 1px black;
        overflow: scroll;
        overflow-y: scroll;
        overflow-x: hidden;
    }
</style>

<div class="divTextArea">
    Insert your text/html here
</div>

_{Wednesday, September 4, 2013 9:48 AM ✅Answered}

Fixed... should use @Html.Raw(stringHere) when rendering.

thanks

_{Tuesday, September 3, 2013 5:40 PM}

TextAreas won't render HTML.  What you'll likely need to do instead is to display the contents in a div, and allow the user to click on the div to replace it with a textarea.  This is mostly all javascript.

Something like this:

<div id="myDiv" onclick="showForm();><%=contents%></div>
<div id="formDiv" style="display:none;">
    <textarea id="myTextArea" style="display:none;"><%=contents%></textarea>
    <input type="button" onclick="submitForm();" value="submit"/>
</div>


function showForm()
{
    var myDiv = document.GetElementById("myDiv");
    var formDiv = document.GetElementById("formDiv");
    myDiv.style.display = "none;
    formDiv.style.display = "";
}

_{Wednesday, September 4, 2013 9:36 AM}

Thanks.

so using the CSS approach almost works except for some reason, the HTML in the text is not being rendered as HTML.

my HTML string looks like this:

"This is some <b>HTML stuff</b>"

when doing @Model.HtmlText to render the content, I don't get the bold text at all. It renders it with the tags as literal

_{Thursday, November 28, 2013 5:37 AM}

Thanks.