通过GridView控件的ID为JavaScript [英] Passing GridView Control IDs to JavaScript

问题描述

我想实现到一个GridView中出现的每个行的JavaScript函数的调用。在code产生一个​​可点击的按钮，并带来了一个图像编辑器实例（由Adobe百鸟）。

由于我没有唯一的变量名，然后将同一图像每一次出现，如果我尝试做一个独立的页面上，并更改JavaScript变量名每张图像的code工作，所以我不知道做什么，因为我不知道如何使独特的可变引用。

我不能内联包含的document.getElementById部分作为参数传递给函数，因为我无法逃避的单引号。

3的JavaScript变量

editImageControl
editImageURL
editImageFilename

 ＆LT; ASP：的TemplateField的HeaderText =编辑照片＆GT;
    ＆LT;＆ItemTemplate中GT;        ＆LT; ASP：图片ID =editImage=服务器的ImageUrl ='＆LT;％＃http://images.foo.com/＆放大器;的eval（文件名）％GT;'的CssClass =noDisplay/＆GT;
        ＆LT;脚本＆GT;
            变种editImageControl =的document.getElementById（'＆下;％＃DirectCast（容器，GridViewRow）.FindControl（editImage）的ClientID％方式＆gt;'）;
            VAR editImageURL =的document.getElementById（'＆LT;％＃DirectCast（集装箱，GridViewRow）.FindControl（editImage）的ClientID％方式＆gt;'）SRC。
            VAR editImageFilename ='＆LT;％＃的eval（文件名）％GT;';
        ＆LT; / SCRIPT＆GT;        ＆LT;！ - 加入编辑按钮，通过图像的HTML ID和图像的公开网址 - ＆GT;
        ＆LT; P＆GT;＆LT;输入类型=形象=服务器SRC =HTTP：//images.aviary.com/images/edit-photo.png'值=修改照片的onclick =返回launchEditor（ editImageControl，editImageURL，editImageFilename）; /＆GT;＆下; / P＆GT;    ＆LT; / ItemTemplate中＆GT;
＆LT; / ASP：的TemplateField＆GT;
 

解决方案

在绑定 editImageControl 使用的标识而不是客户端Id 。 编号会给你一个非常漫长而繁琐的ID，但它会为每一个元素（它是在页面的控件树中的控制的完整路径）是独一无二的。

  VAR editImageControl =的document.getElementById（
        '＆LT;％＃DirectCast（集装箱，GridViewRow）.FindControl（editImage）ID％方式＆gt;'）;
 

另一种方法是将 editImage 的客户端Id 当你定义的控制。这样的JavaScript可以正确访问它。我要去假设文件名是独一无二的，是有效的，用于存储为一个HTML元素的ID（你可能需要删除任何路径分隔符或文件扩展名的字符为这个工作）。

 ＆LT; ASP：图片ID =editImage=服务器客户端ID ='＆LT;％＃的eval（文件名）％GT;'
      的ImageUrl ='＆LT;％＃http://images.foo.com/＆放大器;的eval（文件名）％GT;'
      的CssClass =noDisplay/＆GT;
 

然后你可以用同样的逻辑来设置 editImageControl ：

  VAR editImageControl =＆LT;％＃的eval（文件名）％取代;
 

I'm trying to implement a call to a Javascript function that appears within a Gridview in each row. The code produces a button that can be clicked and brings up an Image Editor instance (Aviary by Adobe).

Because I don't have unique variable names then the same image is appearing each time, if I try to do this on a standalone page and change the Javascript variable names for each image the code works so I'm not sure what to do as I don't know how to make unique variable references.

I can't include the document.getElementByID parts inline as parameters to the function because I can't escape the single quotes.

The 3 javascript variables are

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>

解决方案

When you bind editImageControl use Id instead of ClientId. Id will give you a very long and cumbersome id, but it will be unique for every element (it's the full path for the control within the page's control tree).

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

Another option is to set the editImage's ClientId when you define the control. This way JavaScript can access it correctly. I'm going to assume that filename is unique and is valid for storing as an html element's id (you might need to remove any path seperator or file extensions characters for this to work).

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

Then you can use the same logic to set editImageControl:

var editImageControl = <%#Eval("filename")%>;

这篇关于通过GridView控件的ID为JavaScript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！