如何在MVC中的Jquery.Append()方法中使用循环?

时间:2014-05-13 07:01:14

标签: jquery asp.net-mvc

我正在开发MVC应用程序。

我正在尝试使用以下代码附加div。 我想用for循环来绑定Append方法中的viewbag数据。 →

<html>
<body>
<div class="row-fluid" id="ProductList">
</div>
</body>
</html>

 <script type="text/javascript">

 $(document).ready(function () {

 $('#lnkAddProduct').click(function () {

 $('#ProductList').append("<div  class='span12' style='margin-left:0px' ><div class='span2'>" +

:<div class='span1'style='margin-left:0px; width:90px;'><input type='text' id='Quantity_" + IDD + "' class='clsQuantity'  name='Quantities' style='width:50px; margin-left:30px;' onblur='CheckQuantity(" + IDD + ");' /></div>" +


 // Now the list will come from controller and I wan to display it using loop... above html data remains same.

@foreach (var item in ViewBag.LocationList)
{   
<div class="span1" style="margin-left:15px;width:60px; value:  @item.Name">
 </div>
}

 //Going to remove below the hard codded values....and want to generate from Loop above  

"<div class='span1'style='margin-left:10px; Width:60px;'id='Bandra_" + IDD + "'></div>" +
"<div class='span1'style='margin-left:10px; Width:60px;'id='Dadar_" + IDD + "'></div>" +
"<div class='span1'style='margin-left:0px; Width:60px;' id='Bhivandi_" + IDD + "'></div>" +
"<div class='span1'style='margin-left:10px; Width:40px;'  id='Juhu_" + IDD + "'></div>" +
"<hr></div>");

        </script>

怎么做?

1 个答案:

答案 0 :(得分:0)

var ht = ''
    var obj = {
        "LocationName1": "5558",
        "LocationName2": "8777",
        "LocationName3": "8555",
        "LocationName4": "2333",
    };
    $.each(obj, function (i, v) {
        ht += "<div class='span1'style='margin-left:10px; Width:40px;'  id='"+i+"_"+v+"'></div>";
    });
    $('#ProductList').append(ht);