はasp.netのデータリストリピータ

Question

にシンプルなモーダル例を適応しようとすると、私はericmartin

からモーダルポップアップのために、この偉大な例を見つけました。しかし、私は、ASP.NETリピータによって生成された画像のデータリストに対して使用しようとしていませんよイメージをダイナミックにする方法を確認してください。

作業コードは単純ですが、イメージは静的です。それは基本的に画像をポップアップし、それを呼んだサイトを暗くします。そのサイトからjavascriptとcssですべてが起こっています。

<div id='container'> 
    <div id='content'> 
     <div id='basic-modal'> 
      <a href='#' class='basic'>Demoz</a> 
     </div> 
     <div id="basic-modal-content"> 
       <img src="img/basic/127-2777_IMG.JPG" /> 
     </div> 
    </div> 
</div> 

しかし、私のasp.netのリピーターコードは何とか私のJavaScriptで設定/画像値が、「$のGETが定義されていません」の取得エラーを取得する必要があります。

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent"> 

<script type="text/javascript"> 
    function ShowFullImg(url) { 
     var img = $get("<%=Image1.ClientID %>"); 
      img.src = url; 
      // $find("Image1").show(); 
     } 
</script> 

<div id='container'> 

<div id="basic-modal-content"> 
<asp:Image ID="Image1" runat="server" /> 
</div> 


<ASP:DataList id="repeater1" runat="server" repeatdirection="Horizontal" RepeatLayout="Table" Repeatcolumns="5"> 
<ItemTemplate> 


<asp:ImageButton ID="ThumbnailImg" ImageUrl='<%# Eval("n1") %>' Height="100" Width="150" BorderStyle="Ridge" OnClientClick='<%# Eval("n2","ShowFullImg(\"{0}\");return false;") %>' runat="server" />       

</ItemTemplate> 
</asp:DataList> 
    </div> 
</asp:Content> 

=== UPDATE：ここではいくつかのMORE PROGRESS

は、ここに私のasp.netコードです。私の問題は、私がバインドして更新するときに現れます。

http://forums.asp.net/p/1902263/5377638.aspx/1?Re+making+basic+modal+example+dynamic+to+asp+net+datalist+

ここ..私は空白のポップアップ私のレンダリングコード取得しています：

<script type="text/javascript"> 
    function ShowFullImg(url) { 
     var img = $("#Maincontent_Image1"); 
     img.src = url; 
     } 
</script>  

<div id='container'> 


<div id="basic-modal-content"> 
<img id="Maincontent_Image1" src="" /> 
</div> 


<div id='basic-modal'> 

<table id="Maincontent_repeater1" cellspacing="0" style="border-collapse:collapse;"> 
     <tr> 
       <td> 


<input type="image" name="ctl00$Maincontent$repeater1$ctl00$ThumbnailImg" id="Maincontent_repeater1_ThumbnailImg_0" class="basic 

Answer 1

レンダリングされた名前を気にする必要はありません。

DatalistはServersideで処理されるため、ImageUrlパスは完全にレンダリングされます。これはImage1 srcを設定する一番下のjqueryへの素敵な単純なOnClientClick呼び出しを残すはずです。

また、私はSimpleModalプラグインへの実際の呼び出しを見ていないので、私は、コードスニペット

に基づいて、すべてのポップアップの任意の並べ替えを取得したかを見ることができなかったとして、私はJSにこれを追加しました

<div id="basic-modal-content"> 
    <asp:Image ID="Image1" ImageUrl="" runat="server" /> 
</div> 

<div id='container'> 
    <asp:DataList ID="DataList1" runat="server" RepeatDirection="Horizontal" RepeatColumns="5" > 
     <ItemTemplate> 
      <asp:ImageButton ID="ThumbnailImg" ImageUrl='<%# Eval("n1") %>' Height="100" Width="150" BorderStyle="Ridge" runat="server" OnClientClick="ShowFullImg(this);" /> 
     </ItemTemplate> 
    </asp:DataList> 
</div> 

<script type="text/javascript"> 
    function ShowFullImg(e) 
    { 
     $('#basic-modal-content img').attr('src',$(e).attr('src')) 
     $('#basic-modal-content').modal() 
    } 
</script> 

Answer 2

をどのようにこのような何かやっについて次のようにスクリプトを変更し

1. を：

   function ShowFullImg(url) { 
       var img = $("#Maincontent_Image1"); 
       img.attr("src", url); 
   } 
   

2. サーバー側のImageButtonのコードをこれに変更してみてください。

   <asp:ImageButton 
       ID="ThumbnailImg" 
       ImageUrl='<%# Eval("n1") %>' 
       Height="100" Width="150" 
       BorderStyle="Ridge" 
       OnClientClick='<%# "ShowFullImg('" + Eval("n2") + "'); return false;" %>')' 
       runat="server" />       
   

Answer 3

あなたはここにClientIDに合格する必要がありますが、正しい構文は次のようである：あなたのコードは罰金だということ以外

var img = $("#" + "<%=Image1.ClientID %>"); 

。 Eval("n2")が正しいURLを生成していることを確認します。

function ShowFullImg(url) { 
    var img = $("#" + "<%=Image1.ClientID %>"); 
    img.src = url; 
    alert(url); 
}