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 property ='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

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

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

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

要让代码正常工作，您需要将控件的ClientID内联到创建脚本，因此请更改以下行以使用ClientID的{{1}}属性：

Button

您需要获取$('#<%= btnSubmitASP.ClientID %>').click(function () {，因为ASP.NET会添加名称以命名它并防止重复名称。如果您查看ASP.NET ClientID，您会注意到Button和name属性添加了更多内容，如：

ID

Answer 5

使用ClientId的另一种方法是为ASP：按钮分配一个唯一的类。您的选择器将如下所示：

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

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

Answer 6

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

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

Answer 7

你的按钮控制器是runat =“server”所以这意味着.NET会在用HTML呈现之前修改控制器的id。

jQuery尝试使用该ID执行您想要执行的任何操作。但身份证不再相同。

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

Answer 8

如果您的ASP：按钮包含runat="server"，那么.NET会在到达DOM之前修改ID值，因此结果<input>可能会看起来像

<input id="ctl00_ContentPlaceHolder1_btnSubmitASP" />

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

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

关于<asp：button> </asp：button>的JQuery / ASP.NET新手问题

8 个答案: