آموزش ساخت AutoComplete در ASP.NET

در این مقاله به شما آموزش می دهیم که چگونه یک AutoComplete در ASP.NET بسازید. به همراه توضیحات کاملی که در ادامه ی مطلب آورده شده است سورس نیز در انتها برای دانلود قرار داده شده است. با من در ادامه ی مطلب همراه باشید …

AutoComplete

HTML Markup

HTML Markup زیر شامل TextBox ASP.Net، HiddenField و یک Button می باشد.

پلاگین Bootstrap jQuery TypeAhead AutoComplete در TextBox به کار برده شده است. یک jQuery AJAX برای وب متود GetCustomers ساخته شده است و لیست مشتری ها از وب متود که به عنوان سورس اطلاعات عمل می کند بازگشت داده می شود.

اطلاعاتی که از سرور دریافت می شوند در کنترل رویداد های jQuery AJAX پردازش می شوند. برای هر آیتمی که دریافت می شود یک loop (حلقه) در لیست آیتم ها اجرا می شود و سپس یک object با یک قسمت متن در name property و قسمت مقادیر در id property ارائه داده می شود.

زمانی که یک آیتم از AutoComplete List Bootstrap jQuery TypeAhead انتخاب شد، سپس updater کنترل رویداد اجرا می شود که ID های آیتم های انتخاب شده را در ASP.Net HiddenField control ذخیره می کند.

<link rel="stylesheet" href='http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css'
    media="screen" />
<script type="text/javascript" src='http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js'></script>
<script type="text/javascript" src='http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js'></script>
<script type="text/javascript" src="http://cdn.rawgit.com/bassjobsen/Bootstrap-3-Typeahead/master/bootstrap3-typeahead.min.js"></script>
<link rel="Stylesheet" href="https://twitter.github.io/typeahead.js/css/examples.css" />
<script type="text/javascript">
    $(function () {
        $('[id*=txtSearch]').typeahead({
            hint: true,
            highlight: true,
            minLength: 1
            ,source: function (request, response) {
                $.ajax({
                    url: '<%=ResolveUrl("~/CS.aspx/GetCustomers") %>',
                    data: "{ 'prefix': '" + request + "'}",
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    success: function (data) {
                        items = [];
                        map = {};
                        $.each(data.d, function (i, item) {
                            var id = item.split('-')[1];
                            var name = item.split('-')[0];
                            map[name] = { id: id, name: name };
                            items.push(name);
                        });
                        response(items);
                        $(".dropdown-menu").css("height", "auto");
                    },
                    error: function (response) {
                        alert(response.responseText);
                    },
                    failure: function (response) {
                        alert(response.responseText);
                    }
                });
            },
            updater: function (item) {
                $('[id*=hfCustomerId]').val(map[item].id);
                return item;
            }
        });
    });
</script>
Enter search term:
<asp:TextBox ID="txtSearch" runat="server" CssClass="form-control" autocomplete="off"
    Width="300" />
<asp:HiddenField ID="hfCustomerId" runat="server" />
<asp:Button ID="Button1" Text="Submit" runat="server" OnClick="Submit" />

Namespaces

باید Namespaces زیر را نیز وارد کنید.

سی شارپ

using System.Web.Services;
using System.Configuration;
using System.Data.SqlClient;

VB.Net

Imports System.Web.Services
Imports System.Configuration
Imports System.Data.SqlClient

The ASP.Net PageMethod

ASP.Net PageMethod زیر یک پارامتر prefix قبول می کند و از مقدار آن برای پیدا کردن record های مطابق از جدول مشتری های Northwind database استفاده می شود.

Query انتخاب شده نام و شناسه مشتری که با متن prefix مطابق باشد را می گیرد.

Record های fetch شده پردازش می شوند و یک Key Value Pair با اصافه کردن Id به Name field ساخته می شود. با فرمت {۰}-{۱}.

سی شارپ

[WebMethod]
public static string[] GetCustomers(string prefix)
{
    List<string> customers = new List<string>();
    using (SqlConnection conn = new SqlConnection())
    {
        conn.ConnectionString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
        using (SqlCommand cmd = new SqlCommand())
        {
            cmd.CommandText = "select ContactName, CustomerId from Customers where ContactName like @SearchText + '%'";
            cmd.Parameters.AddWithValue("@SearchText", prefix);
            cmd.Connection = conn;
            conn.Open();
            using (SqlDataReader sdr = cmd.ExecuteReader())
            {
                while (sdr.Read())
                {
                    customers.Add(string.Format("{0}-{1}", sdr["ContactName"], sdr["CustomerId"]));
                }
            }
            conn.Close();
        }
    }
    return customers.ToArray();
}

VB.Net

<WebMethod()>
Public Shared Function GetCustomers(prefix As String) As String()
    Dim customers As New List(Of String)()
    Using conn As New SqlConnection()
        conn.ConnectionString = ConfigurationManager.ConnectionStrings("constr").ConnectionString
        Using cmd As New SqlCommand()
            cmd.CommandText = "select ContactName, CustomerId from Customers where ContactName like @SearchText + '%'"
            cmd.Parameters.AddWithValue("@SearchText", prefix)
            cmd.Connection = conn
            conn.Open()
            Using sdr As SqlDataReader = cmd.ExecuteReader()
                While sdr.Read()
                    customers.Add(String.Format("{0}-{1}", sdr("ContactName"), sdr("CustomerId")))
                End While
            End Using
            conn.Close()
        End Using
    End Using
    Return customers.ToArray()
End Function

fetch کردن آیتم های انتخاب شده در Server

کلید (نام مشتری) و مقدار (شناسه مشتری) می توانند در server fetch شوند. به صورت زیر:

سی شارپ

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

VB.Net

Protected Sub Submit(sender As Object, e As EventArgs)
    Dim customerName As String = Request.Form(txtSearch.UniqueID)
    Dim customerId As String = Request.Form(hfCustomerId.UniqueID)
    ClientScript.RegisterStartupScript(Me.GetType(), "alert", "alert('Name: " & customerName & "\nID: " & customerId &"');", True)
End Sub

موفق باشید !