用值列表（ASP.net）增加html元素的最佳方式是什么？

Question

我得到了Pizza的列表，我想在html元素中自动导入他们的名字。 我想知道什么是使用这样的对象或值的最佳方式。我正在考虑使用Razor语言（因为我在ASP.net上工作），但我不确定也许JavaScript可以完成这项工作......？ 你能给我一个我的代码看起来像什么的简短例子。

<div class="col-sm-6 col-lg-3"> 
    <div class="thumbnail"> 
     <img src="http://lorempixel.com/240/200" alt=""> 
     <div class="caption"> 
     ** 
     <h3>Pizza's name</h3> 
     ** 
     <p>Lorem</p> 
     <p><a href="#" role="button" class="btn btn-default">Ajouter à ma commande</a></p> 
     </div> 
    </div> 
</div> 

Answer 1

的JavaScript可以做的工作太多。

是的，你可以用两种方法做到这一点，使用剃刀或使用Java脚本。

如果你想使用剃刀：

<div class="caption"> 
    @foreach (var item in ListOfPizza) 
    { 
     <h3>@item.Name</h3>** 
    } 

或者你也可以使用JavaScript：

$(document).ready(function() { 
 

 
    var testData = [{ 
 
    "Name": "pizza1" 
 
    }, { 
 
    "Name": "pizza2" 
 
    }]; 
 
    
 
    $.each(testData, function(i, v) { 
 
     
 
    $('.caption h3').append(v.Name+'<br>'); 
 
         
 
    }); 
 
    });   

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-sm-6 col-lg-3"> 
 
       <div class="thumbnail"> 
 
        <img src="http://lorempixel.com/240/200" alt=""> 
 
        <div class="caption"> 
 
         **<h3></h3>** 
 
         <p>Lorem</p> 
 
         <p><a href="#" role="button" class="btn btn-default">Ajouter à ma commande</a></p> 
 
        </div> 
 
       </div> 
 
      </div>

注：在这里，我使用的测试数据，这需要相应地改变！