Tuesday, 16 December 2014

JQuery AutoComplete TextBox with Asp.Net Webmethods

Introduction:

Today i will explain how to implement the autocomplete textbox using JQuery  in Asp.Net

Description:

JQuery autocomplete textbox using page methods, Added all Jquey references in my master page and in content page am accessing.


Here is the Jquey References added in master page.




<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700" rel="stylesheet" type="text/css" />

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>  

<title>JQuey autoComplete TextBox with Pagemethods in Asp.net C#</title>

</head>

In Content page




<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<div style="padding-left: 10px; width: 777px;">
<asp:TextBox ID="txtEmpId" runat="server"  Width="260px" MaxLength="100"></asp:TextBox>
</div>
<script type="text/javascript">
        $(document).ready(function () {
            SearchText();
        });
        function SearchText() {
            $('[id$=txtEmpId]').autocomplete({
                source: function (request, response) {
                    $.ajax({
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        url: "EmployeeDetails.aspx/EmployeeDetails",
                        data: "{'empName':'" + document.getElementById("ContentPlaceHolder1_txtEmpId").value + "'}",
                        dataType: "json",
                        success: function (data) {
                            response(data.d);
                        },
                        error: function (result) {
                            alert("Error");
                        }
                    });
                }, select: function (event, ui) {
                    alert(ui.item.label);
                }
            });
        }
       </script>
</asp:Content>
 
C# Code:

In Code behind  We can access the page Methods, for  this am Using the WebMethod 




using System.Web.Services;
using System.Web.Script.Services;






  [WebMethod]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
        public static List<string> EmployeeDetails(string empName)
        {
            List<string> empResult = new List<string>();
            DataLayer.DataAccess data = new DataLayer.DataAccess();
            data.ConnectionString = ConfigurationManager.ConnectionStrings["SqlServer"].ToString();

            using (SqlConnection con = new SqlConnection(data.ConnectionString))
            {
                using (SqlCommand cmd = new SqlCommand())
                {
                    cmd.CommandText = "select distinct Top 10 EmpId from EmployeeDetails where EmpId like '%'+@SearchEmpName+'%'";
                    cmd.Connection = con;
                    con.Open();
                    cmd.Parameters.AddWithValue("@SearchEmpName", empName);
                    SqlDataReader dr = cmd.ExecuteReader();
                    while (dr.Read())
                    {
                        empResult.Add(dr["EmpId"].ToString());
                    }
                    con.Close();
                    return empResult;
                }

            }
        }



OutPut:














1 comment:

  1. Hi Admin,
    Excellent blog and its totally loaded with valid posts on Java and .Net technology. Consider including RSS feed in your blog, so aspirants like me can follow your blog easily. Dot Net Training

    ReplyDelete