如何将jQuery UI按钮应用于ASP.NET中的html按钮?
问题描述:
我有一个名为btnShowTradeScreenshot的按钮的GridView。 GridView创建了很多按钮,我想将jQuery按钮应用到它。这里是我的相关的GridView代码:如何将jQuery UI按钮应用于ASP.NET中的html按钮?
<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的适用于我的所有按钮的任何想法?
谢谢。
答
您可以在按钮上使用类名而不是依赖于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();
答
尝试使用名称选择器代替:
$('input[name$=btnShowTradeScreenshot]').button();
甚至更好的应用CSS类的输入,然后:
$('.button').button();
答
有许多按钮创建和ASP会产生不同的ID为他们,以确保每个人都有一个唯一的ID 。由于$('#...')旨在选择一个唯一标识的元素,因此不能用它来选择多个按钮。
尝试$(':button')来选择所有按钮对象。或者,您可以将每个按钮的类设置为ShowTradeScreenshot,然后使用$('.ShowTradeScreenshot')选择它们。
非常感谢。 – 2010-11-19 13:46:48