javascript - 将 GridView 控件 ID 传递给 JavaScript

Question

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

因为我没有唯一的变量名称，所以每次都会出现相同的图像，如果我尝试在独立页面上执行此操作并更改每个图像的 Javascript 变量名称，代码会起作用，所以我不确定会发生什么因为我不知道如何进行唯一的变量引用。

我无法将 document.getElementByID 部分作为内联参数包含到函数中，因为我无法转义单引号。

这 3 个 JavaScript 变量是

编辑图像控件编辑图片URL编辑图像文件名

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

Answer 1

当您绑定(bind)editImageControl时，使用Id而不是 ClientId。 Id 将为您提供一个非常长且繁琐的 id，但它对于每个元素都是唯一的(它是页面控件树中控件的完整路径)。

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

另一个选项是在定义控件时设置 editImage 的 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")%>;