MVC异步Ajax调用

Question

I'm working on an eCommerce website and I have the following template:

<div class="product-box">
    Product 1
</div>

<div class="product-box">
    Product 2
</div>

<div class="product-box">
    Product 3
</div>

The website is ASP.NET MVC, I want to fill the different product box with product information asynchronously using jQuery ajax calls to my MVC controller, what is the best way to do it?

I can already think of something like that

<div id="product1" class="product-box">
    Product 1
</div>

<div id="product2" class="product-box">
    Product 2
</div>

<div id="product3" class="product-box">
    Product 3
</div>

<script>
$.get("/GetProductInfo/1", {}, function (data) {
    $("#product1").html(data);
});

$.get("/GetProductInfo/2", {}, function (data) {
    $("#product2").html(data);
});

$.get("/GetProductInfo/3", {}, function (data) {
    $("#product3").html(data);
});
</script>

But this doesn't make sense and is not the best way to do it. Imagine I have 1000 products, madness. Anybody can advice the best way I can achieve this?

Answer 1

you can try this:

HTML:

you can use data-* attribute to provide product numbers like:

<div data-id="1" class="product-box">
<div data-id="2" class="product-box">
<div data-id="3" class="product-box">
.......
// more

jQuery:

$(function(){
    $('.product-box').each(function(){
        var dataID = $(this).data('id');
        $.get("/GetProductInfo/" + dataID, {}, function (data) {
             $("#product"+dataID).html(data);
        });
    });
});