Question

我正在尝试生成购物卡丁车的应用程序，但我发现了类似的功能。用PHP。在这里他们从db中获取一些数据，并在PHP代码中绑定到div。类似的功能

<BODY>
<div id="product-grid">
	<div class="txt-heading">Products</div>
	<?php
	$product_array = $db_handle->runQuery("SELECT * FROM tblproduct ORDER BY id ASC");
	if (!empty($product_array)) { 
		foreach($product_array as $key=>$value){
	?>
		<div class="product-item" data-name="<?php echo $product_array[$key]["name"]; ?>" data-price="<?php echo "$".$product_array[$key]["price"]; ?>">
			<div class="product-image"><img class="draggable" src="<?php echo $product_array[$key]["image"]; ?>" id="<?php echo $product_array[$key]["code"]; ?>"></div>
			<div><strong><?php echo $product_array[$key]["name"]; ?></strong></div>
			<div class="product-price"><?php echo "$".$product_array[$key]["price"]; ?></div>
		</div>
	<?php
			}
	}
	?>
</div>
<div class="clear-float"></div>
<div id="shopping-cart">
<div class="txt-heading">Shopping Cart <a id="btnEmpty" onClick="cartAction('empty','');">Empty Cart</a></div>
<div id="cart-item"></div>
</div>
<script>
    $(document).ready(function () {
        cartAction('', '');
    })
</script>


</BODY>

.txt-heading{padding: 5px 10px;font-size:1.1em;font-weight:bold;color:#999;}
a.btnRemoveAction{color:#D60202;border:0;padding:2px 10px;font-size:0.9em;}
#btnEmpty{background-color:#E27E7E;border:0;padding:2px 10px;color:#333; font-size:0.8em;font-weight:normal;float:right;text-decoration:none;cursor:pointer;}
#shopping-cart .txt-heading{border-top: #79b946 2px solid;margin:30px 0px;background-color: #D3F5B8;}
#cart-item{height: 200px;background-color: #FFFFFF;}
#product-grid .txt-heading{border-top: #F08426 2px solid;background-color: #FFD0A6;}
.product-item {	float:left;	background:#F0F0F0;	margin:15px;	padding:5px;}
.product-item div{text-align:center;	margin:2px;}
.product-price {color:#F08426;}
.product-image {height:100px;background-color:#FFF;cursor:move;}
.clear-float{clear:both;margin-bottom:40px;}
body{width:610px;}

<HTML>
<HEAD>
<TITLE>PHP Shopping Cart with jQuery AJAX</TITLE>
<link href="style.css" type="text/css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
    $(document).ready(function () {
        $('.draggable').on('dragstart', function (e) {
            var source_id = $(this).attr('id');
            e.originalEvent.dataTransfer.setData("source_id", source_id);
        });

        $("#cart-item").on('dragenter', function (e) {
            e.preventDefault();
            $(this).css('background', '#BBD5B8');
        });

        $("#cart-item").on('dragover', function (e) {
            e.preventDefault();
        });

        $("#cart-item").on('drop', function (e) {
            e.preventDefault();
            $(this).css('background', '#FFFFFF');
            var product_code = e.originalEvent.dataTransfer.getData('source_id');
            cartAction('add', product_code);
        });
    });

    function cartAction(action, product_code) {
        var queryString = "";
        if (action != "") {
            switch (action) {
                case "add":
                    queryString = 'action=' + action + '&code=' + product_code;
                    break;
                case "remove":
                    queryString = 'action=' + action + '&code=' + product_code;
                    break;
                case "empty":
                    queryString = 'action=' + action;
                    break;
            }
        }
        jQuery.ajax({
            url: "AddToCart.aspx",
            data: queryString,
            type: "POST",
            success: function (data) {
                $("#cart-item").html(data);
            },
            error: function () { }
        });
    }
    function calculateTotal(qty, qty_new, price) {
        var total = $('#totalAmount').html();
        total = parseInt(total) - (parseInt(qty) * parseInt(price));
        total = parseInt(total) + (parseInt(qty_new) * parseInt(price));
        $('#totalAmount').html(total);
    }
</script>

这是我想要转换成.net的代码，为此我可以从数据库中获取数据，但我没有得到如何生成div部分，任何机构可以帮助我吗？

runQuery（“SELECT * FROM tblproduct ORDER BY id ASC“）; if（！empty（$ product_array））{ foreach（$ product_array as $ key =＆gt; $ value）{？＆gt; “data-price =”“＆gt;”id =“”＆gt;的

如何在c＃中生成动态HTML主体

0 个答案: