Get employee First and Last Name based on Roll Number, Age, Email using jQuery AJAX in ASP.Net

Hi EmadKhan,

Refer the below sample.

SQL

CREATE PROCEDURE GetFirstLastName
	@RollNumber INT,
	@Age INT,
	@Email VARCHAR(50)
AS
BEGIN
	DECLARE @Employee AS TABLE(ID INT IDENTITY,FirstName VARCHAR(20),LastName VARCHAR(20),RollNo INT,Email VARCHAR(50),Age INT)
	INSERT INTO @Employee VALUES('Emad Hassan','Khan',1001,'emadkhanqai@gmail.com',26)
	INSERT INTO @Employee VALUES('Nancy','Davolio',1002,'nancydavolio@gmail.com',68)
	INSERT INTO @Employee VALUES('Andrew','Fuller',1003,'andrewfuller@gmail.com',64)
	INSERT INTO @Employee VALUES('Janet','Leverling',1004,'janetleverling@gmail.com',53)
	INSERT INTO @Employee VALUES('Margaret','Peacock',1005,'margaretpeacock@gmail.com',79)
	INSERT INTO @Employee VALUES('Steven','Buchanan',1006,'stevenbuchanan@gmail.com',61)
	SELECT * FROM @Employee
	WHERE RollNo = @RollNumber AND AGE = @Age AND Email = @Email
END

HTML

<div align="center">
    <table>
        <tr>
            <td>
                Roll Number:
            </td>
            <td>
                <asp:TextBox ID="txtRollNumber" class="change" runat="server" Width="250px" />
            </td>
        </tr>
        <tr>
            <td>
                Age:
            </td>
            <td>
                <asp:TextBox ID="txtAge" class="change" runat="server" Width="250px" />
            </td>
        </tr>
        <tr>
            <td>
                Email:
            </td>
            <td>
                <asp:TextBox ID="txtEmail" class="change" runat="server" Width="250px" />
            </td>
        </tr>
        <tr>
            <td>
                First Name:
            </td>
            <td>
                <asp:TextBox ID="txtFirstName" runat="server" Width="250px" />
            </td>
        </tr>
        <tr>
            <td>
                Last Name:
            </td>
            <td>
                <asp:TextBox ID="txtLastName" runat="server" Width="250px" />
            </td>
        </tr>
    </table>
</div>
<div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/json2/20130526/json2.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('.change').on("change", function () {
                var rollNumber = $('#txtRollNumber').val();
                var age = $('#txtAge').val();
                var email = $('#txtEmail').val();
                if (rollNumber != '' && age != '' && email != '') {
                    var obj = {};
                    obj.rollNumber = rollNumber;
                    obj.age = age;
                    obj.email = email;
                    $.ajax({
                        type: "POST",
                        url: "Default.aspx/GetFirstLastName",
                        data: JSON.stringify(obj),
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (response) {
                            var xmlDoc = $.parseXML(response.d);
                            var xml = $(xmlDoc);
                            var employee = xml.find("Employee");
                            $('#txtFirstName').val($(employee).find("FirstName").text());
                            $('#txtLastName').val($(employee).find("LastName").text());
                        }
                    });
                }
            });
        });
    </script>
</div>

Code

[WebMethod]
public static string GetFirstLastName(int rollNumber, int age, string email)
{
    DataSet ds = new DataSet();
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlCommand cmd = new SqlCommand("GetFirstLastName"))
        {
            cmd.Parameters.AddWithValue("@RollNumber", rollNumber);
            cmd.Parameters.AddWithValue("@Age", age);
            cmd.Parameters.AddWithValue("@Email", email);
            using (SqlDataAdapter sda = new SqlDataAdapter())
            {
                cmd.CommandType = CommandType.StoredProcedure;
                cmd.Connection = con;
                sda.SelectCommand = cmd;
                sda.Fill(ds, "Employee");
            }
        }
    }
    return ds.GetXml();
}

Screenshot