Question

我有一个名为btnShowTradeScreenshot的按钮GridView。 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 等

关于如何将jQuery应用到我的所有按钮的任何想法？

感谢。

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将为它们生成不同的ID，以确保每个按钮都有唯一的ID。由于$（'＃...'）旨在选择单个唯一标识的元素，因此您无法使用它来选择多个按钮。

尝试$（'：按钮'）选择所有按钮对象。或者，您可以将每个按钮的类设置为ShowTradeScreenshot，然后使用$（'。ShowTradeScreenshot'）选择它们。

如何将jQuery UI按钮应用于ASP.NET中的html按钮？

3 个答案: