How to use ListSearchExtender control on ASP.NET Web page using concepts of Ajax Technology

Hi Friend,Today we will learn "How to Implement ListSearchExtender control on asp.net website". This control allows you to perform an incremental search for the desired items in the DropDownList or List Box control by typing a stream of texts.This control is very helpful, if you have more values (items) in your database.Using this control ,you can easily find the data by typing the word incrementally.This is generally used in filling Form's websites.
There are some properties of this control as given below:-

TargetControlID:-It sets the ID of the List Box or DropDownList control to which the extender control is attached.
PromptText:-It is helpful to sets the message that is displayed when the List Box or DropDownList control receives focus.
PromptPosition:- It is helpful to determine the position of the message relative to the target control.It can be either Top or Bottom.The default position is Top.
QueryTimeout:-It sets the time that resets the search query just after the timeout and no match found.
QueryPatten:-It specifies how the typed characters should be used inn the search query.
IsSorted:-It determines whether or not the items added to the list should be sorted.

You can install Ajax Toolkit in your visual studio easily.
There are some steps to implement the whole concepts as given below:-

Step 1:-First create a table (INDIA) in your sql database or .mdf database -->Insert Some Values as shown below:-

Step 2:-First open your visual studio -->File-->New-->Web Site -->Select ASP.NET Empty Website --> OK --> Open Solution Explorer window --> Add a New Web Form (default.aspx)--> Drag and Drop ToolkitScriptManager, DropDownList , List Box and SqlDataSource control on the page (default.aspx) as shown below :-

Step 3:- Now press on arrow tag of SqlDataSource -->Configure the SqlDataSource
-->You can take help to configure this SqlDataSource from this DOC File.

Step 4:-Now Open Source File-->Drag and Drop Two ListSearchExtender-->after that Bind the ListSearchExtender control properties -->after that Bind the DropDownList and List Box controls Properties also as given below:-

<%@ 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>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        <strong><span class="style3">
         </span><span class="style1">Welcome to MY.NET Tutorials<br />
        <br />
        </span>
        <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        </asp:ToolkitScriptManager>
        </strong>
        <br />
        <table class="style4">
            <tr>
                <td class="style6">
        <span class="style2">Click on DropDownList Control and Search 
                    <br />
                    Your Particular 
        State..<br />
                    </span>
                </td>
                <td class="style5">
        <span class="style2">Click on ListBox Control and Search
                    <br />
                    Your Particular 
        State..<br />
                    </span>
                </td>
            </tr>
            <tr>
                <td class="style9">
                </td>
                <td class="style10">
                </td>
            </tr>
            <tr>
                <td class="style7">
        <asp:DropDownList ID="DropDownList1" runat="server" Height="65px" Width="452px"
         DataSourceID="SqlDataSource1" DataTextField="State" DataValueField="State" 
            style="background-color: #FF99FF">
        </asp:DropDownList>
                    <asp:ListSearchExtender ID="ListSearchExtender2" runat="server"
                    TargetControlID="DropDownList1" PromptText="Type to search" PromptPosition="Top">
                    </asp:ListSearchExtender>
                </td>
                <td class="style8">
                    <asp:ListBox ID="ListBox1" runat="server" Width="338px" 
                    DataSourceID="SqlDataSource1" DataTextField="State" DataValueField="State" >
                    </asp:ListBox>
                    <asp:ListSearchExtender ID="ListSearchExtender1" runat="server"
                    TargetControlID="ListBox1" PromptText="Type to search" PromptPosition="Top">
                    </asp:ListSearchExtender>
                </td>
            </tr>
        </table>
        <br />
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
            ConnectionString="<%$ ConnectionStrings:masterConnectionString %>" 
            SelectCommand="SELECT [State] FROM [INDIA]"></asp:SqlDataSource>
    </div>
    </form>
</body>
</html>

Step 5:-Now Run the Application(press F5)-->Type your Texts in DropDownList ,You will see following output as shown below:-

Step 6:-Similarly,Run the Application(press F5)-->Type your Texts in List Box, You will see following output as shown below:-

For More...

Download Whole Attached file
Download

How to use ListSearchExtender control on ASP.NET Web page using concepts of Ajax Technology

Subscribe through email and get Free updates in inbox

Please like and share this post with your friends...

0 comments:

Post a Comment

How to use ListSearchExtender control on ASP.NET Web page using concepts of Ajax Technology

Subscribe through email and get Free updates in inbox

Please like and share this post with your friends...

You May Also Like...

0 comments:

Post a Comment