JQuery没有将<li>项附加到<ul>列表</ul> </li>

Question

问题背景：

我有一个MVC网站，我将一个对象列表传递给一个视图，然后该视图应该以编程方式为列表中的每个项目建立一个下拉列表。

我正在尝试构建项目的下拉菜单，如下例所示（请注意 - 这是一个示例，而不是来自我的网站）：

问题：

我遍历将每个对象传递给名为'AddRows'的脚本方法的对象列表。我可以看到项目正在传递，但我无法将项目附加到列表（具有id CartList）。

守则：

标识为CartList

的HTML

<ul class="dropdown-menu cart-content" id="CartList" role="menu">
</ul>

---

Razor Foreach迭代传递的对象列表并调用提供相关属性的AddRow方法：

@foreach (var cartItem in (List<LoginTest.Models.CartItem>)ViewBag.Data)
{
<script>
    var cartItemName = '@cartItem.CartItemName';
    var cartItemQty = '@cartItem.CartItemQty';
    var cartItemPrice = '@cartItem.CartItemPrice';


    AddRows(cartItemName, cartItemQty, cartItemPrice)
</script>
}

---

应 的AddRows方法将新列表项追加到CartList列表。

<script type="text/javascript">
var AddRows = function (productName, productQty, productPrice) {

    $('#CartList').append('<li><b>' + productName + '</b><span>x ' + productQty + ' £' + productPrice + '</span></li>');

};
</script>

非常感谢任何帮助。

Answer 1

以下是适用的示例链接

http://jsfiddle.net/nadeemmnn2007/8jt5ce6g/2/

<强> HTML

<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button"  data-toggle="dropdown" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul id="CartList" class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">


</ul>
</div>

<强> JS

var AddRows = function (productName, productQty, productPrice) {

$('#CartList').append('<li><b>' + productName + '</b><span>x ' + productQty  + ' £'+ productPrice + '</span></li>');

};

for(i = 0; i < 10 ; i++)
{
AddRows('test',''+i+'','100');

}

Answer 2

不是用所有这些额外的内联脚本污染你的html，你可以直接将集合分配给一个javascript变量

<script>
  $(function() {
    var items = JSON.parse('@Html.Raw(Json.Encode(ViewBag.Data))');
    var cartList = $('#CartList');
    $.each(items, function(index, item) {
      var li = $('<li></li>');
      li.append($('<b></b>').text(item.CartItemName));
      li.append($('<span></span>').text('x ' + item.CartItemQty + ' £' + item.CartItemPrice));
      cartList.append(li);
    });
  });
</script>

然而，通过使用ChildAction将所有菜单作为局部视图返回并在主视图中使用@Html.Action(...)，可以更轻松地完成所有这些操作并使用javascript