无法在jQuery对话框中单击asp.net按钮

Question

无法在jQuery对话框中单击asp.net按钮

c#javascriptjqueryasp.netvisual-studio-2010

15

我已经在网上搜索并尝试了一些提供的解决方案，但都没有为我工作。

我有一个按钮在一个div中。我正在jquery对话框中显示该div。按钮点击在jquery对话框中不起作用。

我的代码如下:

aspx

    <div id='one'>
 <asp:LinkButton ID="ConfigureAlerts" OnClick="btnConfigureAlerts_Click" runat="server">Configure Alerts</asp:LinkButton>
</div>
<div id="ViewModalPopupDiv2">
        <asp:UpdatePanel ID="UpdatePanel3" runat="server">
            <ContentTemplate>
            <asp:Panel ID="Panel2" runat="server" HorizontalAlign="left" ScrollBars="Auto">
            <asp:Button ID="btnGetLogs" runat="server" Text="SendAlerts" OnClick="btnSendAlertEmail_Click"/>
            </asp:Panel>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>

jQuery

function ViewModelPopup2() {
            $("#ViewModalPopupDiv2").dialog({
                scrollable: true,
                width: 800,
                modal: true
            });
        }

aspx.cs

protected void btnSendAlertEmail_Click(object sender, EventArgs e)
        {

            // Code to send email

        }

protected void btnConfigureAlerts_Click(object sender, EventArgs e)
        {

        ScriptManager.RegisterStartupScript
                       (this, this.GetType(), "callScriptFunction", "ViewModelPopup2();", true);
        }
    }

请告诉我需要做什么来触发服务器控件事件。

- CodeNinja

你的 onClick 事件不应该是 btnConfigureAlerts_Click() 吗？如果只是要调用 JavaScript 函数，为什么不使用普通的 HTML 按钮呢？ - Hanlet Escaño

我认为她想要从jquery对话框内的按钮触发后面的代码。我认为你的按钮ID需要是“btnConfigureAlerts”。 - ElliotM

请检查您的控制台是否有JavaScript错误。 - Hanlet Escaño

抱歉造成困扰，btnConfigureAlerts和btnSendAlertEmail是两个不同的按钮。 - CodeNinja

2个回答

4

这是一个经典问题，感谢使用jQuery移动我的对话框。

由于某种原因，jQuery UI会将您的对话框代码移动到HTML标记的底部，超出了您的表单标记。您需要使用更多的jQuery将对话框移回表单中：

dlg.parent().appendTo(jQuery('form:first'));

其中dlg是您的jQuery.UI对话框对象。

        var dlg = $("#ViewModalPopupDiv2").dialog({
            scrollable: true,
            width: 800,
            modal: true
        });
        dlg.parent().appendTo(jQuery('form:first'));

希望这些方法能让您的问题得到解决。祝好！

如果上述方法无效，请尝试在打开事件中执行以下操作：

open: function(type,data) { $(this).parent().appendTo("form"); }

- TombMedia

嘿，TombMedia！谢谢你！不知何故，这个解决方案不起作用。我正在将上面的代码包装在一个名为function ViewModalPopup2()的函数中。你认为这会导致问题吗？ - CodeNinja

不，那根本不是问题。很高兴看到你已经解决了这个问题。 - TombMedia

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Guilherme de Jesus Santos · Accepted Answer

我在使用asp.net按钮和jQuery UI对话框时也遇到了这个问题。为了解决它，您需要将您的asp.net按钮中的标签UseSubmitBehavior设置为false。

如果UseSubmitBehavior属性被设置为true（这是默认值），则该按钮将使用浏览器的提交机制（并且jQuery Dialog UI正在操作它）。如果UseSubmitBehavior被设置为false，则该按钮将使用asp.net框架在页面中包含的客户端脚本来提交表单。

因此，您的HTML应该像这样：

<div id='one'>
<asp:LinkButton ID="ConfigureAlerts" OnClick="btnConfigureAlerts_Click" runat="server">Configure Alerts</asp:LinkButton>
</div>
<div id="ViewModalPopupDiv2">
        <asp:UpdatePanel ID="UpdatePanel3" runat="server">
            <ContentTemplate>
            <asp:Panel ID="Panel2" runat="server" HorizontalAlign="left" ScrollBars="Auto">
            <asp:Button ID="btnGetLogs" runat="server" Text="SendAlerts" OnClick="btnSendAlertEmail_Click" UseSubmitBehavior="false" />
            </asp:Panel>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>

更多详细信息请参见http://msdn.microsoft.com/library/system.web.ui.webcontrols.button.usesubmitbehavior.aspx