单击按钮时，不会引发 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 页脚行可见，页脚行用于插入新行.

编辑： 所以这是我最初的问题：单击按钮时，我想让其他列可见，然后在同一个单击事件中使页脚行可见。但是，在引发事件后，额外的列将变为可见，但在我第二次单击该按钮之前，页脚行不可见。

这是我的点击事件：

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

你需要取消按钮的默认动作，即回发。

改成这个（注意return false部分）：

<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 来隐藏页脚和列，而无需在服务器端执行任何操作。