Use ListSearchExtender Of Ajax In ASP.NET

Nilesh Jadav
9y
4.6k
0
1

Article

We use this extender on binded Dropdownlist.

Initial chamber

Step 1: Open Visual Studio 2010 and create an empty website. Give a suitable name dropdownlist_demo.

Step 2: In Solution Explorer you will get your empty website. Add a web form SQL Database. Follow these steps:

For Web Form:

dropdownlist_demo (Your Empty Website) - Right Click, Add New Item, then Web Form. Name it dropdownlist_demo.aspx.

For SQL Server Database:

dropdownlist_demo (Your Empty Website) - Right Click, Add New Item, then SQL Server Database. Add Database inside the App_Data_folder.

Database chamber

Step 3: Go to your Database [Database.mdf], we will create two tables - tbl_Data and tbl_save. Go to the database.mdf - Table and Add New table, Design your table like the following:

Table - tbl_data (Don’t forget to make ID - Identity Specification - Yes)

table design

Show table data

table

Design chamber

Step 4: Now open your dropdownlist_demo.aspx file, where we create our design for Dropdownlist in ASP.NET.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.style1 {
width: 576px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"> </asp:ToolkitScriptManager>
<div>
<table style="width:100%;">
<tr>
<td> </td>
<td class="style1"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td class="style1">
<asp:DropDownList ID="DropDownList1" runat="server" AppendDataBoundItems="True" DataTextField="country" DataValueField="country" Height="33px" style="margin-left: 267px">
<asp:ListItem>--Select Country--</asp:ListItem>
</asp:DropDownList>
<asp:ListSearchExtender ID="DropDownList1_ListSearchExtender" runat="server" Enabled="True" PromptPosition="Top" PromptText="Type to Search" TargetControlID="DropDownList1"> </asp:ListSearchExtender>
</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td class="style1"> </td>
<td> </td>
</tr>
</table>
</div>
</form>
</body>
</html>

Code chamber

Step 5: Open your dropdownlist_demo.aspx.cs and write some code so that our application starts working.

dropdownlist_demo.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;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
refreshdata();
}
}
public void refreshdata()
{
SqlConnection con = new SqlConnection(@"Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\Database.mdf;Integrated Security=True;User Instance=True");
SqlCommand cmd = new SqlCommand("select * from tbl_data", con);
SqlDataAdapter sda = new SqlDataAdapter(cmd);
DataTable dt = new DataTable();
sda.Fill(dt);
DropDownList1.DataSource = dt;
DropDownList1.DataBind();
}
}

Output chamber

Output

Hope you liked this. Have a good day!
Thank you for reading.

Up Next

Ebook Download

View all

ASP.NET MVC 5: A Beginner’s Guide

Read by 10.8k people

Download Now!

Learn

View all