1

In ASP.NET MVC 4 how can I render HTML on load. I am saving some html string encoded in this form in my sql server database as type nvarchar(max).

<li><li><img id="fbPic" src="http://graph.facebook.com/567818188/picture" style="display: inline; padding-right: 10px;"><b>Bernice Zerafa</b></li><pre class="word-wrap" style="margin-left: 10%;">hellooo</pre></li>

*EDIT:*Please note that the above string is being html unencoded correctly therefore it actually shows like this:

<li><li><img id="fbPic" src="http://graph.facebook.com/567818188/picture" style="display: inline; padding-right: 10px;"><b>Bernice Zerafa</b></li><pre class="word-wrap" style="margin-left: 10%;">helloooo </pre></li>

Now on load of the page I will have a list of those html strings which are all list items with various childnodes to be appended to a unordered list tag. The list is returning ok. But it's only being displayed as is on the page i.e. the actual string is showing and the html is not being rendered.

This is my Controller Action:

public ActionResult LoadPosts(int groupId)
{
     var postedText = new List<string>();
     IEnumerable<Post> posts;

     using (CodeShareEntities conn = new CodeShareEntities())
     {
          posts = conn.Posts.Where(g => g.GroupId == groupId); 
          foreach (var post in posts)
          {
               postedText.Add(post.PostData);
          }
     }

     return Json(new { PostedText = postedText });
}

This is my jQuery Ajax call on load of the page. #posts is an empty <ul> in my html

 jQuery.ajax({
     type: 'POST', 
     url: '/Groups/LoadPosts',
     data: { groupId: grpid },
     success: function (postData) {
          $.each(postData, function (index, postText) {
                 **postText = htmlUnencode(postText);**
                 $("#posts")[0].innerHTML = postText;

                //// what can I do here instead of innerHTML to be 
                //// able to view the html correctly ? 
                //// append() and insert() methods in JQuery have the same result
                //// I found something called @Html.Raw(Json.Encode()) maybe
                //// this is relevant here ? How can I use this correctly ?

          });

          $('#posts').css('background', 'white');
     },
     traditional: true
  });

Any help would be greatly appreciated!

2 Answers 2

1

It seems like your html is double encoded. Try this

     $.each(postData, function (index, postText) {
             **postText = htmlUnencode(postText);**
             $("#posts").append($($("<div/>").html($("<div/>").html(test).text()).text()));
      });

Here is a Fiddle sample.

Sign up to request clarification or add additional context in comments.

6 Comments

That did the trick! I've been searching for ages! thought I had to render it in some other way! Thanks!!
hmm.. But see if there is a better way to do it. Also it seems like it is double encoded ex:- instead of &amp;lt; it should be &lt; i guess. YOu are welcome btw... :)
so what are you doing exactly in this code please? mmm I'll look into that too!
@Bernice try this. In your server before sending back the string do this htmlstring = WebUtility.HtmlDecode(htmlstring) and send back and in the ajax call just do it once. $("#posts").append($("<div/>").html(test).text())
oh I see! I found what I was doing! While testing I also did WebUtility.HtmlEncode in the controller so I was encoding it from the js side and there too! Thanks for the explanation!
|
0

just by looking at your

&amp;lt;li&amp;gt;&amp;lt;li&amp;gt;&amp;lt;img id=&amp;quot;fbPic&amp;quot; src=&amp;quot;http://graph.facebook.com/567818188/picture&amp;quot; style=&amp;quot;display: inline; padding-right: 10px;&amp;quot;&amp;gt;&amp;lt;b&amp;gt;Bernice Zerafa&amp;lt;/b&amp;gt;&amp;lt;/li&amp;gt;&amp;lt;pre class=&amp;quot;word-wrap&amp;quot; style=&amp;quot;margin-left: 10%;&amp;quot;&amp;gt;hellooo&amp;lt;/pre&amp;gt;&amp;lt;/li&amp;gt;

i doubt it going to render correctly it not seems like a valid html and you constantly appending so you might use something like

  $("#posts").append(postText);

5 Comments

no it is valid html and in fact the browser shows it as normal tags nested within an <li> . Tried append but still the text was being shown in the ul instead of the actual nodes
maybe you did not paste it correctly but it does not look valid to me jsfiddle.net/hdvLf
you are right. I forgot to include the unencoding back to proper tags. Please see edit. I included how it's being shown exactly
jsfiddle.net/hdvLf/1 so you want to see this bus instead you see just pure html string
exactly! That is the result I want but I'm seeing the actual html string

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.