در این مقاله به شما آموزش می دهیم که چگونه یک 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
موفق باشید !
هیچ دیدگاهی نوشته نشده است.