مقدمه :
اگر به تازگی در سایت گوگل کلمه رایجی را جستجو کرده باشید، باید با صحنه ای مشابه شکل زیر مواجه شده باشید.
در حقیقت سایت گوگل با توجه به کاراکتر هایی که شما برای جستجو وارد نموده اید، لیستی از پیشنهاد ها را ارائه می کند. این لیست شامل کلماتی می باشد که توسط تعداد زیادی از کاربران مورد جستجو واقع شده اند.
در صورتی که کلمه و یا جمله مورد نظر شما در لیست پیشنهادات باشد، شما می توانید آن را از لیست پیشنهادات انتخاب نمایید.
کنترل AutoCompleteExtender جهت به وجود آوردن نمونه ساده تری از تکنیک ذکر شده در بالا مورد استفاده قرار می گیرد. این کنترل نیز جزو ساده ترین کنترل های موجود در AjaxControlToolkit می باشد.
کنترل AutoCompleteExtender همانطور که از نام آن پیداست جزو کنترل های توسعه گر (Extender) می باشد و قابلیت های خود را می تواند به یک کنترل TextBox اضافه نماید.
دموی برنامه:
برای نمایش دموی برنامه به اینجا مراجعه نمایید.
شروع :
یک کنترل TextBox به صفحه اضافه کنید و مطابق قطعه کد زیر تغییر دهید.
<asp:TextBox ID="myTextBox" runat="server" Width="363px"></asp:TextBox>
|
یک کنترل AutoCompleteExtender به صفحه اضافه نموده و مطابق زیر آن را تغییر دهید.
<ajaxToolkit:AutoCompleteExtender runat="server"
ID="autoComplete1"
TargetControlID="myTextBox"
ServicePath="AutoCompleteService.asmx"
ServiceMethod="GetCompletionList"
MinimumPrefixLength="2"
EnableCaching="true"
CompletionSetCount="10" >
</ajaxToolkit:AutoCompleteExtender>
|
اکنون به معرفی برخی صفات مهم کنترل AutoCompleteExtender می پردازم.
-
TargetControlID : همانند سایر کنترل های موجود در مجموعه AjaxControlToolkit ، این صفت نام کنترلی را که قرار است خصوصیات آن توسعه پیدا کند (در اینجا myTextBox) نگهداری می کند.
-
ServicePath : با توجه به اینکه ما قصد داریم زمانی که کاربر کلمه ای را در کنترل myTextBox تایپ می کند یک متد را از طریق وب سرویس فراخوانی کنیم، این صفت مسیر وب سرویس مورد نظر را نگهداری می کند. (در ادامه مقاله، وب سرویس مورد نظر را مشاهده خواهید نمود)
-
ServiceMethod : این صفت نام متدی از وب سرویس را که قصد فراخوانی آن را داریم، نگهداری می کند.
-
MinimumPrefixLength : این صفت مشخص می کند که کاربر حداقل باید چه تعداد کاراکتر را تایپ کند تا لیست پیشنهاد را به او نمایش دهیم. همانطور که ملاحظه می نمایید، در قطعه کد بالا ما عدد 2 را به این صفت نسبت داده ایم. در نتیجه از زمانی که کاربر 2 کاراکتر را تایپ نماید، نمایش لیست پیشنهادها آغاز می شود.
-
EnableCaching : در صورتی که مقدار این صفت برابر true باشد، پس از نمایش لیست پیشنهادات به کاربر، این لیست در حافظه پنهان (cache) مرورگر کاربر ذخیره می شود و اگر کاربر کاراکترهای مورد نظر خود را مجددا تایپ نماید(تکراری)، لیست پیشنهادات از حافظه پنهان مرورگر استخراج می شود (به جای اینکه متد وب سرویس مجددا فراخوانی شود)
-
CompletionSetCount : این صفت حداکثر تعداد پیشنهاداتی را که می توان به کاربر نمایش داده را نگهداری می کند. به طور مثال اگر مقدار آن برابر 10 باشد، حداکثر تعداد گزینه هایی که به کاربر نمایش داده می شود 10 عدد می باشد.
تذکر:
با توجه به اینکه در حال حاضر بسیاری از توسعه گران ایرانی از VS 2005 استفاده می کنند، مقالات مربوط به AJAX را معمولا سازگار با VS 2005 یعنی توسط ASP.NET AJAX 1.0 انجام می دهم. ولی در صورتی که شما از ورژن VS 2008 استفاده می کنید، بهتر است بدانید که چند صفت جدید به این کنترل اضافه شده است که امکان استفاده از CSS جهت بهبود ظاهر این کنترل را اینجاد نموده است.
اکنون زمان این است به وب سرویس مورد نظر خود را ایجاد کنیم.
یک وب سرویس به نام AutoCompleteService ایجاد نمایید و متد GetCompletionList را به شکل زیر به آن اضافه نمایید.
[System.Web.Script.Services.ScriptService]
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class AutoCompleteService : System.Web.Services.WebService
{
[WebMethod]
public string[] GetCompletionList(string prefixText, int count)
{
Random random = new Random();
List<string> items = new List<string>(count);
for (int i = 0; i < count; i++)
{
char c1 = (char)random.Next(65, 90);
char c2 = (char)random.Next(97, 122);
char c3 = (char)random.Next(97, 122);
items.Add(prefixText + c1 + c2 + c3);
}
return items.ToArray();
}
}
|
متد GetCompletionList توسط کنترل AutoCompleteExtender فراخوانی می شود.
همانطور که ملاحظه می نمایید این متد دو پارامتر دارد. پارامتر اول کلمه ای است که کاربر در داخل کنترل TextBox تایپ نموده است و پارامتر دوم، حداکثر تعداد پیشنهاداتی است که می تواند به کاربر نمایش داده شود.
با توجه به اینکه ما در این مقاله قصد داریم به طور آزمایشی تعدادی پیشنهاد را نمایش دهیم، یک حلقه for ایجاد نموده ایم و داخل آن به اندازه حداکثر تعداد پیشنهاداتی که باید به کاربر نمایش داده شود، دیتای آزمایشی تولید نموده ایم و لیست پیشنهادات را به صورت آرایه ای از string ها برگردانده ایم.
ولی در پروژه های کاربردی شما باید با توجه به کاراکتر هایی که کاربر وارد نموده است، لیست پیشنهادات خود را نمایش دهید.
خوب کار تمام است و اکنون شما می توانید برنامه را اجرا نموده و عملکرد کنترل را مورد بررسی قرار دهید.
مثال کامل انجام شده در این مقاله از لینک بالای صفحه قابل دریافت می باشد.