jQuery 对话框在屏幕上闪烁，而不是留在原地等待用户输入

Question

在这个 Asp.net 网络表单应用程序中，我不得不添加一个 jQuery 对话框，因为客户想要一个自定义弹出确认框。我必须在后面的代码中附加对话框，因为对话框只会添加到 GridView 的某些行中的按钮。当单击按钮以显示对话框时，它只会在屏幕上闪烁，用户没有时间单击按钮。以为是 GridView_RowCommand 事件末尾的重定向导致了这一点，但一旦被注释掉，它仍然在屏幕上闪烁。认为它与按钮本身的回发功能有关，但似乎无法解决这个问题。尝试在后面的代码中通过 jQuery 而不是 OnClientClick 属性附加对话框的打开，但这似乎也不起作用。有人可以看一下代码片段以了解我做错了什么或建议另一种方法来完成我需要完成的工作吗？这是阻止我完成这个项目的唯一障碍。非常感谢您的帮助。

HTML 对话框：

<div style="display:none" id="dialog-warning" title="Out of Network">
        <p class="CallOut">
            <asp:Label ID="lblOutOfNetworkMsg" HtmlEncode="false" runat="server"></asp:Label>
        </p>
        <p style="text-align:center;">
        <asp:Button style="width:200px; background-color:#E9967A; font-family:Arial; font-size:11px; font-weight:bold; border:2px solid black;" ID="btnBack" runat="server" OnClientClick="return true;" CausesValidation="false" /><br /><br />
        <asp:Button style="width:200px; background-color:#E9967A; font-family:Arial; font-size:11px; font-weight:bold; border:2px solid black;" ID="btnProceed" runat="server" OnClientClick="return false;" CausesValidation="false" />
        </p>
    </div>

jQuery 用于设置对话框样式、打开对话框并将其附加到所需按钮：

$(function () {
            var dlg = $("#dialog-warning").dialog({
                resizable: false,
                height: 200,
                width: 300,
                modal: true,
                autoOpen: false,
                open: function (event, ui) {
                    $(".ui-dialog-titlebar-close", ui.dialog).hide();
                }
            }).prev(".ui-dialog-titlebar").css("background", "#A0A0A0").css("font-family", "Arial").css("font-weight", "bold").css("color", "white").css("text-align", "center").css("font-size", "11px");
            dlg.parent().appendTo(jQuery("form:first"));
        });

        function OpenDialog() {
            $("#dialog-warning").dialog("open");
        }

        $(document).ready(function () {
            $('[outofnetwork=true]').click(function () {
                OpenDialog();
            })
        })

GridView_RowDataBound 事件（添加属性以标识哪些行需要附加对话框，然后在 $(document).ready() 中使用 jQuery 附加功能以打开对话框）：

else
                    {
                        e.Row.Cells[11].Style.Add("color", "#ff0000");

                        if (string.IsNullOrEmpty(ss.PhysicalServices))
                        {
                            //btn.OnClientClick = "OpenDialog();";
                            btn.Attributes.Add("outofnetwork", "true");
                        }
                    }

GridView_RowCommand事件（点击按钮后执行的代码）：

if (e.CommandName == "Navigate")
            {
                //CommandArgument comes in as XXX|YYY|ZZZ where XXX is the SiteID and YYY is the Network
                //and ZZZ is the NetworkSort value. We parse out the values by splitting the CommandArgument on the pipe symbol
                //Element 0 (zero) is the siteid and element 1 (one) is the network and element 2 (two) is the NetworkSort value.

                oEventFlow.ClinicDetails.SiteID = Convert.ToInt32(e.CommandArgument.ToString().Split('|')[0].ToString());
                oEventFlow.ClinicDetails.Network = Convert.ToInt32(e.CommandArgument.ToString().Split('|')[1].ToString());
                oEventFlow.ClinicDetails.NetworkSort = Convert.ToInt32(e.CommandArgument.ToString().Split('|')[2].ToString());

                Session[EventFlow.cEVENTFLOWSessionKey] = oEventFlow;

                //Redir(oEventFlow.SiteSelectionRedirect);

                //int selectedIndex = Convert.ToInt32(e.CommandArgument.ToString().Split('|')[3].ToString());
                //GridViewRow selectedRow = gridResults.Rows[selectedIndex];

                //if (selectedRow.Cells[11].Text != "OUT OF NETWORK")
                //{
                //    Redir(oEventFlow.SiteSelectionRedirect);
                //}
            }

希望这很清楚我要完成的任务。如果没有，请发表评论，我会更正。再次感谢。

Answer 1

所以我认为您的问题是事件默认是点击 asp 按钮时的回发。这就是模态打开时闪烁的原因，因为它打开然后页面重新加载。您可以通过

解决这个问题

1) 在 openDialog() 函数或 e.preventDefault 结束时返回 false。这就涉及到下面的栈溢出question
2) 使用更新面板
3) 使用常规html按钮（需要指定type="button"）

防止默认

所以你会在 aspx

的服务器上运行对话

<div style="display:none" id="dialog_warning" title="Out of Network" runat="server">
        <p class="CallOut">
            <asp:Label ID="lblOutOfNetworkMsg" HtmlEncode="false" runat="server"></asp:Label>
        </p>
        <p style="text-align:center;">
        <asp:Button style="width:200px; background-color:#E9967A; font-family:Arial; font-size:11px; font-weight:bold; border:2px solid black;" ID="btnBack" runat="server" OnClientClick="return true;" CausesValidation="false" /><br /><br />
        <asp:Button style="width:200px; background-color:#E9967A; font-family:Arial; font-size:11px; font-weight:bold; border:2px solid black;" ID="btnProceed" runat="server" OnClientClick="return false;" CausesValidation="false" />
        </p>
</div>

<script>
    // your js code
    // etc

    function OpenDialog(e) {
        $("#dialog-warning").dialog("open");

        // prevent default
        e.preventDefault();
    }
</script>

然后在 GridView_RowDataBound

btn.Click += new EventHandler(delegate (object _s, EventArgs _e){

   // your code
   // etc

   // add client click           
   dialog_warning.OnClientClick = "OpenDialog()";

});

更新面板

您只需将按钮包装在更新面板中以及任何将由代码隐藏更新的内容，但由于除了模态弹出窗口之外没有任何变化，您可以将按钮留在面板中

<asp:UpdatePanel id="UpdatePanel1" runat="server" updatemode="Conditional">
    <ContentTemplate>
       <asp:Button id="button1" runat="server" Text="Click me!" />
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger controlid="button1" eventname="Click" />
    </Triggers>
</asp:UpdatePanel>

html 按钮

向单元格动态添加一个 html 按钮，并在您的行数据绑定中设置了 onclick

e.Row.Cells[i].Controls.Add(
    new LiteralControl("<button type='button' onclick='OpenDialog()'></button>")
);

Answer 2

我不得不使用一些技巧来解决这个问题，使用 jQuery、另一个服务器控制按钮和几个隐藏字段。

GridView_RowDataBound 事件处理程序中的代码将 class 添加到符合条件的 asp 按钮。

                    if ((PhysicalNetworkTypes)ss.PhysicalNetworkType == PhysicalNetworkTypes.ContractedInNetwork)
                    {
                        e.Row.Cells[11].Style.Add("color", "#63d834");
                    }
                    else
                    {
                        e.Row.Cells[11].Style.Add("color", "#ff0000");

                        if (string.IsNullOrEmpty(ss.PhysicalServices))
                        {
                            btn2.CssClass += " outofnetwork";
                        }
                    }

我在与原始 OneClickButton 相同的列中添加了一个 asp:Button，我最终隐藏了它。新按钮将处理确定对话框何时显示或不显示的所有前端功能。

                            <ItemTemplate>
                                <cc2:OneClickButton Text='Select' CssClass='NavButton' runat='server' ID='btnGetReport' CausesValidation='false'
                                    CommandName='Navigate' Width="100" style="display:none;" />
                                <asp:Button Text="Select" CssClass="NavButton network" runat="server" ID="btnDummy" CausesValidation="false" CommandName="Navigate" Width="100" OnClientClick="return false;" />
                            </ItemTemplate>

我添加了一个隐藏字段，用于保存 OneClickButton 的相应名称和另一个隐藏字段，如果单击对话框中的继续下一步按钮，该隐藏字段将保存值 true。对话框中的 Back to Search Clinic 按钮只会关闭对话框。对话框中的继续下一步按钮将调用 btnToClick 隐藏字段中保存的相应 OneClickButton 的 Click 事件。

<input type="hidden" id="btnProceedClicked" runat="server" />


<div style="display:none" id="divWarning" title="Out of Network">
    <p class="CallOut">
        <asp:Label ID="lblOutOfNetworkMsg" HtmlEncode="false" runat="server"></asp:Label>
    </p>
    <p style="text-align:center;">
    <asp:Button style="width:200px; background-color:#E9967A; font-family:Arial; font-size:11px; font-weight:bold; border:2px solid black;" ID="btnBack" runat="server" OnClientClick="$('#divWarning').dialog('close');" CausesValidation="false" /><br /><br />
    <Button style="width:200px; background-color:#E9967A; font-family:Arial; font-size:11px; font-weight:bold; border:2px solid black;" ID="btnProceed" CausesValidation="false">Proceed to Next Step</Button><input type="hidden" id="btnToClick" />
    </p>
</div>

在 $(document).ready() 中，我通过替换 Asp.net 按钮的名称并将该值放在 btnToClick 隐藏字段中来获取 OneClickButton 的 ID。该对话框仅针对具有 class outofnetwork 的 asp 按钮显示，该按钮在代码隐藏的 GridView_RowDataBound 事件处理程序中设置。否则，将为相应的 OneClickButton 调用 click() 方法。此外，如果在对话框中单击继续下一步按钮，则 btnProceedClicked 隐藏字段中将存储一个 true 值。该值在 GridView_RowCommand 事件处理程序中用于确定是否应该进行重定向。

$(function () {
            var dlg = $("#divWarning").dialog({
                resizable: false,
                height: 200,
                width: 300,
                modal: true,
                autoOpen: false,
                open: function (event, ui) {
                    $(".ui-dialog-titlebar-close", ui.dialog).hide();
                }
            }).prev(".ui-dialog-titlebar")
                .css("background", "#A0A0A0")
                .css("font-family", "Arial")
                .css("font-weight", "bold")
                .css("color", "white")
                .css("text-align", "center")
                .css("font-size", "11px");
            dlg.parent().appendTo(jQuery("form:first"));
        });

        $(document).ready(function () {
            $('.network').click(function () {
                console.log(this);

                var btnID = '#' + $(this).attr("id").replace("btnDummy", "btnGetReport");

                if ($(this).hasClass('outofnetwork')) {
                    $('#btnToClick').val(btnID);
                    $("#divWarning").dialog("open");
                }
                else {
                    $(btnID).click();
                }

                return false;
            });

            $('#btnProceed').on('click', function () {
                console.log($('#btnToClick').val());
                $('#ctl00_ContentPlaceHolder1_btnProceedClicked').val("true");
                $($('#btnToClick').val()).click();
            });
        })

在 GridView_RowCommand 事件处理程序中添加代码以确定是否应该进行重定向。

                //Grabs the index from the end of the CommandArgument and uses to get the selected row in the GridView.
                int selectedIndex = Convert.ToInt32(e.CommandArgument.ToString().Split('|')[3].ToString());
                GridViewRow selectedRow = gridResults.Rows[selectedIndex];

                //Redirects if an "IN NETWORK" row was selected or and "OUT OF NETWORK" row was selected and the user clicked on Proceed to Next Step button in the popup dialog.
                if (selectedRow.Cells[11].Text != "OUT OF NETWORK" || (selectedRow.Cells[11].Text == "OUT OF NETWORK" && btnProceedClicked.Value == "true"))
                {
                    Redir(oEventFlow.SiteSelectionRedirect);
                }

jQuery 对话框在屏幕上闪烁，而不是留在原地等待用户输入

jQuery Dialog Flashes On Screen Instead of Staying Put for User Input

asp.net

gridview

jquery-ui-dialog

防止默认

更新面板

html 按钮