Как мне вытащить clientID кнопки asp: внутри asp: listview для использования с jQuery?

Я пытаюсь сделать что-то относительно простое. Я использую ListView для отображения ряда элементов с помощью ItemTemplate. Внутри ItemTemplate у меня есть div, окружающий весь элемент, так что я могу выделить событие зависания (уже обрабатываемое jQuery).

Я бы хотел, чтобы событие click в div запускало кнопку, чтобы открыть представление сведений для этого конкретного элемента. Проблема, с которой я столкнулся, заключается в том, чтобы вернуть ClientID для этой кнопки при использовании jQuery. Я пробовал:

$('#<%= Button1.ClientID %>')

route, но это не работает, так как Button не существует при загрузке страницы.

Базовый код выглядит следующим образом:

<asp:listview>
 <itemtemplate>
  <td runat = "server">
   <div class = "container">
    <asp:linkbutton id = "Button1" runat = "server" text = "View Details" />
     fun and exciting stuff here...
   </div>
  </td>
 </itemtemplate>
</asp:listview>

Любые предложения или помощь очень приветствуются!

Стоит ли изучать PHP в 2026-2027 годах?
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
4
0
8 207
6
Перейти к ответу Данный вопрос помечен как решенный

Ответы 6

Ответ принят как подходящий

Подключите метод к событию ItemDataBound вашего ListView. Там вы можете использовать метод FindControl в свойстве Пункт параметра ListViewItemEventArgs, чтобы получить ссылку на этот LinkButton для каждого элемента в вашем списке. Из этой ссылки вы можете получить ClientID и делать с ним все, что вам нужно.

ОБНОВИТЬ
С точки зрения того, что вы делаете может со ссылкой на кнопку, проще всего, вероятно, просто назначить событие щелчка в событии ItemDataBound, может быть, что-то вроде этого

var button = (Button)e.Item.FindControl("Button1");
button.OnClientClick = "ShowEditDialog(" + Eval("ItemId") + ")";

Если вам нужно подключить его на стороне клиента, возможно, вы могли бы поддерживать словарь, сопоставляющий идентификаторы ClientID с идентификаторами элементов, и отправлять этот словарь клиенту, где вы могли бы перебирать его и подключать события.

Хотя ваше решение сначала может показаться работающим, проблема заключается в том, чтобы вернуть ClientID на страницу, чтобы я мог ссылаться на него с помощью jQuery на стороне клиента. Может я не понимаю о чем ты?

riceboyler 15.01.2009 01:24

Именно то, что мне нужно! Спасибо за исправление!

riceboyler 19.01.2009 19:32

Почему бы вам просто не дать этим кнопкам ссылок определенный класс CSS?

<asp:linkbutton id = "Button1" runat = "server" text = "View Details" CssClass = "detailsButtons" />

Затем в jquery просто выберите класс, чтобы назначить их всем за один вызов.

$(".detailsButtons").click( function() { .... } );

Если это не сработает, потому что объекты еще не созданы, вы можете использовать новый метод live() в jquery. Он также назначит события любым динамически добавляемым элементам.

Надеюсь это поможет

Очень интересная идея с методом live (). Я мог бы попробовать. Проблема с идеей класса заключается в том, что мне нужно активировать событие click () для определенной кнопки, поэтому одновременное назначение всех кнопок не приведет к тому, что мне нужно. Однако живая штука может работать, так что я попробую!

riceboyler 15.01.2009 01:22

+1 Если элементы принадлежат к логическому классу, на них следует ссылаться как на таковые. Это совершенно правильное решение (где bdukes дает фактический ответ).

annakata 15.01.2009 17:55

Если это событие щелчка, которое вам нужно, разве вы не можете использовать свойство OnClientClick кнопки ссылки? или в 3.5 убрали?

Вы можете выбирать кнопки с помощью этого синтаксиса (при условии, что Button1 - это идентификатор сервера для кнопки):

$("[id$=Button1]")

который выберет все элементы DOM, идентификатор которых заканчивается на «Button1».

Это необходимо, потому что результирующий идентификатор клиента элемента отражает структуру управления сервером.

Вместо использования скриптлета:

$('#<%= Button1.ClientID %>')

используйте выражение привязки:

$('#<%# Button1.ClientID %>')

Обратите внимание, что разница в # вместо знак равно.

Выражения привязки оцениваются при привязке данных, поэтому выражение будет оцениваться в контексте текущего элемента данных. Скриплеты оцениваются при отображении страницы (в самом конце жизненного цикла страницы) и оцениваются в контексте страницы, а не в конкретном элементе данных.

Я пробовал это в ItemTemplate <% # btnAdd.ClientID%> не работает для ListView.

Nickz 01.03.2011 07:42

вы можете использовать класс css для запуска события щелчка.

<a class = "confirm" id = "alert" onmouseover = "got('<%# Eval("Gift_ID") %>','<%= Session["member_id"] %>')">Redeem Now</a> 

и используйте jquery для запуска щелчка даже на основе этого класса ..

$(function() {
        $(".confirm").easyconfirm();
        $(".confirm").click(function() {
            var id = document.getElementById("test").value;
            var mem_id = document.getElementById("test1").value;
            document.getElementById("test").setAttribute("value", "");
            document.getElementById("test1").setAttribute("value", "");
            var param = "{'id':'" + id + "','mem_id':'" + mem_id + "'}"
            $.ajax({

                type: "POST",
                url: "Offer.aspx/Hello_World",
                data: param,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                async: true,
                cache: false,
                success: function(msg) {
                    alert("hello");
                    $('#myDiv').text(msg.d);

                }
            });

        });

    });

Другие вопросы по теме