Friday, 3 January 2014

TextBox AutoComplete using JQuery or JSON in ASP.NET using C# / VB.NET

Hi friends,in this article I will explain about ASP.NET TextBox AutoComplete using JQuery or JSON.
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>ASP.NET TextBox AutoCaomplete using JQuery or JSON</title>
<link rel="stylesheet"
href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var arr = [];
        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: "JQueryAutoCompleteJSON.aspx/GetEmployeeName",
            data: "{}",
            dataType: "json",
            success: function (data) {
                for (var i = 0; i < data.d.length; i++) {
                    arr[i] = data.d[i].empName;
                }
            },
            error: function (result) {
                alert("Error");
            }
        });
        $("#tags").autocomplete({
        source:arr
    });
});
</script>
<style type="text/css">
table,th,td
{
border:1px solid black;
border-collapse:collapse;
}
</style>
</head>
<body>
   <form id="form1" runat="server">
   <div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>
    </form>
</body>
</html>


In C#:
using System.Web.Services;
using System.Data.SqlClient;
using System.Data;
using System.Configuration;

public partial class JQueryAutoCompleteJSON : System.Web.UI.Page
{
    [WebMethod]
    public static EmpDetails[] GetEmployeeName()
    {
        DataTable dt = new DataTable();
        List<EmpDetails> empNames = new List<EmpDetails>();
        SqlConnection con = newSqlConnection(ConfigurationManager.ConnectionStrings["con"].ConnectionString);
        SqlCommand cmd = new SqlCommand("select * from employee", con);
        con.Open();
        SqlDataAdapter da = new SqlDataAdapter(cmd);
        da.Fill(dt);
        foreach (DataRow drow in dt.Rows)
        {
            EmpDetails emp = new EmpDetails();
            emp.empName = drow["name"].ToString();
            empNames.Add(emp);
        }
        con.Close();
        return empNames.ToArray();

    }
    public class EmpDetails
    {
        public string empName { getset; }
    }
}

In VB.NET:
Imports System.Web.Services
Imports System.Data.SqlClient
Imports System.Data
Imports  System.Configuration

Partial Public Class JQueryAutoCompleteJSON
    Inherits System.Web.UI.Page
    <WebMethod()> _
    Public Shared Function GetEmployeeName() As EmpDetails()
        Dim dt As New DataTable()
        Dim empNames As New List(Of EmpDetails)()
        Dim con As NewSqlConnection(
ConfigurationManager.ConnectionStrings("con").ConnectionString)
        Dim cmd As New SqlCommand("select * from employee", con)
        con.Open()
        Dim da As New SqlDataAdapter(cmd)
        da.Fill(dt)
        For Each drow As DataRow In dt.Rows
            Dim emp As New EmpDetails()
            emp.empName = drow("name").ToString()
            empNames.Add(emp)
        Next
        con.Close()
        Return empNames.ToArray()

    End Function
    Public Class EmpDetails
        Public Property empName() As String
            Get
                Return m_empName
            End Get
            Set(ByVal value As String)
                m_empName = Value
            End Set
        End Property
        Private m_empName As String
    End Class
End Class


The output of the above page as shown in below.
"If you like my blog or articles, you can appreciate by leaving your comments or Liking my Facebook pageAspdotnet-kishore, following on Google+ Aspdotnet-Kishore, Twitter  on AspdotnetKishore, Linked in Aspdotnet-Kishore, stumbling my posts on stumble upon and subscribing on  RSSfeed Aspdotnet-Kishore for free updates directly to your Email inbox . Watch my blog  for more articles."

No comments:

Post a Comment

© 2012-2014 Aspdotnet-Kishore.blogspot.com. All Rights Reserved.
The content is copyrighted to Kishore and may not be reproduced on other websites without permission from the owner.