單擊按鈕時，不會引發OnClientClick事件

Question

我有一個像這樣的js函數：

<script type="text/javascript">
       function Cols() {
           rows = document.getElementById("GridView1").rows;
           for (i = 0; i < rows.length; i++) {
               rows[i].cells[8].style.visibility = "visible";
               rows[i].cells[9].style.visibility = "visible";
               rows[i].cells[10].style.visibility = "visible";
               rows[i].cells[11].style.visibility = "visible";
               rows[i].cells[12].style.visibility = "visible";
               rows[i].cells[13].style.visibility = "visible";
               rows[i].cells[14].style.visibility = "visible";
           }
       }

</script>      

以及帶有OnClientClick事件的此按鈕：

<asp:Button ID="Add_Button" runat="server" OnClick="Add_Button_Click" Text="Add New Record" OnClientClick="Cols()" />

我的函數中的單元格引用了我想在客戶端上顯示的Gridview列，然后轉到服務器端的OnClick事件，這使我的GridView頁腳行可見，該頁腳行用於插入新行。

編輯：所以這是我的原始問題：單擊按鈕時，我想使其他列可見，然后在同一click事件中使頁腳行可見。 但是，在引發事件之后，額外的列將變為可見，但頁腳行將變為可見，直到我再次單擊該按鈕。

這是我的Click事件：

protected void Add_Button_Click(object sender, EventArgs e)
    {
        if (GridView1.FooterRow.Visible == false)
            {

                GridView1.FooterRow.Visible = true;
                Add_Button.Text = "Cancel";
                Panel2.Visible = false;

            }
            else
            {
                GridView1.FooterRow.Visible = false;
                Add_Button.Text = "Add New Record";
                GridView1.Columns[10].Visible = false;
                GridView1.Columns[11].Visible = false;
                GridView1.Columns[12].Visible = false;
                GridView1.Columns[13].Visible = false;
                GridView1.Columns[14].Visible = false;
                GridView1.Columns[15].Visible = false;
                GridView1.Columns[16].Visible = false; 
            }

    }

但是，當我單擊按鈕時，將引發我的OnClick事件，但不會引發OnClientClick。 為什么會這樣呢？

Answer 1

您需要取消按鈕的默認操作，即回發。

更改為此（注意返回假部分）：

<asp:Button ID="Add_Button" runat="server" OnClick="Add_Button_Click" Text="Add New Record" OnClientClick="Cols(); return false;" />

Answer 2

是什么告訴您沒有引發OnClientClick事件？ 據我所知，它是被引發的，但是緊接着，您又回發到服務器以在服務器上執行OnClick事件。

因此，您看不到Cols()函數正在執行。

嘗試以這種方式結束Cols()函數：

return false; // prevent the OnClick event from being fired

這樣，僅觸發OnClientClick事件，而不觸發OnClick事件。 顯然，在這一點上保持兩者都沒有意義。 唯一有意義的情況是這樣的JS函數：

return confirm("Are you sure to execute OnClick?");

如果用戶選擇“否”，則他停留在頁面上，否則發生回發。

Answer 3

最簡單的選項是一起擺脫客戶端，然后將按鈕單擊更改為以下內容：

protected void Add_Button_Click(object sender, EventArgs e)
{
    if (Add_Button.Text != "Cancel") //Add Record
    {
        GridView1.FooterRow.Visible = true;
        Add_Button.Text = "Cancel";
        Panel2.Visible = false;
    }
    else //Cancel
    {
         GridView1.FooterRow.Visible = false;
         Add_Button.Text = "Add New Record";
         GridView1.Columns[10].Visible = false;
         GridView1.Columns[11].Visible = false;
         /*etc*/ 
    }
}

這是另一個可能更強大的Servierside選項

protected void Add_Button_Click(object sender, EventArgs e)
{
    bool visibility = false;
    string buttonText = string.empty;
    if (Add_Button.Text != "Cancel") //Add Record
    {
        visibility = true;
        buttonText = "Cancel";
        Panel2.Visible = false;
    }
    else //Cancel
    {
        visibility = false;
        buttonText = "Add New Record";
    }

    Add_Button.Text = buttonText;
    ridView1.FooterRow.Visible = visibility;
    GridView1.Columns[10].Visible = visibility;
    GridView1.Columns[11].Visible = visibility;
    /*etc*/ 
}

客戶端立即發生事后回發，您真的沒有任何收獲。

您的另一選擇是在客戶端全部執行此操作。 我對您Grdiveiw無法給出定制的答案，但是這里是您需要做的基本工作：

• 生成網格后，將CSS類添加到要隱藏的列單元格中，並在頁腳行添加display:none
• 使用javascript刪除顯示隱藏元素的類，並更改按鈕的文本。

如果網格中的列數固定，您甚至可能會變得棘手，只需使用聰明的CSS隱藏頁腳和列即可，而無需在服務器端執行任何操作。