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

【问题标题】：How to apply jQuery UI button to an html button in ASP.NET?如何将 jQuery UI 按钮应用于 ASP.NET 中的 html 按钮？
【发布时间】：2010-11-19 13:25:17
【问题描述】：

我有一个带有名为 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 应用于我的所有按钮的任何想法？

谢谢。

【问题讨论】：

标签： c# asp.net jquery jquery-ui button

【解决方案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();

【讨论】：

【解决方案2】：

尝试使用名称选择器：

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

或者甚至更好地将 CSS 类应用于您的输入，然后：

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

【讨论】：

【解决方案3】：

创建了许多按钮，ASP 会为它们生成不同的 ID，以确保每个按钮都有唯一的 ID。由于 $('#...') 旨在选择单个唯一标识的元素，因此您不能使用它来选择多个按钮。

尝试 $(':button') 选择所有按钮对象。或者，您可以将每个按钮的类设置为 ShowTradeScreenshot 之类的，然后使用 $('.ShowTradeScreenshot') 将它们全部选中。

【讨论】：