Передача идентификаторов элементов управления GridView в JavaScript

Я пытаюсь реализовать вызов функции Javascript, которая отображается в Gridview в каждой строке. Код создает кнопку, по которой можно щелкнуть, и вызывает экземпляр редактора изображений (Aviary от Adobe).

Поскольку у меня нет уникальных имен переменных, то одно и то же изображение появляется каждый раз, если я попытаюсь сделать это на отдельной странице и изменить имена переменных 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>

javascript asp.net aviary
person Scott Jackson    schedule 28.11.2014    source источник
comment
почему бы вам не передать это ключевое слово в качестве параметра функции, таким образом, вы также можете достичь идентификатора img   -  person sakir    schedule 28.11.2014
comment
Определенно есть более приятные способы сделать это, но добавление RowIndex в конец переменных может быть быстрым решением, например var editImageURL<# DirectCast(Container, GridViewRow).RowIndex #> = document...   -  person Rhumborl    schedule 28.11.2014
comment
Я не могу использовать эту встроенную строку, когда передаю имена в функцию launchEditor, подумал Румборл Сакир - Я не уверен, что вы имеете в виду, извините?   -  person Scott Jackson    schedule 28.11.2014

Ответы (1)


arrow_upward
1
arrow_downward

При связывании editImageControl используйте Id вместо ClientId. Id даст вам очень длинный и громоздкий идентификатор, но он будет уникальным для каждого элемента (это полный путь к элементу управления в дереве элементов управления страницы).

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

Другой вариант - установить ClientId editImage при определении элемента управления. Таким образом, JavaScript может получить к нему правильный доступ. Я собираюсь предположить, что filename уникален и допустим для хранения в качестве идентификатора элемента html (вам может потребоваться удалить любой разделитель путей или символы расширений файлов, чтобы это работало).

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

Затем вы можете использовать ту же логику для установки editImageControl:

var editImageControl = <%#Eval("filename")%>;
person Philip Pittle    schedule 28.11.2014
comment
Есть ли решение С #, пожалуйста, так как DirectCast - это метод VB.net - person Fandango68; 10.06.2016