در اینجا نحوه ایجاد تکست باکس جی کوئری با قابلیت AutoComplete با استفاده از Generic Handler در ASP.NET با زبان سی شارپ را یاد خواهیم داد.

بانک اطلاعاتی

ابتدا باید از این لینک فایل بانک اطلاعاتی Northwind را دانلود نمایید.

پس از دانلود و نصب فایل اجرایی طبق شکل وارد SQL Server Management Studio شده و با RightClick روی Databases بر روی گزینه Attach کلیک نمایید.

روی گزینه Add کلیک کرده و در صفحه ظاهر شده مطابق شکل فایل mdf موجود در یانک اطلاعاتی NorthWind را انتخاب نمایید.

در نهایت Ok کرده تا بانک اطلاعاتی مورد نظر مطابق شکل به لیست بانک های اطلاعاتی شما اضافه گردد.

HTML

کد html زیر شامل یک تکست باکس و کلید ASP.NET می باشد. پلاگین جی کوئری AutoComplete روی تکست باکس استفاده شده است. Asp.net Generic Handler به عنوان منبع داده پلاگین جی کوئری AutoComplete می باشد.

    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.0.min.js" type="text/javascript"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/jquery-ui.min.js" type="text/javascript"></script>
    <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/themes/blitzer/jquery-ui.css"
        rel="Stylesheet" type="text/css" />
    <script type="text/javascript">
        $(document).ready(function () {
            $("[id*=txtSearch]").autocomplete({ source: '<%=ResolveUrl("~/Search_CS.ashx" ) %>' });
        });      
    </script>
    لطفا نام را وارد کنید :
    <asp:TextBox ID="txtSearch" runat="server" />
    <asp:Button ID="Button1" Text="ثبت" runat="server" OnClick="Submit" />

Asp.net Generic Handler

Generic Handler زیر پارامتر QueryString قبول می کند و این مقدار برای پیدا کردن رکورد مورد نظر از جدول Customers از بانک اطلاعاتی Northwind مورد استفاده قرار می گیرد.

رکورد مورد نظر به عنوان یک آرایه رشته پس از serialized شدن بوسیله JavaScriptSerializer برگردانده می شود.

<%@ WebHandler Language="C#" Class="Search" %>
 
using System;
using System.Web;
using System.Data.SqlClient;
using System.Configuration;
using System.Collections.Generic;
using System.Web.Script.Serialization;
 
public class Search : IHttpHandler {
 
    public void ProcessRequest(HttpContext context)
    {
        string prefixText = context.Request.QueryString["term"];
        using (SqlConnection conn = new SqlConnection())
        {
            conn.ConnectionString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
            using (SqlCommand cmd = new SqlCommand())
            {
                cmd.CommandText = "select ContactName from Customers where ContactName like @SearchText + '%'";
                cmd.Parameters.AddWithValue("@SearchText", prefixText);
                cmd.Connection = conn;
                List<string> customers = new List<string>();
                conn.Open();
                using (SqlDataReader sdr = cmd.ExecuteReader())
                {
                    while (sdr.Read())
                    {
                        customers.Add(sdr["ContactName"].ToString());
                    }
                }
                conn.Close();
                context.Response.Write(new JavaScriptSerializer().Serialize(customers));
            }
        }
    }
 
    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}

واکشی آیتم انتخاب شده سمت سرور

protected void Submit(object sender, EventArgs e)
{
    string customerName = Request.Form[txtSearch.UniqueID];
    ClientScript.RegisterStartupScript(this.GetType(), "alert", "alert('Name: " + customerName + "');", true);
}