SimpleModal，ASP.NET 按钮没有响应答案

【问题标题】：SimpleModal, no response from ASP.NET buttonSimpleModal，ASP.NET 按钮没有响应
【发布时间】：2010-06-09 01:58:55
【问题描述】：

我有以下代码。

 $(document).ready(function() {
        $('#btnOpen').click(function(e) {
            $('#content').modal({
                onOpen: function(dialog) {
                    dialog.overlay.fadeIn('slow', function() {
                        dialog.data.hide();
                        dialog.container.fadeIn('slow', function() {
                            dialog.data.slideDown('slow');

                        });
                    });
                },
                onClose: function(dialog) {
                    dialog.data.fadeOut('slow', function() {
                        dialog.container.slideUp('slow', function() {
                            dialog.overlay.fadeOut('slow', function() {
                                $.modal.close(); // must call this!
                            });
                        });
                    });
                }
            });

        });
        $('#btnClose').click(function(e) {
            $.modal.close();
        });

如果我使用<a hrf ="#" id="btnOpen">Open</a>，它可以完美运行。如果我将替换为 ASP.net 按钮，
<asp:Button ID="btnOpen" runat="server" Text="Open" />，则什么也没有发生...请帮忙？

【问题讨论】：

标签： asp.net jquery simplemodal

【解决方案1】：

ASP.Net 将根据控件的容器自动为服务器端控件生成唯一 ID。

因此，生成的 HTML 实际上并没有 #btnOpen 元素。

您需要使用 ASP.Net 生成的客户端 ID，如下所示：

$('#<%= btnOpen.ClientID %>').click(...);

或者，在 ASP.Net 4.0 中，您可以设置控件的 ClientIDMode property 以防止 ASP.Net 生成唯一 ID：

<asp:Button ID="btnOpen" runat="server" Text="Open" ClientIDMode="Static" />

【讨论】：

【解决方案2】：

问题在于 ASP.Net 控件将父容器的名称附加到它们的 ID，因此如果您在生成的页面上查看 HTML 源代码，您将看到按钮的 ID 不是 btnOpen 而是 parentContainerID_btnOpen。

如果您使用的是 ASP.Net 4，您可以通过设置选项让按钮不附加父控件名称，否则您需要更改 javascript 代码以使用正确的 ID。

【讨论】：

好吧，老实说，我检查了源代码。 asp:Button 只是呈现为 btnOpen，而不是 parentContainerID_btnOpen。我尝试了最简单的警报功能，它可以工作。这意味着 jQuery 可以正确找到我的 asp 按钮。

【解决方案3】：

这是工作代码：

$('#<%= btnOpen.ClientID %>').click(function(e) {
            e.preventDefault();
            $('#content').modal({
                onOpen: function(dialog) {
                    dialog.overlay.fadeIn('slow', function() {
                        dialog.data.hide();
                        dialog.container.fadeIn('slow', function() {
                            dialog.data.slideDown('slow');

                        });
                    });
                },
                onClose: function(dialog) {
                    dialog.data.fadeOut('slow', function() {
                        dialog.container.slideUp('slow', function() {
                            dialog.overlay.fadeOut('slow', function() {
                                $.modal.close(); // must call this!
                            });
                        });
                    });
                }
            });

        });

只有两个变化 1：我把名字改成了('#<%= btnOpen.ClientID %>').click(...); 2：我加了e.preventDefault();

但是，不允许从 asp 按钮回发

【讨论】：