Friday 6 December 2013

Use Of OnClientClick And OnClick Event Through Javascript in asp.net

Output :

When We click on "Button" then a Message box will apear like below  if you click on Ok button then it return  true  thereafter code behind code will be execute .

If we click on Cancel then code behind code will not be execute .


 In second figure , I am validating three textboxs onClick "Save" Button  if user not fill the textboxs then massage will be generated. And return false; that's why codebehind code will not execute .

if  we fill all textboxs then message will not be generated and return true ; that's why  code beind code will execute.



Aspx Page



<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default15.aspx.cs" Inherits="Default15" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script language="javascript" type="text/javascript">
        function validate() {
       
            var summary = "";
            summary += isvaliduser();
            summary += isvalidFirstname();
            summary += isvalidLocation();
            if (summary != "") {
              alert(summary);
              
               return false;
            }
            else {
                return true;
            }
        }
        function isvaliduser() {
            var uid;
            var temp = document.getElementById("<%=txtuser.ClientID %>");
            uid = temp.value;
            if (uid == "") {
                return ("Please Enter UserName" + "\n");
            }
            else {
                return "";
            }
        }
        function isvalidFirstname() {
            var uid;
            var temp = document.getElementById("<%=txtfname.ClientID %>");
            uid = temp.value;
            if (uid == "") {
                return ("Please enter firstname" + "\n");
            }
            else {
                return "";
            }
        }
        function isvalidLocation() {
            var uid;
            var temp = document.getElementById("<%=txtlocation.ClientID %>");
            uid = temp.value;
            if (uid == "") {
                return ("Please enter Location" + "\n");
            }
            else {
                return "";
            }
        }
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:Button ID="Button1" runat="server" OnClientClick="return confirm('do you want to do postback')"
              OnClick="Button1_Click" Text="Button" /><br /><br />


        <table align="left">
<tr>
<td>UserName</td>
<td><asp:TextBox ID="txtuser" runat="server" /></td>
</tr>
<tr>
<td>First Name</td>
<td><asp:TextBox ID="txtfname" runat="server" /></td>
</tr>
<tr>
<td>Location</td>
<td><asp:TextBox ID="txtlocation" runat="server" /></td>
</tr>
<tr>
<td></td>
<td>
<asp:Button ID="btnsubmit" runat="server" Text="Save"
OnClientClick ="return validate();" onclick="btnsubmit_Click" />
</td>
</tr>
</table>
    </div>
    </form>
</body>
</html>


Aspx.cs Page


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class Default15 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void Button1_Click(object sender, EventArgs e)
    {
     
              Response.Write("button click");
        
    }
    protected void btnsubmit_Click(object sender, EventArgs e)
    {
        Response.Write("This is my testing of onClick and OnClientClick Event");
    }
}

No comments:

Post a Comment