CODEWITHSUNDEEP
htmlcssasp.net-mvc
DarkW1nter
DarkW1nter

Reputation: 2851

HTML.TextAreaFor - removing html tags for display only

In an MVC application I have to use @HTML.TextAreaFor to display some text from a database, the trouble is sometimes that text may have HTML tags within it and I can't see a way to remove those for display only.

Is it possible to do this in the view (maybe with CSS?) without having to strip the tags in the controller first?

EDIT

The data coming from the controller contains html tags which I do not want to remove, I just don't want to display them

Normally I would use @HTML.Raw but it has to work in a @HTML.TextAreaFor control.

Upvotes: 3

Views: 702

Answers (4)

DarkW1nter
DarkW1nter

Reputation: 2851

Sorted this by changing TextAreaFor toTextBoxFor and setting a formatted value.

@Html.TextBoxFor(x => Model.MyItem, new { @class = "form-control", @required = "true", Value = Regex.Replace(Model.MyItem, "<.*?>", String.Empty) })

Upvotes: 0

Ben Sampica
Ben Sampica

Reputation: 3412

There's some nice rich text editors libraries like CK Editor, Quill, or TinyMCE that can display HTML while still maintaining the editor capabilities of being a text editor. All of these libraries have capabilities of being read-only as well if that's necessary.

Example from Quill -

enter image description here

Upvotes: 0

elahe karami
elahe karami

Reputation: 693

You can do this by using a razor code in your view. 

@Html.Raw(HttpUtility.HtmlDecode(Model.Content))

if I set Model.Content to this string "<strong>This is me</strong><button>click</button>", the code above will render it like HTML code and will have a strong text next to a button as an output like the image below:

enter image description here

Upvotes: 0

Murat Yıldız
Murat Yıldız

Reputation: 12040

If you want to decode Html returned from the Controller you can use the following JavaScript method:

This method decodes "Chris' corner" to "Chris' corner". 

var decodeEntities = (function () {
// this prevents any overhead from creating the object each time
var element = document.createElement('div');

function decodeHTMLEntities(str) {
    if (str && typeof str === 'string') {
        // strip script/html tags
        str = str.replace(/<script[^>]*>([\S\s]*?)<\/script>/gmi, '');
        str = str.replace(/<\/?\w(?:[^"'>]|"[^"]*"|'[^']*')*>/gmi, '');
        element.innerHTML = str;
        str = element.textContent;
        element.textContent = '';
    }
    return str;
}
return decodeHTMLEntities;
})();

Upvotes: 0

Related Questions