Json: анализ для отображения в HTML с использованием JQuery

Question

Я пытаюсь проанализировать данные со страницы JSON в моем веб-приложении ASP.NET MVC 1.0. Мне нужно, чтобы эти данные отображались в таблице при загрузке страницы, и у меня много проблем, главным образом потому, что я никогда раньше не использовал JSON. Сайт JQuery также приводит довольно ужасные примеры. Это то, что у меня есть, мне нужна помощь в написании функции:

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

                });
            });
    });

В приведенном выше URL-адресе в настоящее время просто отображается JSON, и два столбца, которые я получаю от сервера SQL для создания JSON, это EncoderName и EncoderStatus. Идентификатор displayencoders.

Спасибо!

редактирование: мой контроллер выглядит так:

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

            return Json(encoders);
        }

при компиляции my / encoders / выглядит так:

{

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

}

Answer 1

$("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>");

    });
});

Answer 2

конечно, вы также можете АЛЬТЕРНАТИВНО возвращать строку (а не результат 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;
}

надеюсь, что это не мутит воду ...

Answer 3

как ни странно, я использую почти аналогичную методологию, но вместо анализа 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);
    }

_block в вышеприведенном JsonResult GetLocationHighlites () является строковой константой в соответствии с:

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

мой взгляд на предмет, и в этом случае моя (слабая :)) попытка сохранить его СУХОЙ.