2

私はJSONを初めて使用し、データをクリックして表示できるメニューを作成しようとしています。すべてのオブジェクトは、私のasp.netmvcプロジェクトのコントローラーから返されます。

これは私のコードです：

<script language="javascript" type="text/javascript">
  function ViewProduct() {
    var searchVal = $("#txtsearch").val();
    $.getJSON(url, function (data) {
      var mainMenu = $("#content ul#navmenu-v");
      $.each(data, function (index, dataOption) {
        var new_li = $("<li class='level1' id='select_list'><a href='javascript:void(0);' id='" + dataOption.ID + "' class ='selectedcategory'>" + dataOption.Name + "</a>");
        mainMenu.append(new_li);
        $('a#' + dataOption.ID).click(function () {
        var urlGetProByDep = '<%: Url.Content("~/") %>' + "Products/GetProductsByDepList";
        t = dataOption.ID;
        var data = {};
        if (searchVal != "") {
          data.depID = t;
          data.Q = searchVal;
        } else {
          data.depID = t;
        }
      $(".brand_id").empty();
      $.getJSON("ProductListing/Index", data, function (product) {
         $(".brand_id").empty();
         $.getJSON("ProductListing/Index", data, function (product) {
            $.each(product.ja, function (index, value) {
               $(".brand_id").html( value.Name + "</br>" + value.PictureName + "</br>" + value.ID);
            });
         });
      });
   });
}

$(document).ready(function () {
   ViewProduct(); 
});

メニューコードの他のブロックは非常にうまく機能しますが、上記の私のコードのこのブロックに問題があります：

      $.getJSON("ProductListing/Index", data, function (product) {
         $(".brand_id").empty();
         $.getJSON("ProductListing/Index", data, function (product) {
            $.each(product.ja, function (index, value) {
               $(".brand_id").html( value.Name + "</br>" + value.PictureName + "</br>" + value.ID);
            });
         });
      });

JSONのオブジェクトを取得してビューに表示するのはブロックですが、メニューをクリックすると、JSONオブジェクトの最後の要素のみが表示されます。

これは私のJSONです：

{"ja":
   [
       {"Name":"ABC1","PictureName1":"my image name1","ID":1},   
       {"Name":"ABC2","PictureName2":"my image name2","ID":2}
]}

各メニューは、各製品の部門です。また、メニューブロックで製品データをループしないと、部門のIDを取得して、各部門の製品を取得するためのクエリを実行できません。

どんなアイデアや質問でも大歓迎です。お時間を割いていただきありがとうございます。

4

2 に答える 2

1

コール.click内のアンカーのイベントをサブスクライブしています。$.eachただし、クロージャーでAJAXリクエストを準備するために使用している変数をキャプチャしたので、リンクをクリックするまでに、この変数はループしている配列の最後の要素をすでに指しているdataOptionことは明らかです。dataOptionしたがって、次のようにクリックコールバックに引数を渡すことができます。

<script type="text/javascript">
    function ViewProduct() {
        // TODO: There's some url variable used here which is nowhere defined => define it
        $.getJSON(url, function (data) {
            var mainMenu = $("#content ul#navmenu-v");
            $.each(data, function (index, dataOption) {
                $(mainMenu)​.append(
                    $('<li/>', {
                        'class': 'level1',
                        // TODO: find an unique id or you get broken HTML
                        'id': 'select_list',
                        'html': $('<a/>', {
                            'href': '#',
                            'id': dataOption.ID,
                            'class': 'selectedcategory',
                            'text': dataOption.Name,
                            'click': function(arg) {
                                return menuClick(arg);
                            }({ dataOption: dataOption })
                        })
                    })
                );​
            });
        });
    }

    function menuClick(arg) {
        var urlGetProByDep = '<%= Url.Action("GetProductsByDepList", "Products") %>';
        var t = arg.dataOption.ID;
        var data = { };
        var searchVal = $('#txtsearch').val();
        if (searchVal != '') {
            data.depID = t;
            data.Q = searchVal;
        } else {
            data.depID = t;
        }

        $('.brand_id').empty();

        var url = '<%= Url.Action("Index", "ProductListing") %>';

        // TODO: Are those 2 nested AJAX calls really necessary here?
        $.getJSON(url, data, function (product) {
            $('.brand_id').empty();
            $.getJSON(url, data, function (product) {
                $.each(product.ja, function (index, value) {
                    $('.brand_id').html( value.Name + "</br>" + value.PictureName + "</br>" + value.ID);
                });
            });
        });
    }

    $(document).ready(ViewProduct);
</script>

searchValまた、ページが読み込まれてからユーザーが実際にリンクをクリックするまでの間に値が変化したことを考慮して、クリックコールバック内で宣言を移動したことにも注意してください。

于 2012-05-03T06:18:58.783 に答える
1

コードにコピー＆ペーストエラーがあるようです。最初のリクエストの結果を使用しなくても、まったく同じURLに対して2つのリクエストを実行します。私はあなたが次のようなものだけが欲しかったと思います

$(".brand_id").empty();
$.getJSON("ProductListing/Index", data, function (product) {
    $.each(product.ja, function (index, value) {
         $(".brand_id").html( value.Name + "</br>" + value.PictureName + "</br>" + value.ID);
    });
});

しかし、あなたの問題は.html()方法です。製品をループし、各ターンで各 .brand_id要素のhtmlを新しい値に設定します。したがって、表示される結果は、最後の反復ですべての要素に設定したものです。あなたがする必要があるのは、それぞれが異なる内容で、それ自身で各要素のHTMLを設定することです。

ただし、リストアイテムを空にして新しいコンテンツを再読み込みするのではなく（商品の数によってクエリリクエストごとに変わる可能性があります）、すべてのアイテムを削除して新しいアイテムを追加したいと思います。

$(".brand_id").remove();
$.getJSON("ProductListing/Index", data, function (product) {
    var $parent = $("#parent"); // the parent node of the product list
    $.each(product.ja, function (index, value) {
         $parent.append('<li class="brand_id">' + value.Name + '<br />' + value.PictureName + '<br />' + value.ID + '</li>');
    });
});

（編集）...または、brand_id本当にIDの場合：

var $parent = $("#brand_id").empty();
$.getJSON("ProductListing/Index", data, function (product) {
    $.each(product.ja, function (index, value) {
         $parent.append('<div>' + value.Name + '<br />' + value.PictureName + '<br />' + value.ID + '</div>');
    });
});
于 2012-05-03T08:27:39.110 に答える