关于 <asp:Button> 的 JQuery / ASP.NET 新手问题答案

【问题标题】：JQuery / ASP.NET newbie questions about <asp:Button>关于 <asp:Button> 的 JQuery / ASP.NET 新手问题
【发布时间】：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 按钮执行此操作的诀窍是什么吗？

谢谢

【问题讨论】：

标签： asp.net jquery jquery-selectors

【解决方案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 值。

【讨论】：