关于 <asp:Button> 的 JQuery / ASP.NET 新手问题
Posted
技术标签:
【中文标题】关于 <asp:Button> 的 JQuery / ASP.NET 新手问题【英文标题】:JQuery / ASP.NET newbie questions about <asp:Button> 【发布时间】:2011-04-03 07:02:30 【问题描述】:大家好,在获取 ASP 按钮以与 JQuery 交互时遇到问题。我基本上是在尝试隐藏一个包含表单的 div 并将其替换为处理图像。当我使用 html 输入按钮作为触发器时它对我来说很好,但是当我使用 aspButton 时没有任何反应。
这可行(HTML 按钮的 id 是 'btnSubmit'):
<script>
$('#btnSubmit').click(function ()
$('#form1').fadeOut('fast', function ()
$('#processing').fadeIn('fast', function ()
);
);
);
</script>
这不是(ASP 按钮的 id 是 'btnSubmitASP'):
<script>
$('#btnSubmitASP').click(function ()
$('#form1').fadeOut('fast', function ()
$('#processing').fadeIn('fast', function ()
);
);
);
</script>
知道让 asp 按钮执行此操作的诀窍是什么吗?
谢谢
【问题讨论】:
【参考方案1】:控件的 ASP.net 服务器 ID 与 html ID 不同。 (ASP.net 将此称为客户端 ID)。您可以通过这种方式获取客户端 ID:
$('#<%= this.btnSubmitASP.ClientID %>').click( /* etc */ );
【讨论】:
我不知道。谢谢(你的)信息。但是,如果您想在 CSS 中使用 ID 进行样式设置,它仍然会导致问题。 确实如此。您可以通过使用 css 类(asp.net 中的 CssClass 属性)或使用 id 或其他方法将按钮包装在 div 中来解决它。 这很好用。感谢大家的快速帮助……你们太棒了!【参考方案2】:如果您使用的是 asp.net 4.0,您可以设置按钮的 ClientIDMode 属性 ='Static'。这将阻止运行时处理 ID。
【讨论】:
3.5 现在很遗憾......不过很高兴知道未来【参考方案3】:试试这个:
<script>
$('<%=btnSubmitASP.ClientID%>').click(function ()
$('#form1').fadeOut('fast', function ()
$('#processing').fadeIn('fast', function ()
);
);
);
</script>
说明: ASP.NET 在将其所有控件发送到客户端时重命名它们。因此,您的 ASP.NET 按钮在客户端没有“btnSubmitASP”的客户端 ID。上面的代码在服务器端调用服务器控件,并获取它的 client-id 以在 jQuery 代码中使用。
或者,您可以使用 jQuery 选择器:
<script>
$("[id$='_btnSubmitASP']").click(function ()
$('#form1').fadeOut('fast', function ()
$('#processing').fadeIn('fast', function ()
);
);
);
</script>
这将查找其客户端 ID 以“_btnSubmitASP”结尾的控件。
【讨论】:
【参考方案4】:使用 ClientId 的另一个替代方法是为 ASP:button 分配一个唯一的类。您的选择器将如下所示:
<asp:button runat="server" CssClass="submitbutton">/<asp:button>
<script>
$("submitbutton").click(function ()
$('#form1').fadeOut('fast', function ()
$('#processing').fadeIn('fast', function ()
);
);
);
</script>
【讨论】:
【参考方案5】:对于 ASP.NET 按钮,您应该使用 OnClientClick
属性,因为它内置了添加到按钮的客户端脚本来执行其回发行为。示例:
<asp:Button ID="btnSubmitASP" runat="server"
OnClientClick="yourJqueryFunction();" />
如果您在OnClientClick
中返回false
,您将阻止按钮的默认行为阻止PostBack
。什么都不做或返回 true 将导致 PostBack
发生。使用此方法,您无需知道Button
的名称即可附加脚本代码。
为了让您的代码正常工作,您需要将控件的 ClientID
内联以创建您的脚本,因此更改以下行以使用 Button
的 ClientID
属性:
$('#<%= btnSubmitASP.ClientID %>').click(function ()
您需要获取ClientID
,因为 ASP.NET 将名称添加到命名空间并防止名称重复。如果您查看 ASP.NET Button
,您会注意到 name
和 ID
属性添加了很多,例如:
<input type="submit" name="ctl00$ContentPlaceHolder1$btnSubmitASP" value="Test"
id="ctl00_ContentPlaceHolder1_btnSubmitASP" />
【讨论】:
【参考方案6】:我对 jQuery 的了解很浅,但我可以给你一个提示:记住 jQuery 是在客户端执行的,而 ASP 按钮在服务器上呈现并在响应中返回。
当您的页面从服务器返回时,请仔细检查按钮的 HTML 标记,并确保其结构符合您的预期。例如,可能没有按预期设置 ID 属性。
【讨论】:
【参考方案7】:您的按钮控制器是 runat="server",因此这意味着 .NET 将在将控制器的 ID 呈现为 HTML 之前对其进行修改。
jQuery 尝试使用该 ID 来做任何你想做的事情。但是ID已经不一样了。
在你的按钮上使用一个类。我知道它不如 ID 快,但这是最好的方法,因为 .NET 不会修改你的 css 类。
【讨论】:
【参考方案8】:如果您的 ASP:Button 包含 runat="server"
,那么 .NET 将在 ID 值到达 DOM 之前对其进行修改,因此您生成的 <input>
最终可能看起来像
<input id="ctl00_ContentPlaceHolder1_btnSubmitASP" />
因此,您的 jQuery 选择器 $('#btnSubmitASP')
不再有效,因为 ID 已更改。
使用 Firebug 或右键单击 -> 查看源以确认实际 ID 值。
【讨论】:
以上是关于关于 <asp:Button> 的 JQuery / ASP.NET 新手问题的主要内容,如果未能解决你的问题,请参考以下文章
jquery mobile 和 asp:button 的问题
如何使用 JavaScript 调用 asp:Button OnClick 事件? [复制]