Step 1: - Right Click on Project Root folder => Click on Manage NuGet Packages… => Search Ajax in search box and Select AjaxControlToolkit from list =>
Click on Install button
Step 2: - Add AjaxAutoCompleteExtender.aspx Web Form page in project
Step 3: - Design Page
Code
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxAutoCompleteExtender.aspx.cs" Inherits="AjaxControls.AjaxAutoCompleteExtender" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager runat="server">
</asp:ScriptManager>
<asp:TextBox ID="TextBox1" runat="server" placeholder="Enter text"></asp:TextBox>
<asp:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" TargetControlID="TextBox1"
MinimumPrefixLength="1" CompletionInterval="1" ServiceMethod="AutoComplete">
</asp:AutoCompleteExtender>
</div>
</form>
</body>
</html>
Step 4: - Code behind Page Code
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace AjaxControls
{
public partial class AjaxAutoCompleteExtender : System.Web.UI.Page
{
protected void
Page_Load(object
sender, EventArgs e)
{
}
[WebMethod]
public static List<string> AutoComplete(string prefixText, int count)
{
List<string>
strList = new List<string>();
List<Student> objList = new List<Student>();
objList.Add(new Student() { Id = 1, Name = "A" });
objList.Add(new Student() { Id = 2, Name = "A" });
objList.Add(new Student() { Id = 3, Name = "B" });
objList.Add(new Student() { Id = 4, Name = "C" });
objList.Add(new Student() { Id = 5, Name = "C" });
var results = objList.Where(m => m.Name.ToUpper() ==
prefixText.ToUpper()).ToList();
foreach (var
item in
results)
{
strList.Add(item.Name);
}
return strList;
}
}
public class Student
{
public int
Id { get;
set; }
public string
Name { get;
set; }
}
}
Step 5: - Output
No comments:
Post a Comment