Support us .Net Basics C# SQL ASP.NET Aarvi MVC Slides C# Programs Subscribe Download

Part 145 - Implementing autocomplete textbox in asp.net web forms

Suggested Videos
Part 142 - Contact us page using asp.net and c# continued
Part 143 - Difference between http get and http post methods
Part 144 - How to check if the request method is a GET or a POST in MVC



In this video, we will discuss implementing auto-complete functionality in an asp.net web forms application using jQuery Autocomplete Widget and a web service.
autocomplete in asp.net web forms



Step 1: We will be using tblStudents table in this demo. Please find the sql script below, to create and populate this table with some data.
Create Table tblStudents
(
ID int identity primary key,
Name nvarchar(50),
Gender nvarchar(20),
TotalMarks int
)

Insert into tblStudents values('Mark Hastings','Male',900)
Insert into tblStudents values('Pam Nicholas','Female',760)
Insert into tblStudents values('John Stenson','Male',980)
Insert into tblStudents values('Ram Gerald','Male',990)
Insert into tblStudents values('Ron Simpson','Male',440)
Insert into tblStudents values('Able Wicht','Male',320)
Insert into tblStudents values('Steve Thompson','Male',983)
Insert into tblStudents values('James Bynes','Male',720)
Insert into tblStudents values('Mary Ward','Female',870)
Insert into tblStudents values('Nick Niron','Male',680)

Step 2: Download autocomplete widget from http://jqueryui.com/download. The following folders and files will be downloded.
autocomplete widget files

Step 3: Open "js" folder copy "jquery-1.9.1.js" and "jquery-ui-1.10.3.custom.min.js" files and paste them in the "Scripts" folder of your asp.net project. Now open "css" folder. This folder will be present in "ui-lightness" folder. Copy "images" folder and "jquery-ui-1.10.3.custom.min.css" file and paste them in "Styles" folder in your asp.net project. If you are following along, at this point your solution explorer should look as shown below.
jquery javascript files required for implementing autocomplete feature in asp.net web forms

Step 4: Right click on the project name in "Solution Explorer" and add a Web Service with name = StudentService.asmx. Copy and paste the following code. This web service is responsible for retrieving matching student names to implement auto-complete when the user types the name of the student in the textbox.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;

namespace WebFormsDemo
{
   
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    [System.Web.Script.Services.ScriptService]
    public class StudentService : System.Web.Services.WebService
    {
        [WebMethod]
        public List<string> GetStudentNames(string searchTerm)
        {
            List<string> studentNames = new List<string>();
            string cs = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString;
            using (SqlConnection con = new SqlConnection(cs))
            {
                SqlCommand cmd = new SqlCommand("spGetStudentNames", con);
                cmd.CommandType = CommandType.StoredProcedure;

                SqlParameter parameter = new SqlParameter("@searchTerm", searchTerm);
                cmd.Parameters.Add(parameter);
                con.Open();
                SqlDataReader rdr = cmd.ExecuteReader();
                while (rdr.Read())
                {
                    studentNames.Add(rdr["Name"].ToString());
                }
            }

            return studentNames;
        }
    }
}

Step 5: Copy and paste the following code in WebForm1.aspx
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script src="Scripts/jquery-1.9.1.js" type="text/javascript"></script>
    <script src="Scripts/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>
    <link href="Styles/jquery-ui-1.10.3.custom.min.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" language="javascript">
        $(function () {
            $('#<%= txtStudentName.ClientID %>').autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: "StudentService.asmx/GetStudentNames",
                        data: "{ 'searchTerm': '" + request.term + "' }",
                        type: "POST",
                        dataType: "json",
                        contentType: "application/json;charset=utf-8",
                        success: function (data) {
                            response(data.d);
                        },
                        error: function (result) {
                            alert('There is a problem processing your request');
                        }
                    });
                },
                minLength: 0
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div style="font-family:Arial">
        <asp:TextBox ID="txtStudentName" runat="server">
        </asp:TextBox>
        <asp:Button ID="Button1" runat="server" Text="Button"
            onclick="Button1_Click" />
        <br />
        <asp:GridView ID="gvStudents" runat="server">
        </asp:GridView>
    </div>
    </form>
</body>
</html>

Step 6: Copy and paste the following code in WebForm1.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;

namespace WebFormsDemo
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                GetStudents(null);
            }
        }

        private void GetStudents(string studentName)
        {
            string cs = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString;
            using (SqlConnection con = new SqlConnection(cs))
            {
                SqlCommand cmd = new SqlCommand("spGetStudents", con);
                cmd.CommandType = CommandType.StoredProcedure;

                if (!string.IsNullOrEmpty(studentName))
                {
                    SqlParameter parameter = new SqlParameter("@EmployeeName", studentName);
                    cmd.Parameters.Add(parameter);
                }
                con.Open();
                SqlDataReader rdr = cmd.ExecuteReader();
                gvStudents.DataSource = rdr;
                gvStudents.DataBind();
            }
        }

        protected void Button1_Click(object sender, EventArgs e)
        {
            GetStudents(txtStudentName.Text);
        }
    }
}

17 comments:

  1. What is Web Part and how it differ from user control and custom control..

    ReplyDelete
  2. I have maskedtextbox in windows c# application and i am using this to enter date in dd/mm/yyyy format and saving that entered date in sql server 2008 table but after 12/09/2013 it is throwing a error called out-of-range value because sql server 2008 accept date in mm/dd/yyyy format So NOW may question is how to insert or convert date in mm/dd/yyyy format?

    ReplyDelete
  3. Click on this..

    http://www.youtube.com/watch?v=6P-ipCQGxBw

    http://csharp-video-tutorials.blogspot.in/2013/01/difference-between-user-controls-and.html

    ReplyDelete
  4. Great tutorial sir,
    Sir, I have a request please upload video regarding web services or wcf

    ReplyDelete
  5. Sir please,lauch the tutorial of CSS

    ReplyDelete
  6. Sir, How can I eliminate this error "The type or namespace name 'Linq' does not exist in the namespace 'System' (are you missing an assembly reference?)". I am using Visual Studio 2010 and .NetFramework 3.5

    ReplyDelete
  7. i want to know the stored proc used in this

    ReplyDelete
  8. I'm using an Access Database in my application, and seems like the web service is not getting data from the Access Database, probably due to security issues, any ideas on how to solve this in the simplest way?!

    thank you very much

    ReplyDelete
  9. hello sir , please upload tuttorials for LINQ i am in great need of this..
    and i constantly follow only ur vedios.
    plz

    ReplyDelete
  10. Sir,
    Please upload jquery or javascript tutorial that .net developer need to validate data..
    thanx.

    ReplyDelete
  11. Sir
    How can i use this function in TextBox In GridView?
    Thanks

    ReplyDelete
  12. how to do the same in childpage

    ReplyDelete
  13. It worked fine after uncommenting System.Web.Script.Services.ScriptService in the WebService.asmx

    ReplyDelete
  14. In return studentNames;
    Data is coming but not filling textbox
    success: function data
    after i have put alert'hellow'
    hellow is getting displayed but
    not filling textbox
    my reference file is
    src="..jquery-1.10.2.js"
    src="..jquery-ui-1.10.4.custom.min.js"

    jquery-ui-1.10.4.custom.min.css" rel="stylesheet"

    ReplyDelete
  15. Sir Pls Start Video Series on CSS

    ReplyDelete
  16. hi, i have put the javascript block (between head and /head) in the master page which activates the content page where lies the textbox StudentName. but the line
    $('#<%= txtStudentName.ClientID %>').autocomplete
    says txtStudentName is not valid.
    how can I refer to the textbox in the content page?
    Or, if possible, how can i move the whole head section in the content page? if i try, vs says it's non allowed.
    thanks

    ReplyDelete
  17. Uncaught TypeError: $(...).autocomplete is not a function

    ReplyDelete

It would be great if you can help share these free resources