Javascript 模态框 OnCommand 不起作用

Question

        <div>
            
                    <asp:Repeater ID="ProductView" runat="server" OnItemDataBound="Repeater1_ItemDataBound" >
        
                        <ItemTemplate>
                            <asp:Label ID="lblAddressID" runat="server" Text='<%# Eval("OrderNumer") %>' Visible = "false" />
                                         
                                         <asp:LinkButton ID="Delete" CssClass="MordersButton"  OnCommand="btnDelete_Click" OnClientClick="return ShowMessage();" runat="server" Text='<%#Eval("Delete") %>'></asp:LinkButton></h5>
                                    
        
                        </ItemTemplate>
        
                    </asp:Repeater>
                    </div>
    
    <script type="text/javascript">
                    function ConfirmBox(msgtitle, message, controlToFocus) {
                        $("#msgDialogAlert").dialog({
                            autoOpen: false,
                            modal: true,
                            title: msgtitle,
                            closeOnEscape: true,
                            buttons: [{
                                text: "Yes",
                                click: function () {
                                    
                                    $(this).dialog("close");
                                    if (controlToFocus != null)
                                        controlToFocus.focus();
                                    
                                    
                                }
                            },
                            {
                                text: "No",
                                click: function () {
                                    $(this).dialog("close");
                                    if (controlToFocus != null)
                                        controlToFocus.focus();
                                    
                                }
                            }],
                            close: function () {
                                $("#operationMsgAlert").html("");
                                if (controlToFocus != null)
                                    controlToFocus.focus();
                            },
                            show: { effect: "clip", duration: 200 }
                        });
                        $("#operationMsgAlert").html(message);
                        $("#msgDialogAlert").dialog("open");
                    };
    
                    function ShowMessage() {
                        ConfirmBox("This is Title - Please Confirm", "Are you sure you wanted to delete? This cannot be undone!", null);
                        return false;
                    }
        </script>

 protected void btnDelete_Click(object sender, EventArgs e)
    {
        RepeaterItem item = (sender as LinkButton).Parent as RepeaterItem;
        string name = (item.FindControl("Delete") as LinkButton).Text.Trim();
        string OrderNumber = (item.FindControl("lblAddressID") as Label).Text.Trim();
        {
            using (SqlCommand cmd = new SqlCommand("DC_ManageOrders_Update"))
            {
                cmd.CommandType = CommandType.StoredProcedure;
                cmd.Parameters.AddWithValue("@CategoryType", name);
                cmd.Parameters.AddWithValue("@OrderNumber", OrderNumber);
                cmd.Connection = cn;
                cn.Open();
                cmd.ExecuteNonQuery();
                cn.Close();
            }
        }
        this.FlavorImage1Bind();
    }
    

如果我在模式框打开后单击“是”按钮，则不会发生删除。请帮助我如何实现这一目标 我想运行 btnDelete_Click 代码来删除记录，没有模式框通过普通的 javascript 我可以删除记录。 如果有人能够帮助我，那对我来说将非常有用......

Answer 1

好的，问题在这里？

当您使用 onClientClick 时，您的“目标”是返回 true（服务器端代码运行）或 false - 服务器端按钮事件不运行。

所以，你可以说使用 js 确认框。那是因为 confirm() HALTS 代码。

但是，jquery.UI 和事实上大多数基于 Web 的软件不会停止代码。大多数基于 Web 的控件（引导对话框和 jQuery.UI）不是模态的。它们在操作中是异步的。在 js 中阻塞或停止代码是很简单的，这些天很少见。

因此，大多数建议的解决方案都围绕着禁用按钮的事件代码，然后执行 _doPostBack()。这还不错，但是您不能根据返回的真/假来有条件地运行该按钮。所以你最终得到了一个额外的按钮，额外的 _doPoast 回来。所以大多数解决方案真的很差。

所以，当这段代码运行时：

OnClientClick="return ShowMessage();

以上代码异步运行 - 不等待。所以对话框弹出，但代码继续运行，服务器端按钮单击将触发！ - （并且显示的对话框当然会变质，因为我们有一个页面回发。

所以，我们想要：

avoid document ready solutions - they are horrid to debug
document ready means we have a VERY difficult time following code flow.

we want a simple function - has to return true/false.
but, jQuery.UI dialogs do not wait, and they don't halt code.

那么，为了避免世界贫困，2-3个额外的例程，凌乱的_doPostback，以及禁用按钮的代码？

这样做：

采用一个代码标准，即创建一个与函数同名的真/假变量（末尾带有“OK”），并将变量范围限定为该函数。

另外，我假设单击时删除按钮（没有 onclientclick）按您的意愿工作。

<script>
   var mypopok = false;     // runs on browser load

   function mypop() {

      if (mypopok) {
           return true;
      }

      mydiv = $('#dlg1');
      mydiv.dialog({
         autoOpen: false, modal: true, title: 'Yes/no test', width: '250px',
                    position: { my: 'top', at: 'top+150' },
                    buttons: {
                        'ok': function () {
                            mypopok = true;
                            mydiv.dialog('close');
                            $('#Button1').click();
                        },
                        'cancel': function () {
                            mydiv.dialog('close')
                        }
                    }
                });
                // Open the dialog
                // if dialog has MORE then just ok, cancel, and say has text
                // box, check box in content, then you MUST move back to form
                mydiv.parent().appendTo($("form:first"))
                mydiv.dialog('open')
                return false;
            }
        </script>

现在，按钮点击代码如下所示：

  <asp:Button ID="Button1" runat="server" Height="48px" Text="Button" Width="171px" 
             ClientIDMode="Static" OnClientClick="return mypop();"/>

那么会发生什么？

您将单击按钮 - 代码将运行并返回 false ！！！ - （记住，它不会等待或停止）。现在对话框确实弹出了，但按钮事件代码不会触发。

根据是或否，我们将该 bol 标志设置为 true 或 false。如果取消，那么我们只需关闭对话框。如果“ok”，那么我们设置 flag = true 并重新单击 SAME 按钮。现在按钮单击再次运行，但我们在例程中在弹出对话框代码运行之前返回 true，因此现在服务器端事件单击运行。

我们：

 did not have to consider using await (promise)
 did not have to add a extra button
 did not have document ready and code ALL OVER in the page
 did not have to add extra buttons and events.
 code is liner - easy to read - all in one spot.

现在我会考虑将参数添加到实际的 OnClientClick，

这样说：

 OnClientClick="return mypop('This is Title - Please Confirm',
    'Are you sure you wanted to delete? This cannot be undone!', null);"

并将参数添加到 mypop。

你不能真正使用两个例程，因为如上所述：

         function ShowMessage() {
                    ConfirmBox("This is Title - Please Confirm", "Are you sure you wanted to delete? This cannot be undone!", null);
                    return false;
                }

Confirmbox 不会停止或等待 - 代码将“正常运行”并立即返回 false。

所以使用我概述的标志技巧，并在用户点击确定时再次重新单击 SAME 按钮。这样就不用连线 3-4 个例程，也不需要在 js 代码中添加额外的按钮或使用 _DoPostBack()。