Solved

HTML displaying rich text (html format)

Posted on 2014-12-24
13
24 Views
Last Modified: 2016-04-20
I have a HTML5 file such as :

<div>Value= @item.Description</div>
<div>Hardcode=<p><strong>First Item of Group A-0 description</strong></p><ul><li>First line</li><li>Second line</li></ul><p>-- END --</p><p>
</div>
The value of @item.Description is: =<p><strong>First Item of Group A-0 description</strong></p><ul><li>First line</li><li>Second line</li></ul><p>-- END --</p><p>

The output:
Value=<p><strong>First Item of Group A-0 description</strong></p><ul><li>First line</li><li>Second line</li></ul><p>-- END --</p><p>

Hardcode=
First Item of Group A-0 description

First line
Second line
-- END --

How do I resolve this to display:

Value=
First Item of Group A-0 description

First line
Second line
-- END --
0
Comment
Question by:chuang4630
  • 6
  • 4
13 Comments
 
LVL 51

Expert Comment

by:HainKurt
ID: 40516751
i am lost :) screenshots please...
0
 
LVL 1

Author Comment

by:chuang4630
ID: 40516761
I have attached the screen capture
html01.PNG
0
 
LVL 1

Author Comment

by:chuang4630
ID: 40516763
Here is the code:
                                        <div>Value=@Item.Description</div>
                                       
                                        <div>Hardcode=<p><strong>First Item of Group A-0 description</strong></p><ul><li>First line</li><li>Second line</li></ul><p>-- END --</p><p></div>
0
 
LVL 1

Author Comment

by:chuang4630
ID: 40516767
Here is the screen shots of the rendered html (from Inspect element)
html02.PNG
0
 
LVL 51

Expert Comment

by:HainKurt
ID: 40516769
shooting in the dark :)

<div>
Value= 
<p><strong>First Item of Group A-0 description</strong></p>
<ul><li>First line</li><li>Second line</li></ul>
<p>-- END --</p>
</div>

Open in new window

0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 12

Expert Comment

by:FarWest
ID: 40516770
did you try to use surround it with <pre> tag
0
 
LVL 1

Author Comment

by:chuang4630
ID: 40516780
I have tried.
<pre>@Item.Description</pre>.

But there is no change.  Basically, the html5 treats the value of @Item.Description as string, so it puts " " on the output (see it in the screenshots). What it should do is to display the innerHTML.  But I do not know how to do it in the HTML. This is a small snippet in the @foreach loop. I would like to do it in the HTML, so it is readable.

How do I force browser to treat the value of @Item.Description as HTML markup, NOT the string?
0
 
LVL 51

Expert Comment

by:HainKurt
ID: 40516783
i dont see what you post here...

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>

<div>Value= @item.Description</div>
<div>Hardcode=<p><strong>First Item of Group A-0 description</strong></p><ul><li>First line</li><li>Second line</li></ul><p>-- END --</p><p>
</div>
The value of @item.Description is: =<p><strong>First Item of Group A-0 description</strong></p><ul><li>First line</li><li>Second line</li></ul><p>-- END --</p><p>

</body>
</html>

Open in new window


here is html5 file... save it to html file and open, you will not see what you posted...

post your code, not rendered html, or post view source, not from inspector...
0
 
LVL 1

Author Comment

by:chuang4630
ID: 40516810
I am working on the MVC project. So the @item.Description is the value from the model. It is a html markup.
However, when I display it, it shows the markup language, instead of the rendered html:

<div>Value= @item.Description</div>

For example,  <li>First line</li>.  It display as straight string "<li>First line</li>". What I want is the rendered version of the it.

If you look at the "view source", you will see :
<div> "<li>First line</li>"</div>

Pay attention to the quotation mark, that forces the browser to treat it as a string. That is wrong. How do I fix it?
0
 
LVL 51

Expert Comment

by:HainKurt
ID: 40516814
even this one

<div>"<li>First line</li>"</div>

looks ok in browser! like this:

"
* First Line"

Open in new window


or this

"
* First Line
"

Open in new window

please post full html rendered... and/or code that produces it...
0
 
LVL 1

Accepted Solution

by:
chuang4630 earned 0 total points
ID: 40516835
I got it.

@Html.Raw(@item.Description)
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

895 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now