代码之家 › 专栏 › 技术社区 › Mark Allison

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

button jquery-ui jquery asp.net c#

Mark Allison · 技术社区 · 15 年前

我有一个名为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应用到我的所有按钮有什么想法吗?

谢谢。

3 回复 | 直到 15 年前

Klemen SlaviÄ 15 年前

您可以在按钮上使用类名,而不是依赖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();

Darin Dimitrov 15 年前

尝试改用名称选择器:

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

或者更好地将CSS类应用于输入,然后:

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

sh54 15 年前

创建了许多按钮,ASP将为它们生成不同的ID,以确保每个按钮都具有唯一的ID。由于$(“35;…”)旨在选择单个唯一标识的元素,因此不能使用它来选择多个按钮。

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

推荐文章

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前

Chris Peh · VBA用户窗体上命令按钮的间距均匀

1 年前

Tom Newing · 在Tkinter中单击按钮时,如何在两个数字之间交替?

1 年前

TheAlphaLeopard · 图像的大小对于按钮来说太大了。。。有什么建议吗?

1 年前

bananajoey88 · React Native:TouchableOpacity移除延迟

1 年前

MaÅ¥o Valapka · 下拉菜单会扭曲其他按钮

1 年前

Anastasios3 · 当我在React Native中按下时,如何使按钮变色?

2 年前

tonydanza123 · Plotly Dash函数切换图形参数-python

2 年前

user23636411 · Excel功能区切换按钮:收缩以适应

2 年前

Moritz Richter · 我想做一个按钮来标记下一个按钮,但有什么不起作用吗?

2 年前