JQuery / ASP.NET 新手关于的问题

Question

大家好，在获取 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 按钮执行此操作的技巧是什么吗？

谢谢

Answer 1

该控件的 ASP.net 服务器 ID 与 html ID 不同。 （ASP.net 将此称为客户端 ID）。您可以通过以下方式获取客户端 ID：

$('#<%= this.btnSubmitASP.ClientID %>').click( /* etc */ );

Answer 2

如果您使用的是 asp.net 4.0，您可以设置按钮的 ClientIDMode 属性='Static'。这将阻止运行时破坏 ID。

Answer 3

试试这个：

<script>
    $('<%=btnSubmitASP.ClientID%>').click(function () {
        $('#form1').fadeOut('fast', function () {
            $('#processing').fadeIn('fast', function () {
            });
        });
    });
</script>

说明：
当所有控件发送到客户端时，ASP.NET 会重命名它们。因此，您的 ASP.NET 按钮没有客户端 ID“btnSubmitASP”客户端。上面的代码调用服务器端的服务器控件并获取其客户端 ID 以在 jQuery 代码中使用。

或者，您可以使用 jQuery 选择器：

<script>
    $("[id$='_btnSubmitASP']").click(function () {
        $('#form1').fadeOut('fast', function () {
            $('#processing').fadeIn('fast', function () {
            });
        });
    });
</script>

这将查找客户端 ID 以“_btnSubmitASP”结尾的控件。

Answer 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>

Answer 5

对于 ASP.NET 按钮，您应该使用 OnClientClick 属性，因为它已将内置客户端脚本添加到按钮以执行其回发行为。示例：

<asp:Button ID="btnSubmitASP" runat="server"
    OnClientClick="yourJqueryFunction();" />

如果您在 OnClientClick 中返回 false，您将阻止按钮的默认行为阻止 PostBack。不执行任何操作或返回 true 将导致发生PostBack。通过使用此方法，您无需知道 Button 的名称即可附加脚本代码。

为了让您的代码正常工作，您需要内联控件的 ClientID 来创建脚本，因此更改以下行以使用 ClientID 属性>Button：

$('#<%= 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" />

Answer 6

我对 jQuery 的了解很浅，但我可以给你一个提示：记住 jQuery 是在客户端执行的，而 ASP 按钮是在服务器上呈现并在响应中返回的。

当您的页面从服务器返回时，请仔细检查按钮的 HTML 标记，并确保其结构符合您的预期。例如，可能未按预期设置 ID 属性。

Answer 7

您的按钮控制器是 runat="server"，因此这意味着 .NET 将在将控制器渲染为 HTML 之前修改控制器的 id。

jQuery 尝试使用该 ID 来执行您想要执行的任何操作。但ID已经不一样了。

在按钮上使用类。我知道它不如 ID 快，但这是最好的方法，因为 .NET 不会修改您的 css 类。

Answer 8

如果您的 ASP:Button 包含 runat="server"，那么 .NET 将在到达 DOM 之前修改 ID 值，因此您生成的 可能会出现错误因此

<input id="ctl00_ContentPlaceHolder1_btnSubmitASP" />

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

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