ブートストラップモーダルがasp.netリストビューコントロールで動作していません

私はlistviewにリンクを持っています。リンクをクリックすると、YouTube動画を再生するためのブートストラップモーダルを表示したいのですが、これはすべてのリンクがクリックされたときの最初のリンクのモーダル表示です。ビデオアドレスはデータベースに保存されます。これは私のコードです。ブートストラップモーダルがasp.netリストビューコントロールで動作していません

<div id="myModal" class="modal fade"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 

      </div> 
      <div class="modal-body"> 
       <iframe id="cartoonVideo" width="760" height="428" src="<%# Eval("Embeded code") %>" frameborder="0" allowfullscreen></iframe> 
      </div> 
     </div> 
    </div> 
</div>

出典

2016-06-19 user3900427

ちょうどコピーして溶液中で以下のコードを貼り付けます。背後

コード：

public partial class ListViewAndModalExample : System.Web.UI.Page 
{ 
    protected void Page_Load(object sender, EventArgs e) 
    { 
     if(!Page.IsPostBack) 
     { 
      var v1 = new Video { VideoName = "CRASHING DRONES AND WRECKING LAMBOS", VideoUrl = "https://www.youtube.com/embed/AAmrIVa7UyA" }; 
      var v2 = new Video { VideoName = "FIRST EVER BOOSTED BOARD 2!!!", VideoUrl = "https://www.youtube.com/embed/rdNWP6sBgCk" }; 
      ListView1.DataSource = new List<Video> { v1, v2 }; 
      ListView1.DataBind(); 
     } 
    } 
} 

public class Video 
{ 
    public string VideoUrl { get; set; } 
    public string VideoName { get; set; } 
}

.ASPX：

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> 
    <script type="text/javascript"> 
     $(function() { 

      $(".videoLink").click(function() { 

       var link = $(this); 
       var url = $(link).data('url'); 

       $("#cartoonVideo").attr('src', url); 
       $("#myModal").modal('show'); 

      }) 

     }); 
    </script> 
</head> 
<body> 
    <form id="form1" runat="server"> 
     <asp:ListView ID="ListView1" runat="server"> 
      <ItemTemplate> 
       <a href="#" class="videoLink" data-url='<%# Eval("VideoUrl") %>'><%# Eval("VideoName") %></a><br /> 
      </ItemTemplate> 
     </asp:ListView> 
    </form> 
    <div id="myModal" class="modal fade"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
      </div> 
      <div class="modal-body"> 
       <iframe id="cartoonVideo" width="420" height="345"></iframe> 
      </div> 
     </div> 
    </div> 
</div> 
</body> 
</html>

出力：