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

【问题标题】：What is the best way to increment html elements with a list of values(ASP.net)?用值列表（ASP.net）增加html元素的最佳方法是什么？
【发布时间】：2016-09-24 16:26:56
【问题描述】：

我有一个披萨列表，我想在一个 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>

【问题讨论】：

标签： html asp.net razor import

【解决方案1】：

javascript 也可以完成这项工作。

是的，您可以通过两种方法做到这一点，使用 razor 或使用 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>

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

【讨论】：