当单击按钮时，OnClientClick事件不会引发

本文关键字：事件 OnClientClick 单击 按钮 | 更新日期: 2023-09-27 17:53:09

我有一个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。为什么会发生这种情况?

当单击按钮时，OnClientClick事件不会引发

您需要取消按钮的默认操作，即回发。

改成这样(注意返回false部分):

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

什么告诉您OnClientClick事件没有引发?据我所知，它被触发了，但是，在此之后，您立即发回服务器以在服务器上执行OnClick事件。

所以你看不到Cols()函数正在执行

尝试这样结束Cols()函数:

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

这样，只触发OnClientClick事件而不触发OnClick事件。显然，在这一点上保留两者是没有意义的。两者都有意义的唯一情况是这样的JS函数:

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

如果用户选择"NO"，他将留在页面上，否则会发生回发。

最简单的选择，将客户端全部去掉，并将您的按钮单击更改为以下内容:

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*/ 
    }
}

这里是另一个可能更健壮的服务端选项

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来隐藏页脚和列，而无需在服务器端做任何事情。

相关文章：