Link for all dot net and sql server video tutorial playlists
Link for slides, code samples and text version of the video
In this video we will discuss, how to implement autocomplete textbox using jquery and asp.net. The suggestions should come from the database table.
Stored procedure to retrieve employee name suggestions
Create proc spGetStudentNames
@term nvarchar(50)
as
Begin
Select Name from tblStudents where Name like @term + ‘%’
End
StudentHandler.ashx code
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Web;
using System.Web.Script.Serialization;
namespace Demo
{
public class StudentHandler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
string term = context.Request[“term”] ?? “”;
List<string> listStudentNames = 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()
{
ParameterName = “@term”,
Value = term
};
cmd.Parameters.Add(parameter);
con.Open();
SqlDataReader rdr = cmd.ExecuteReader();
while (rdr.Read())
{
listStudentNames.Add(rdr[“Name”].ToString());
}
}
JavaScriptSerializer js = new JavaScriptSerializer();
context.Response.Write(js.Serialize(listStudentNames));
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
Download jQuery UI from jqueryui.com. Copy and paste the following files in your project.
a) jquery-ui.js
b) jquery-ui.css
c) images
Add a WebForm to the ASP.NET project. Copy and paste the following HTML and jQuery code.
<%@ Page Language=”C#” AutoEventWireup=”true”
CodeBehind=”WebForm1.aspx.cs”
Inherits=”Demo.WebForm1″ %>
<!DOCTYPE html>
<html xmlns=”
<head runat=”server”>
<title></title>
<script src=”jquery-1.11.2.js”></script>
<script src=”jquery-ui.js”></script>
<link href=”jquery-ui.css” rel=”stylesheet” />
<script type=”text/javascript”>
$(document).ready(function () {
$(‘#txtName’).autocomplete({
source: ‘StudentHandler.ashx’
});
});
</script>
</head>
<body style=”font-family: Arial”>
<form id=”form1″ runat=”server”>
Student Name :
<asp:TextBox ID=”txtName” runat=”server”>
</asp:TextBox>
</form>
</body>
</html>
