Wednesday, November 7, 2012

ajax call using jquery in asp.net OR Calling server side methods using JavaScript and JQuery in ASP.Net

As the title says ajax call using jquery in asp.net
             OR
Calling server side methods using JavaScript and JQuery in ASP.Net
In the Other Post showed how to call server side method using ajax calls with out parameters and it was used to bring the url to display the image after image was uploaded Asynchronously.

Now i will show how to check mailID is there or not in the DataBase.







JavaScript :
 This is the script to call the server side method. U need to add jquery as shown below



<script src="scripts/jquery-1.8.0.min.js" type="text/javascript"></script>




<script type="text/javascript">
 
        function CheckMailID(mailid) {
            $.ajax({
                type: "POST",
                url: "Default.aspx/CheckMailID",
                data: '{MailID: "' + $("#<%=txtMailID.ClientID%>")[0].value + '" }',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnSuccess,
                failure: function (response) {
                    alert(response);
                }
            });
            function OnSuccess(response) {
                if (response != null) {
                    if (response.d == "False") {
                        alert('Mail-ID Exists');
                        $("#<%=txtMailID.ClientID%>")[0].value = '';
                        $("#<%=txtMailID.ClientID%>")[0].focus();
                    }
                    else {
                        alert('Mail-ID Not in Use');
                    }
                }
            }
        }
    </script>


 The entire aspx file looks as shown below.....

ASPX file :




<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs"  
                      Inherits="AjaxCall_SingleParameter._Default" %>
 
<!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 id="Head1" runat="server">
    <title>Untitled Page</title>
 
    <script src="scripts/jquery-1.8.0.min.js" type="text/javascript"></script>
 
    <script type="text/javascript">
 
        function CheckMailID(mailid) {
            $.ajax({
                type: "POST",
                url: "Default.aspx/CheckMailID",
                data: '{MailID: "' + $("#<%=txtMailID.ClientID%>")[0].value + '" }',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnSuccess,
                failure: function (response) {
                    alert(response);
                }
            });
            function OnSuccess(response) {
                if (response != null) {
                    if (response.d == "False") {
                        alert('Mail-ID Exists');
                        $("#<%=txtMailID.ClientID%>")[0].value = '';
                        $("#<%=txtMailID.ClientID%>")[0].focus();
                    }
                    else {
                        alert('Mail-ID Not in Use');
                    }
                }
            }
        }
    </script>
 
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <center>
    <p><h3 style="color: #FF9900">
           Check Mail-ID using AJAX Call with Parameter</h3></p>
    <p>
    Enter MailID : <asp:TextBox ID="txtMailID" runat="server" 
                        onchange="CheckMailID(this)"></asp:TextBox>
    </p>
    <p>
    <asp:Button ID="btnCheck" runat="server" Text="Check MailID" />
    </p>
    </center>
    </div>
    </form>
</body>
</html>




Code Behind :
This is the method used to check the mail id in code behind.
This is the NameSpace U need to use



 using System.Web.Services;
 
 On the top of the method place the attribe [WebMethod]
The method should be public, static and parameter name is case-sensitive 
 
 





        [WebMethod]
        public static string CheckMailID(string MailID)
        {
            string res = "";
            try
            {
                using (SqlConnection connection = new SqlConnection(Constring))
                {
                    SqlDataAdapter da = 
                           new SqlDataAdapter 
            ("select * from EMPTable where empmail = '" + MailID + "'", connection);
                    DataSet ds = new DataSet();
                    da.Fill(ds, "MailID");
                    if (ds.Tables[0].Rows.Count > 0)
                    {
                        if (ds.Tables[0].Rows[0]
                          ["empmail"].ToString().ToLower() == MailID.ToLower())
                            res = "False";
                        else
                            res = "True";
                    }
                    else
                        return "True";
                }
            }
            catch (Exception ex)
            {
                string Errmsg = ex.Message;
                res = "";
            }
            return res;
        }



Click HERE to Download SourceCode

No comments:

Post a Comment