将 GridView 控件 ID 传递给 JavaScript

Passing GridView Control IDs to JavaScript

本文关键字：JavaScript ID GridView 控件      更新时间：2023-09-26

>我正在尝试实现对每行网格视图中出现的Javascript函数的调用。 该代码生成一个可以单击的按钮，并打开一个图像编辑器实例（Aviary by Adobe）。

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

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

这 3 个 JavaScript 变量是

编辑图像控件编辑图像网址编辑图像文件名

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

绑定时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")%>;
相关文章：