关于 <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 内联以创建您的脚本,因此更改以下行以使用 ButtonClientID 属性:

$('#<%= btnSubmitASP.ClientID %>').click(function ()    

您需要获取ClientID,因为 ASP.NET 将名称添加到命名空间并防止名称重复。如果您查看 ASP.NET Button,您会注意到 nameID 属性添加了很多,例如:

<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 之前对其进行修改,因此您生成的 &lt;input&gt; 最终可能看起来像

<input id="ctl00_ContentPlaceHolder1_btnSubmitASP" />

因此,您的 jQuery 选择器 $('#btnSubmitASP') 不再有效,因为 ID 已更改。

使用 Firebug 或右键单击 -> 查看源以确认实际 ID 值。

【讨论】:

以上是关于关于 <asp:Button> 的 JQuery / ASP.NET 新手问题的主要内容,如果未能解决你的问题,请参考以下文章

ASP Button OnClick 代码隐藏没有动作

jquery mobile 和 asp:button 的问题

如何使用 JavaScript 调用 asp:Button OnClick 事件? [复制]

.net asp:button按下,页面刷新了,js不能维持原来的状态了怎么办?

jquery获取服务器asp:button事件获取不了

是否可以用 HTML 元素替换 asp:button