Get Ready For Your Interview: AJAX AutoComplete Extender

AJAX Auto Complete Extender

This is an AJAX control which displays the list of names starting with the letter which user type in the textbox means when user type” A” then all the names present in the database staring with “A” will show billow the textbox.

To develop this kind of example ..

Add a aspx page and take a tool script manager. Then take a label and a textbox. Set the ID of the textbox as “txtEmp” and caption for the label as Employee.
With in the HTML source of the page drag and drop a AutoComplete Extender and set the following properties for it.

<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">

</asp:ToolkitScriptManager>

<asp:Label ID="Label1" runat="server" Text="Employee"></asp:Label>  

<asp:TextBox ID="txtEmp" runat="server"></asp:TextBox>

<asp:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server"

TargetControlID="txtEmp" MinimumPrefixLength="1" ServiceMethod="GetNames"

UseContextKey="True">

</asp:AutoCompleteExtender>

</div>

</form>

</body>

With in the design of the page click on the smart tag of the TextBox txtEmp and choose “Auto Complete Page Method” option that will automatically create a method in the code behind with name “GetNames” which is set as service method for AutoComplete method. Now write the following code within the method GetNames.

public static string[] GetNames(string prefixText, int count, string contextKey)

{

SqlConnection cn = new SqlConnection("server=AJIT;database=Demo;uid=sa;pwd=123");

SqlCommand cmd = new SqlCommand("SELECT FName FROM Student WHERE FName LIKE'"+prefixText+"%'",cn);

List<string> Names = new List<string>();

try

{

cn.Open();

SqlDataReader dr = cmd.ExecuteReader();

while (dr.Read())

{

Names.Add(dr["FName"].ToString());

}

dr.Close();

}

finally

{

cn.Close();

}

return Names.ToArray();

}

Before writing this code you must create a table in your database. First create a database name it as “Demo” then create a table and name it as “Student” having 4 columns SNO, FName, LName and Marks just show in the billow.