从mvc控制器返回json只显示页面

时间:2018-03-08 20:09:42

标签: jquery json asp.net-mvc

我试图使用json从MVC控制器获取数据,我可以获取数据并在警报中显示它,但是当我尝试在页面上显示它时,它只显示最后一项从控制器返回的列表。

任何人都可以看到我出错的地方,我的代码如下:

$.ajax({
        url: url,
        data: { jsonJewelleryType: ddlJewelleryType },
        cache: false,
        type: "POST",
        dataType: "json",
        error: function (request) {
            alert(request.responseText);
        },
        success: function (data) {
            var items = data;
            $.each(items,function (i, item) {
                $.each(item,
                    function (key, value) {
                        $("#catalog-items").html("<div class=\"row\"><h4>" + key + " " + value + "</h4></div>");
                        alert(key + " " + value);
                    });
            });
        }
    });

Json回归

  

/ ------------------------来自Chrome的控制台代码----------------

>     1.    {CatalogProducts: Array(1), Pager: {…}, NumberOfRecordsPerPage: 10}
>     1.    CatalogProducts:Array(1)
>     1.    0:
>     1.    CatalogImages:Array(4)
>     1.    0:"image1.jpg"
>     2.    1:"image2.jpg"
>     3.    2:"image3.jpg"
>     4.    3:"image4.jpg"
>     5.    length:4
>     6.    __proto__:Array(0)
>     2.    Description:"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard
> dummy text ever since the 1500s, when an unknown printer took a galley
> of type and scrambled it to make a type specimen book. It has survived
> not only five centuries, but also the leap into electronic
> typesetting, remaining essentially unchanged."
>     3.    DiamondQuality:"Whats This"
>     4.    Image1:null
>     5.    Image2:null
>     6.    Image3:null
>     7.    Image4:null
>     8.    JewelleryType:"Earring"
>     9.    Metal:"9ct Yellow Gold"
>     10.   Price:"299.99"
>     11.   Title:"9ct Yellow Gold Diamond Cluster Stud Earring (1.00ct)"
>     12.   __proto__:Object
>     2.    length:1
>     3.    __proto__:Array(0)
>     2.    NumberOfRecordsPerPage:10
>     3.    Pager:{StartPage: 1, CurrentPage: 1, PageSize: 10, TotalItems: 1, TotalPages: 1, …}
>     4.    __proto__:Object

1 个答案:

答案 0 :(得分:2)

通过执行$("#catalog-items").html("<div class=\"row\"><h4>" + key + " " + value + "</h4></div>");,您每次通过时都会重置catalog-items div的html。

尝试使用:

$("#catalog-items").append("<div class=\"row\"><h4>" + key + " " + value + "</h4></div>");