当前位置: 代码迷 >> Web前端 >> OnClientClick 跟 OnClick的关系
  详细解决方案

OnClientClick 跟 OnClick的关系

热度:608   发布时间:2013-03-10 09:38:39.0
OnClientClick 和 OnClick的关系

  遇到这样一个问题,具体代码如下:

<asp:LinkButton ID="lblIsEvaluate" runat="server" OnClientClick = "IsEvaluate_Click()">
    <%# Eval("IsEvluation").ToString() == "Y" ? "已评估" : "尚未评估"%>
</asp:LinkButton>
Js代码如下:

function IsEvaluate_Click() {
    if ($("#IsEvluation").attr("title") == "尚未评估") {
        var teacherID = $("#IsEvluation").nextAll("input").eq("0").attr("id");
        var courseID = $("#IsEvluation").nextAll("input").eq("1").attr("id");
        var studentID = $("#IsEvluation").nextAll("input").eq("2").attr("id");
        window.location.href = "EvaluateTeacher.aspx?TeacherID=" + teacherID + "&CourseID=" + courseID +"&StudentID=" + studentID;
    }
}
我想通过JS代码实现页面的跳转,可是使用上面的代码怎么都达不到效果,能看得到页面刷新了,但是就是不跳转。自己鼓捣了好长时间都没找到原因,最后还是找人帮忙找到原因,这个跟大家分享一下。将代码改成如下:

<asp:LinkButton ID="lblIsEvaluate" runat="server" OnClientClick = "return IsEvaluate_Click()">
    <%# Eval("IsEvluation").ToString() == "Y" ? "已评估" : "尚未评估"%>
</asp:LinkButton>
Js代码:

function IsEvaluate_Click() {
    if ($("#IsEvluation").attr("title") == "尚未评估") {
        var teacherID = $("#IsEvluation").nextAll("input").eq("0").attr("id");
        var courseID = $("#IsEvluation").nextAll("input").eq("1").attr("id");
        var studentID = $("#IsEvluation").nextAll("input").eq("2").attr("id");
        window.location.href = "EvaluateTeacher.aspx?TeacherID=" + teacherID + "&CourseID=" + courseID +"&StudentID=" + studentID;
    }
    return false;
}
分析一下原因:

问题还是出在OnClientClick 和 OnClick上,虽然LinkButton中没有添加OnClick事件,但是貌似它会自动添加一个空的OnClick事件,其实就相当于刷新一下页面。而代码的执行顺序是先执行OnClientClick 事件,然后再执行OnClick事件,这样OnClick事件就OnClientClick 事件中的操作给覆盖了,这就导致了问题的发生。


面说说 OnClientClick 和 OnClick的关系

OnClick事件,发生postback,执行后台代码。OnClientClick 事件,就是执行javascipt代码,不会发生postback。简单说,onclick:执行C#代码,onclientclick:执行javascript代码。OnClientClick 事件先于OnClick事件发生,一般执行脚本,在客户端执行。而OnClick是服务器端事件,在服务器端执行,效率一般低于OnClientClick 。

OnClientClick 事件return true:执行onlick事件。return false:不再执行onlick事件。


上面代码的修改,就是让OnClientClick 事件返回false,不让OnClick事件执行,这样就能达到我们想要的效果了。

  相关解决方案