JQuery / ASP.NET初学者关于<asp:Button>的问题

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按钮实现这个功能吗？

谢谢。

- markiyanm

Answer 1

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

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

- recursive

---

我不知道这个。谢谢你提供的信息。但是如果你想在CSS中使用ID进行样式设置，它仍然会引起问题。 - Gabriel

没错。您可以通过使用CSS类（在ASP.NET中的CssClass属性）或将按钮包装在具有ID或其他方法的div中来解决它。 - recursive

Answer 2

如果您正在使用asp.net 4.0，可以将按钮的ClientIDMode属性设置为"Static"。这将防止运行时干扰ID。

- DancesWithBamboo

---

目前只有 3.5，不过以后知道了会很有帮助。 - markiyanm

Answer 3

试试这个：

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

解释： 当ASP.NET控件被发送到客户端时，它们的名称会被重命名。因此，你的ASP.NET按钮在客户端没有一个名为"btnSubmitASP"的客户端ID。上面的代码在服务器端调用服务器控件并获取其客户端ID以在jQuery代码中使用。

另外，你可以使用jQuery选择器：

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

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

- Matthew Jones

Answer 4

对于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" />

- Kelsey

Answer 5

除了使用ClientId的另一种选择是给ASP:button分配一个唯一的class。这样，您的选择器将如下所示：

<asp:button runat="server" CssClass="submitbutton">/<asp:button>

<script>
        $("submitbutton").click(function () {
            $('#form1').fadeOut('fast', function () {
                $('#processing').fadeIn('fast', function () {
                });
            });
        });
 </script>

- David Robbins

Answer 6

如果您的ASP:Button包含runat="server"，那么.NET将在它到达DOM之前修改ID值，因此您得到的<input>可能最终看起来像这样。

<input id="ctl00_ContentPlaceHolder1_btnSubmitASP" />

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

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

- Phil Scholtes

Answer 7

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

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

- Dan J

Answer 8

你的按钮控制器是 runat="server" 的，这意味着在将其呈现为 HTML 之前，.NET 将修改控制器的 ID。

jQuery 尝试使用该 ID 来执行您想要执行的任何操作。但是，ID 不再相同。

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

- Gabriel