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

Question

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