Json：使用 JQuery 解析以在 HTML 中显示答案

【问题标题】：Json: parse to display in HTML using JQueryJson：使用 JQuery 解析以在 HTML 中显示
【发布时间】：2011-01-05 05:48:26
【问题描述】：

我正在尝试从我的 ASP.NET MVC 1.0 Web 应用程序中的 JSON 页面解析数据。我需要这些数据在页面加载时显示在表格中，我遇到了很多麻烦，主要是因为我以前从未使用过 JSON。 JQuery 站点也提供了非常糟糕的示例。这是我目前所拥有的，我需要帮助编写一个函数：

$("document").ready(function() {
        $.getJSON("http://localhost:1909/encoders",
            function(data) {
                $.each(data.items, function() {

                });
            });
    });

上面的 URL 当前仅显示 JSON，我从 SQL 服务器获取用于生成 JSON 的两列是 EncoderName 和 EncoderStatus。 id 是 displayencoders。

谢谢！

编辑：我的控制器如下所示：

[UrlRoute(Name = "GetEncoders", Path = "encoders")]
        public ActionResult GetEncoders() {
            var encoders = Database.GetEncoders();

            return Json(encoders);
        }

编译后我的 /encoders/ 看起来像：

{

    * EncoderName: "rmcp2-encoder"
    * EncoderStatus: "inactive"

}

【问题讨论】：

服务器端代码是什么样的？
另外，你的 JSON 是什么样的？

标签： jquery html asp.net-mvc ajax json

【解决方案1】：

当然，您也可以/ALTERNATIVELY 返回一个字符串（而不是 Json 结果）。我实际上开始思考上面的答案，并意识到这可能是我的目的的“最佳案例”。所以我现在有（在视图中）：

$.get('/en/Property/GetLocationHighlites/'

而不是：

$.getJSON('/en/Property/GetLocationHighlites/'

并将控制器功能修改为：

public string GetLocationHighlites()
{
    IBlockData block = WebPagesMapper.GetLocationHighlites(propertiesWorldwideLuxury);
    string htmlBlock = string.Format(_block, block.Header, block.Content);
    return htmlBlock;
}

希望这不会弄脏水...

【讨论】：

【解决方案2】：

有趣的是，我使用了几乎类似的方法，但我没有解析 json，而是将 html 格式从控制器中的辅助方法应用到 json 结构。所以基本上，我的控制器传回一个完全格式化的 json 结果，所有 jquery 函数所要做的就是将它放在相关的 div 中，在这种情况下是 $('#propertyList').html(data)。

这是它在视图上的外观：

<script type='text/javascript'>
    function GetLocationHighlites() {
        $.ajaxSetup({ cache: false });
        $.getJSON('/en/Property/GetLocationHighlites/', null,
            function(data) { JsonData(data); });
    }

    function JsonData(data) {
        if (data.length != 0) {
            $('#propertyList').html(data);
            $('#propertyList').slideDown('fast');
            return false;
        }
    };

    $(document).ready(function() {
        GetLocationHighlites();
    });
</script>

在控制器中：

    public JsonResult GetLocationHighlites()
    {
        IBlockData block = WebPagesMapper.GetLocationHighlites(propertiesWorldwideLuxury);
        string htmlBlock = string.Format(_block, block.Header, block.Content);
        return Json(htmlBlock);
    }

上面 JsonResult GetLocationHighlites() 中的_block 是一个字符串常量，大致如下：

private string _block = @"<div class='Block'>
                       <div class='header'>
                        {0}
                       </div>
                       <div class='BlockContent-body'>
                        {1} 
                       </div>
                     </div>";

我对这个主题的看法，在这种情况下，我的（微弱 :)）试图让它保持干燥。

【讨论】：

【解决方案3】：

$("document").ready(function() {
    $.getJSON("http://localhost:1909/encoders", function(data) {

        $("#div-my-table").text("<table>");

        $.each(data, function(i, item) {
            $("#div-my-table").append("<tr><td>" + item.EncoderName +"</td><td>" + item.EncoderStatus + "</td></tr>");
        });

        $("#div-my-table").append("</table>");

    });
});

【讨论】：