1

我正在尝试实现对出现在每行的 Gridview 中的 Javascript 函数的调用。该代码生成一个可以单击的按钮并显示一个图像编辑器实例（Adobe 的 Aviary）。

因为我没有唯一的变量名称，所以每次都会出现相同的图像，如果我尝试在独立页面上执行此操作并更改每个图像的 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

绑定时editImageControl使用Id而不是ClientId. Id会给你一个很长很麻烦的 id，但它对于每个元素都是唯一的（它是页面控件树中控件的完整路径）。

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

另一种选择是在定义控件时设置editImage's 。ClientId这样 JavaScript 可以正确访问它。我将假设它filename是唯一的并且对于存储为 html 元素的 id 是有效的（您可能需要删除任何路径分隔符或文件扩展名字符才能工作）。

 <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 回答