1

各行の Gridview 内に表示される Javascript 関数への呼び出しを実装しようとしています。このコードは、クリックできるボタンを生成し、Image Editor インスタンス (Aviary by Adob​​e) を起動します。

一意の変数名がないため、毎回同じ画像が表示されます。スタンドアロン ページでこれを実行し、各画像の Javascript 変数名を変更しようとすると、コードが機能するため、何をすべきかわかりません。一意の変数参照を作成する方法がわかりません。

単一引用符をエスケープできないため、document.getElementByID パーツをインラインで関数のパラメーターとして含めることはできません。

3つのJavaScript変数は

editImageControl editImageURL editImageFilename

<asp:TemplateField HeaderText="Edit Photo">
    <ItemTemplate>

        <asp:Image ID="editImage" runat="server" ImageUrl='<%# "http://images.foo.com/" & Eval("filename") %>' CssClass="noDisplay" />
        <script>
            var editImageControl = document.getElementById('<%# DirectCast(Container, GridViewRow).FindControl("editImage").ClientID%>');
            var editImageURL = document.getElementById('<%# DirectCast(Container, GridViewRow).FindControl("editImage").ClientID%>').src;
            var editImageFilename = '<%# Eval("filename") %>';
        </script>

        <!-- Add an edit button, passing the HTML id of the image and the public URL of the image -->
        <p><input type='image' runat="server" src='http://images.aviary.com/images/edit-photo.png' value='Edit photo' onclick="return launchEditor(editImageControl, editImageURL, editImageFilename);" /></p>

    </ItemTemplate>
</asp:TemplateField>
4

1 に答える 1

1

バインドするときは、代わりにIdeditImageControlを使用します。 非常に長くて面倒な id が返されますが、すべての要素に対して一意になります (ページのコントロール ツリー内のコントロールのフル パスです)。ClientIdId

  var editImageControl = document.getElementById(
        '<%# DirectCast(Container, GridViewRow).FindControl("editImage").Id%>');

もう 1 つのオプションは、コントロールを定義するときに を設定するeditImageことClientIdです。このようにして、JavaScript は正しくアクセスできます。これは一意であり、html 要素の ID として保存するのに有効であると想定しfilenameます (これを機能させるには、パス区切り文字またはファイル拡張子文字を削除する必要がある場合があります)。

 <asp:Image ID="editImage" runat="server" ClientID='<%#Eval("filename")%>'
      ImageUrl='<%# "http://images.foo.com/" & Eval("filename") %>' 
      CssClass="noDisplay" />

次に、同じロジックを使用して設定できますeditImageControl。

var editImageControl = <%#Eval("filename")%>;
于 2014-11-28T13:41:25.413 に答える