OnClick 在 asp.net 中的 OnClientClick 之后执行

Question

我有一个使用 OnClientClick 执行 javascript function 的 asp 按钮，我还想在 OnClientClick 之后执行 OnClick，但是，它永远不会执行。 我在 StackOverflow 和其他页面上经历了很多相同的主题，但它似乎对我不起作用。

<asp:Button ID="btn_del" runat="server" Font-Bold="True" Text="DELETE" Width="130px" UseSubmitBehavior="false" OnClientClick="if (!RunDelete()) return false;" OnClick="btn_del_Click" />

function RunDelete() {
        OnDelete("Delete?", function yes() {
            var id = $('#<%=txt_id.ClientID%>').val();

            $.ajax({
                type: "POST",
                url: "/demo.aspx/DeleteRowDb",
                data: JSON.stringify({ "RecordID": id }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    alert(response.d);
                }
            });
            return true;
            
        },
            function no() {
                return false;
            });
    }

我还尝试使用相同的 OnClick 创建另一个按钮，并尝试使用document.getElementById('<%= btn_del2.ClientID %>').click();从 javascript 执行但它仍然不起作用。 我需要执行 OnClick，因为我需要后面代码中的受保护 void 才能工作，同时我不能在公共 static 字符串 function 中做很多事情。

Answer 1

好的，让我们分解一下。

首先，不需要（或理由）提交行为 = false。

我们这里有一个简单的简按钮。

所以，这样说：

        <asp:Button ID="btn_del" runat="server" 
            Font-Bold="True" Text="DELETE" Width="130px" 
            OnClick="btn_del_Click" />

好的，当我们点击上面的时候，我们后面的代码就会运行。

现在说这个：

    protected void btn_del_Click(object sender, EventArgs e)
    {
        Debug.Print("Code to delete follows");
    }

好的，以上工作。

现在，要控制这个按钮（后面的代码）是否运行我们的代码，那么我们可以引入一个 OnClientClick。

如果客户端（JavaScript）返回 true，那么后面的代码就会运行，如果我们返回 false，那么按钮代码就不会运行。

所以，我们现在可以有这个：

        <asp:Button ID="btn_del" runat="server" 
            Font-Bold="True" Text="DELETE" Width="130px" 
            OnClick="btn_del_Click"
            OnClientClick="return myprompt()"
            CssClass="btn" />

        <script>
            function myprompt() {
                return confirm("Really delete this?")
            }
        </script>

现在我们得到了这个结果：

所以，如果用户点击确定，那么后面的代码就会运行。

如果用户点击取消，那么后面的代码将不会运行。

所以，以上是基本的设计和方法。

好的，内置的浏览器对话框看起来不太好。

那么，让我们用我们可能想要使用的众多（大量）对话框助手和加载项之一来做到这一点。

Since every web site, even these webforms web site has jQuery included by default, then a really great dialog add-in is to use jQuery.ui.

假设 jQuery.UI，则必须对此类代码进行一些更改。

jQuery（和大多数对话框插件）的工作方式是创建一个 div，里面是提示的内容。

然而，这是非常重要的：

大多数（如果不是全部）第 3 方对话框小部件不会阻止调用代码。

换句话说，使用js alert('some message') 或confirm('some message') 非常容易，因为它们会暂停调用代码。

但是，如今大多数（如果不是全部）js 代码都不会阻塞或 HALT 调用代码。 这是为了不冻结浏览器，所以这些天几乎所有浏览器代码都是我们所说的异步。 代码不会等待。

所以，让我们用一个漂亮的对话框来做这件事，并让对话框放在按钮点击旁边。

所以，使用 jQuery.UI（我推荐），那么我们的代码就变成了这样：

        <asp:Button ID="btn_del" runat="server" 
            Font-Bold="True" Text="DELETE" Width="130px" 
            OnClick="btn_del_Click"
            OnClientClick="return myprompt(this)"
            CssClass="btn" />

        <script>
            mypromptok = false
            function myprompt(btn) {
                if (mypromptok) {
                    return true
                }
                // lets pop jquery.UI dialog
                var mydiv = $("#mydeldiv")
                mydiv.dialog({
                    modal: true,
                    appendTo: "form",
                    title: "Delete Hotel?",
                    closeText: "",
                    width: "400px",
                    position: { my: 'left top', at: 'right bottom', of: btn },
                    buttons: {
                        ' ok ': function () {
                            mypromptok = true
                            btn.click() // click button again
                        },
                        ' cancel ': function () {
                            mydiv.dialog('close')
                        }
                    }
                });
                return false
            }
        </script>

        <div id="mydeldiv" style="display:none">
            <h3><i>Delete this Hotel</i></h3>
            <h4><i>This cannot be un-done</i></h4>
        </div>

结果很好，因为弹出是对话框，它会淡出（灰色在背景上），并且对话框位于用户刚刚单击的位置（他们的眼睛将其聚焦在该按钮上，因此弹出对话框正下方并按钮的右侧是用户曾经/正在寻找的位置）。

好的，现在，让我们利用上面的知识，从行的网格中使用它，现在有一个删除按钮和我们的提示。

请注意，您可以按照第一个示例或花哨的第二个示例使用超级简单的 confirm() 对话框。

因此，让我们假设一个 gridview 和一个删除数据的按钮。

所以，说这个标记：

        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
            DataKeyNames="ID" CssClass="table table-hover" Width="40%">
            <Columns>
                <asp:BoundField DataField="FirstName" HeaderText="FirstName" />
                <asp:BoundField DataField="LastName" HeaderText="LastName" />
                <asp:BoundField DataField="HotelName" HeaderText="HotelName" />
                <asp:BoundField DataField="City" HeaderText="City" />
                <asp:BoundField DataField="Description" HeaderText="Description" />
                <asp:TemplateField HeaderText="" ItemStyle-HorizontalAlign="Center">
                    <ItemTemplate>
                    <asp:Button ID="btn_del" runat="server" 
                        Font-Bold="True" Text="Delete" 
                        OnClick="btn_del_Click"
                        OnClientClick="return myprompt(this)"
                        CssClass="btn" />
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>

请注意上面的按钮。

所以，加载网格的代码是这样说的：

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
            LoadGrid();

    }

    void LoadGrid()
    {
        string strSQL = @"SELECT * FROM tblHotelsA ORDER BY HotelName";
        using (SqlConnection conn = new SqlConnection(Properties.Settings.Default.TEST4))
        {
            using (SqlCommand cmdSQL = new SqlCommand(strSQL, conn))
            {
                conn.Open();
                DataTable rstData = new DataTable();
                rstData.Load(cmdSQL.ExecuteReader());
                GridView1.DataSource = rstData;
                GridView1.DataBind();
            }
        }            
    }

现在我们有了这个：

点击我们的按钮，我们会看到：

所以，现在我们对该按钮的删除代码将是这样的：

    protected void btn_del_Click(object sender, EventArgs e)
    {
        Button btn = (Button)sender;
        GridViewRow gRow = (GridViewRow)btn.NamingContainer;

        // get database PK id of row click
        int pkID = (int)GridView1.DataKeys[gRow.RowIndex]["ID"];

        string strSQL = "DELETE FROM tblHotelsA WHERE ID = @ID";
        using (SqlConnection conn = new SqlConnection(Properties.Settings.Default.TEST4))
        {
            using (SqlCommand cmdSQL = new SqlCommand(strSQL, conn))
            {
                cmdSQL.Parameters.Add("@ID", SqlDbType.Int).Value = pkID;
                conn.Open();
                cmdSQL.ExecuteNonQuery();
            }
        }
    }

所以，再次，我们有一个简单的代码事件（代码隐藏），我们有条件地运行此代码基于客户端确认（）（内置 js 对话框），或最后一个示例，其中我们使用了 jQuery.UI 对话框.

因此，如果您想使用第二个示例（jQuery.UI），那么您必须将 jQuery.UI 添加/安装到您的项目中。