ساخت Auto Complete در ASP.Net

در این مقاله نحوه استفاده از Auto Complete توسعه دهنده توسط #C در ASP.Net را به شما آموزش میدهیم.

دراین مقاله از TextBox و Ajax auto Complete و نسبت دادن کنترل id به TextBox استفاده می شود که وقتی کاربر مقداری را در TextBox وارد می کند، یک dropdown از نوع لیست که در آن کلماتی شبیه کلماتی که در TextBox وارد شده را نشان میدهد به عنوان مثال در قسمت فیلد name کلماتی وارد می کنیم که وقتی در TextBox کلمه ای مانند nil وارد کردیم ، به طور اتوماتیک برای شما کلمه ای نزدیک nil مانند: nilesh-nilu-nilurima... را نشان می دهد.(این کلمات در بانک اطلاعاتی وجود دارد که براساس داده های شما در بانک ذخیره می شود.)

مرحله اول : ویژوال استودیو را باز کرده و یک Empty Website ایجاد کنید به نام (Autocomplete_demo)

مرحله دوم : در قسمت Solution Explorer وب سایت ، سپس دو Web forms و یک SQL Server Database اضافه کنید.

برای Web Form :

بر روی پروژه (Autocomplete_demo) راست کلیک کنید سپس گزینه Add New Item-->Web Form را انتخاب کنید و نام آن را Autocomplete-demo.aspx قرار دهید.

برای بانک اطلاعاتی (SQL Server) :

بر روی پروژه (Autocomplete_demo) راست کلیک کنید سپس گزینه Add New Item--> SQL Server Database را انتخاب کنید.(دیتابیس را در داخل پوشه App_Data_folder ایجاد کنید.)

مرحله سوم : در قسمت Server Explorer بر روی دیتابیس (Database.mdf) راست کلیک کنید سپس گزینه Tables--> Add New Tabale را برای ایجاد جدول جدید انتخاب کنید. جدولی به نام tbl_data مانند شکل زیر ایجاد کنید(فیلد ID را به عنوان IS Identity را true قرار دهید.):

در داخل جدول یک سری مقادیر و اطلاعات در آن وارد کنید.

اطلاعات در دیتابیس ذخیره شده و براساس Auto Complete کار می کند.

مرحله چهارم :

فایل Autocomplete_demo.aspx را باز کنید و کد دستورات زیر را در آن اضافه کنید:

فایل Autocomplete_demo.aspx :

<%@ 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: 81px;  
        }  
        .style2  
        {  
            width: 416px;  
        }  
        .style3  
        {  
            width: 416px;  
            font-weight: bold;  
            text-decoration: underline;  
            font-size: medium;  
        }  
        .style4  
        {  
            width: 81px;  
            font-weight: bold;  
            text-decoration: underline;  
            font-size: medium;  
        }  
    </style>  
</head>  
<body>  
    <form id="form1" runat="server">  
    <div><asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">  
    </asp:ToolkitScriptManager></div>  
        <table style="width:100%;">  
            <tr>  
                <td class="style4">  
                    </td>  
                <td class="style3">  
                    AutoComplete TextBox using Ajax AutoCompleteExtender</td>  
                <td>  
                     </td>  
            </tr>  
            <tr>  
                <td class="style1">  
                     </td>  
                <td class="style2">  
                     </td>  
                <td>  
                     </td>  
            </tr>  
            <tr>  
                <td class="style1">  
                     </td>  
                <td class="style2">  
  
                    <asp:Label ID="Label1" runat="server" ForeColor="#6666FF"   
                        style="font-weight: 700" Text="Search Your Name here"></asp:Label>  
  
                </td>  
                <td>  
               </td>  
            </tr>  
            <tr>  
                <td class="style1">  
                     </td>  
                <td class="style2">  
  
                     </td>  
                <td>  
                     </td>  
            </tr>  
            <tr>  
                <td class="style1">  
                     </td>  
                <td class="style2">  
  
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>  
  
    <asp:AutoCompleteExtender ID="AutoCompleteExtender1" ServiceMethod="getdata" TargetControlID="TextBox1" EnableCaching="true" CompletionInterval="1000" MinimumPrefixLength="1" CompletionSetCount="1" runat="server">  
    </asp:AutoCompleteExtender>  
  
                </td>  
                <td>  
  
                </td>  
            </tr>  
        </table>  
      
    </form>  
</body>  
</html>

در اینجا ما تعدادی از خصوصیت های AutoComplete استفاده می کنیم:

1. TargetControl ID : این خصوصیت(توصیفگر) هدفی است که می خواهیم Auto Complete را به آن صورت در بیاوریم در نمونه آن TextBox در نتیجه "TextBox1'' می باشد.

2. Service Method : در این خصوصیت وب سرویسی که شامل فایل cs. است را فراخوانی می کند.

3. Completion Interval : این خصوصیت مدت زمان برای نشان دادن کلمات پیشنهادی از دیتابیس با توجه به کلماتی که در textbox وارد می شود.

4. Minimum Prefix Lenght : این خصوصیت تعداد کاراکترها را می شمارد و بر اساس آن تعداد کلمات پیشنهادی را نمایش می دهد.

همانند شکل زیر در صفحه Design طراحی کنید :

مرحله پنجم :

کدهای زیر را در بخش Autocomplete_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;  
using System.Configuration;  
using System.Web.Services;  
  
public partial class _Default : System.Web.UI.Page  
{  
    protected void Page_Load(object sender, EventArgs e)  
    {  
         
    }  
  
      
    [System.Web.Script.Services.ScriptMethod()]   
    [System.Web.Services.WebMethod()]  
  
    public static List<string> getdata(string prefixText)  
    {  
        SqlConnection con = new SqlConnection(@"Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\Database.mdf;Integrated Security=True;User Instance=True");  
        con.Open();  
        SqlCommand cmd = new SqlCommand("select * from tbl_data where name like @name+'%'", con);  
        cmd.Parameters.AddWithValue("@name",prefixText);  
        //cmd.Parameters.AddWithValue("@city",);  
        SqlDataAdapter sda = new SqlDataAdapter(cmd);  
        DataTable dt = new DataTable();  
        sda.Fill(dt);  
        List<string> name = new List<string>();  
        
        for (int i = 0; i < dt.Rows.Count; i++)  
        {  
            name.Add(dt.Rows[i][1].ToString());       
        }  
        return name;  
      
      
      
    }  
  
     
}

حالا پروژه خود را اجرا کنید و با توجه به مقادیری که در دیتابیس ذخیره شده ، در TextBox اول کلمه ای را وارد کنید که لیستی از کلمات مشابه آن را نمایش می دهد.

همانند شکل زیر مشاهده نمایید :