Как применить кнопку пользовательского интерфейса jQuery к кнопке HTML в ASP.NET?

Question

У меня есть GridView с кнопкой btnShowTradeScreenshot.GridView создает много кнопок, и я хочу применить к нему кнопку jQuery.Вот мой соответствующий код GridView:

<asp:GridView 
    ID="grdTrades" 
    runat="server" 
    >            
    <Columns>            
        <asp:TemplateField HeaderText="Screenshot" >
            <ItemTemplate>
                <input name="btnShowTradeScreenshot" runat="server" visible='<%# Eval("screenshotId") != DBNull.Value %>' type="button" value='View...' onclick='<%# "ShowImageInNewPage(\"App_Handlers/ImageHandler.ashx?screenshotId=" + Eval("screenshotId") + "\")" %>' />
            </ItemTemplate>
        </asp:TemplateField>            
    </Columns>
</asp:GridView> 

Я пытаюсь применить jQuery, используя этот код:

<script type="text/javascript">
    $(document).ready(function () { $("#<%= btnShowTradeScreenshot.ClientID %>").button(); });
</script>

Ничего не происходит, и я получаю стандартную кнопку, а не кнопку jQuery.Когда я смотрю на источник страницы, я замечаю, что кнопки имеют искаженные названия, такие как:

ctl00$contentMain$grdTrades$ctl05$ctl03

ctl00$contentMain$grdTrades$ctl10$ctl03 и т. Д.

Любые идеи о том, как применитьjВопрос ко всем моим кнопкам?

Спасибо.

Answer 1

Вы можете использовать имя класса на кнопках вместо того, чтобы полагаться на ClientID;таким образом вы экономите на длине JavaScript и вам не нужно привязываться к каждому конкретному элементу управления.

В JS:

// equivalent to $(document).ready(function() {
$(function() {
  $('.customButton').button();
});

В ASP.NET:

<input type="button" runat="server" class="customButton" .../>

Кроме того, если ваша сетка является сеткой, связанной с AJAX, элементы <input/> будут воссозданы, и вам потребуется повторно запустить код в сетке, чтобы применить стили:

$('#<%= grdTrades.ClientID %> .customButton').button();

Answer 2

Попробуйте вместо этого использовать селектор имен:

$('input[name$=btnShowTradeScreenshot]').button();

или, что еще лучше, примените класс CSS к вашему входу, а затем:

$('.button').button();

Answer 3

Создано много кнопок, и ASP сгенерирует для них разные идентификаторы, чтобы каждый из них имел уникальный идентификатор.Так как $ ('# ...') предназначен для выбора одного уникально идентифицированного элемента, вы не можете использовать его для выбора нескольких кнопок.

Попробуйте $ (': button'), чтобы выбрать все объекты кнопки.В качестве альтернативы вы можете установить класс каждой кнопки на что-то вроде ShowTradeScreenshot, а затем выделить их все с помощью $ ('. ShowTradeScreenshot').