从控制器返回的JSON对象渲染HTML到jquery ajax调用

Question

在ASP.NET MVC 4中如何在加载时呈现HTML。我在我的sql server数据库中保存了一些以这种形式编码的html字符串，类型为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>

* 编辑： *请注意，上面的字符串是正确的html未编码，因此实际上显示如下：

<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>

现在在加载页面时，我将有一个html字符串的列表，这些字符串都是列表项，各种子节点都要附加到无序列表标记。该列表正在返回。但它只是在页面上显示，即显示实际的字符串，并且没有呈现html。

这是我的控制器操作：

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 });
}

这是我在页面加载时的jQuery Ajax调用。我的html

中的#posts为空<ul>

 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
  });

任何帮助将不胜感激！

Answer 1

好像你的html是双重编码的。试试这个

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

这是一个Fiddle样本。

Answer 2

只是看着你的

<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>

我怀疑它会正确渲染它看起来不是一个有效的HTML并且你不断追加所以你可能会使用像

这样的东西

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