Json:解析使用JQuery以HTML格式显示

时间:2010-01-14 19:46:49

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

我正在尝试从我的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"

}

3 个答案:

答案 0 :(得分: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>");

    });
});

答案 1 :(得分:1)

有趣的是,我使用了一种几乎相似的方法,但不是解析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中的

_block GetLocationHighlites()是一个字符串常量:

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

我对这个主题的看法,在这种情况下,我的(虚弱:)尝试保持干燥。

答案 2 :(得分:1)

当然,你可以ALSO / 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;
}
希望这不会让水变得浑浊......