JavaScript 学习（一）：onclick() 和onclientclick() 事件

onclick是指调用server端的事件，就是写在CS文件中的。

onclientclick是指在控制输出HTML代码时 调用javascript中的事件。

自己写代码验证过了，如果一个button里同时有这两个事件，则是先执行onclientclick然后再执行onclick事件。

很多时候都是先用onclientclick来做验证。如果验证通过以后再继续执行后台server端的onclick事件。这个时候就要注意onclientclik的用法了。

用法一：

如果验证失败 则在onclentclick事件里返回false，就不会在执行onclick后台的事件了。

//html代码
<asp:Button ID="btnSubmit" Text="submit" runat="server"      OnClick="btnSubmit_Click"  
OnClientClick="if(!validate()) return false;"/>

//javascript 代码
<script type="text/javascript">
      function validate(){
        alert("all right. you got me.");
        return true;
       //return false;
    }

</script>

用法二：在onclientclick return javascript 中function结果，

//html code
<div id="divSection1" align="center">
    <div>
    </div>
    <table>
        <tr>
            <td>
                <asp:Label ID="Label1" runat="server">number one: </asp:Label>
            </td>
            <td>
                <input id="Text2" type="text" />
            </td>
        </tr>
        <tr>
            <td>
                <asp:Label ID="Label2" runat="server">number two: </asp:Label>
            </td>
            <td>
                <input id="Text3" type="text" />
            </td>
        </tr>
        <tr>
            <td>
                <asp:Label ID="Label3" runat="server">Operation: </asp:Label>
            </td>
            <td>
                <asp:DropDownList ID="DropDownList1" runat="server">
                    <asp:ListItem Enabled="true" Text="Select Operation" Value="-1"></asp:ListItem>
                    <asp:ListItem Text="Plus" Value="0"></asp:ListItem>
                    <asp:ListItem Text="Minus" Value="1"></asp:ListItem>
                    <asp:ListItem Text="Multiply" Value="2"></asp:ListItem>
                </asp:DropDownList>
            </td>
            <td>
                <asp:Button ID="btnSubmit" Text="submit" runat="server" OnClick="btnSubmit_Click"
                    OnClientClick="return validate()" />
            </td>
        </tr>
        <tr>
            <td>
                <asp:Label ID="Label4" runat="server">Result: </asp:Label>
            </td>
            <td>
                <input id="Text1" />
            </td>
        </tr>
    </table>
</div>

//javascript code
<script type="text/javascript">
    debugger;
    function validate() {
        var result = true;
        if ($('#<%=DropDownList1.ClientID%>').val() != -1) {
            alert("all right. you are doing the right thing.");
            result = true;
        }
        else {
            alert("please select the operation.")
            result = false;
        }
        return result;

    }

</script>

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

在asp.net中是不能和winform一样 直接用messagebox显示提示信息的。可以用javascript实现。

        protected void btnSubmit_Click(object sender, EventArgs e)
        {
            ClientScriptManager clientScript = Page.ClientScript;
            string message = "this is called the event from the client side.";
            StringBuilder sb = new StringBuilder();
            sb.Append("<script type='text/javascript'>");
            sb.Append("alert('");
            sb.Append(message);
            sb.Append("')");
            sb.Append("</script>");
            clientScript.RegisterClientScriptBlock(this.GetType(), "alert", sb.ToString());
          
        }