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 添加/安裝到您的項目中。