تصمیم گرفتم برای سرعت بخشیدن به ارائه مطالب ، مقالات را کمی خلاصه تر
بیان کنم و نوشتن کامل پروژه را به شما واگذار کنم، امیدوارم به این روش بتوانم
مطالب بیشتری را ارائه دهم.
در این مقاله قصد دارم چگونگی استفاده از JQuery UI را جهت نمایش یک
Autocomplete DropDownList در یک پروژه MVC بیان کنم. با اجرای این تکنیک شما یک
TextBox خواهید داشت که درآن می توانید لیستی از موارد مشابه (مثلا ایمیل افراد )
را تنها با تایپ چند حرف ببینید. چیزی شبیه آنچه که الان شما در گوگل می بینید که
با تایپ تنها چند حرف از یک کلمه ، موارد مشابه را به شما نمایش می دهد.
- در این مقاله من از نگارش Razor برای صفحات View استفاده می کنم.روش کار:
1- ابتدا کتابخانه JQuery Ui را از آدرس
http://jqueryui.com/ دانلود کنید. آن را به
فولدر Scripts پروژه خود اضافه کنید و در Viewیی که می خواهید ، با دستور Script
به آن اشاره کنید: ( خود JQuery نیز را طبیعتا لازم داریم )
<script src="@Url.Content("~/scripts/jquery-1.7.js")" type="text/javascript" />
<script src="@Url.Content("~/scripts/jquery-ui-1.8.16.js")" type="text/javascript"
/>
نکته: 1- توجه داشته باشید نام فایلی که شما دانلود می کنید و یا نسخه
آن ممکن است متفاوت با این چیزی باشد که من اینجا نوشته ام ، چون هر چند روز یکبار
این فایلها بروز می شوند. 2- عبارت @Url.Content باعث می شود که نیازی نداشته باشید
برای آدرس دهی از .. استفاده کنید. 3- اگر می خواهید در سایر صفحات نیز از این
تکنیک استفاده کنید، دو خط فوق را به فایل Layout.cshtml_ که در فولدر Views/Shared
وجود دارد ، اضافه کنید (در قسمت head )
2- در View
یی که می خواهید textbox را قرار دهید ، علاوه بر textbox سایر ملزومات
form را نیز قرار دهید ( با نگارش Razor به صورت زیر) :
@using (Html.BeginForm("Search", "Home", FormMethod.Post, new { id = "ID" }))
{
<input id="txtSearch" name="txtSearch" type="text" />
<input type="submit" value="show" />
}
توضیح: 1- در کد فوق Search نام اکشن ، Home نام کنترلر
است. 2- خصوصیت idو name جعبه متنی ( textbox ) باید یکی باشد.
3- این فرم به ما می گوید که اگر متنی در این textbox تایپ شد و دکمه
Enter فشار داده شد، اکشن Search اجرا شود، ولی ما به قطعه کدی نیاز داریم که
بتواند با فشار دادن هر کلید ، عملیات جستجو را انجاه دهد و لیست موارد مشابه را به
ما برگرداند. برای این کار از JQuery کمک می گیریم و در همان View یی که این
فرم را گذاشتیم ، اسکریپت زیر را اضافه می کنیم :
<script type="text/javascript">
$(function () {
$("#txtSearch").autocomplete({
source: "/Home/AutocompleteSearch",
minLength: 3,
select: function (event, ui) {
if (ui.item) {
$("#txtSearch").val(ui.item.value);
$("form").submit();
}
}
});
});
</script>
در کد فوق ابتدا عنصر txtSearch انتخاب شده ، که همان textbox است و سپس
متد autocomplete اجرا شده است. در این متد پارامتر minLenght مشخص می کند که با
تایپ چند کاراکتر توسط کاربر، عملیات جستجو شروع شود. وقتی بیش از 3 کاراکتر در
textbox تایپ می شود این متد فراخوانی می شود و با هر بار فراخوانی اکشن
AutocompleteSearch از کنترلر Home را اجرا می کند و پارامتر val این textbox را به
عنوان آرگومان به اکشن ارسال می کند :
$("#txtSearch").val(ui.item.value);
$("form").submit();
4- حال باید به پیاده سازی متد AutocompleteSearch بپردازیم که بسیار
راحت است و می تواند هر نوع جستجویی که شامل عبارت like ( یا Contain در Linq ) روی هر فیلد دلخواهی که مد
نظر ما است ، باشد. قطعه زیر با توجه به نام بانک اطلاعاتی ، جداول و فیلدهای شما
ممکن است تغییر کند:
public JsonResult AutoCompleteSearch(string txtValue)
{
var suggestions = (from m in db.aspnet_Membership where m.Email.Contains(txtValue) select m.Email).Take(10).ToList();
return Json(suggestions, JsonRequestBehavior.AllowGet);
}
توضیح : خروجی این تابع از نوع JsonResult است (سعی می کنم در
آینده آن را توضیح دهم ) - ورودی تابع نیز همان مقدار textbox است که توسط JQuery
ارسال شده است یعنی txtValue 5- تا اینجا، اجرای AutoComplete
DropDownList کامل شده و شما باید جستجوی اصلی را که پس از فشار دادن دکمه Enter
صورت می پذیرد را در اکشن Search که در بند 2 توضیح داده شد ، انجام دهید و در view
مربوط به خودش نتیجه را نشان دهید.
در این مقاله با نحوه استفاده از یکی از دهها امکانات Jquery Ui در MVC آشنا شدید، با نگاهی به سایت JQuery UI می توانید از سایر ابزارهای مفید آن در پروژه های MVC استفاده کنید.