JQuery 未将 <li> 项附加到 <ul> 列表

Question

问题背景：

我有一个 MVC 站点，我正在将一个对象列表传递给一个视图，然后该视图应该以编程方式为列表中的每个项目构建一个 drop-down 列表。

我正在尝试构建 drop-down 个项目，如本例所示（请注意 - 这是一个示例，并非来自我的网站）：

问题：

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

代码：

ID为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

这是有效的示例 link

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 将 return 菜单作为局部视图并在主菜单中使用 @Html.Action(...)，所有这些都可以更容易地完成并且没有 javascript查看

JQuery 未将 <li> 项附加到 <ul> 列表

JQuery not appending <li> items to a <ul> list

jquery

html

asp.net-mvc

list

razor