ورود به سیستم 
 
    محتویات سایت
        برچسب های محبوب 








 
   آموزش MVC - قسمت هشتم - نمایش Autocomplete DropDownList در MVC
  این مقاله به نحوه استفاده از JQuery UI برای نمایش یک Autocomplete DropDownList در MVC می پردازد.
   ASP.NET MVC
   ۱۲۱۹۰
   این مقاله حاوی فایل ضمیمه نمی باشد
   امیر مددی
   ۱۳۹۰/۸/۱۹
نسخه قابل چاپ نسخه قابل چاپ

تصمیم گرفتم برای سرعت بخشیدن به ارائه مطالب ، مقالات را کمی خلاصه تر بیان کنم و نوشتن کامل پروژه را به شما واگذار کنم، امیدوارم به این روش بتوانم مطالب بیشتری را ارائه دهم.
در این مقاله قصد دارم چگونگی استفاده از 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 استفاده کنید.
برچسب های مرتبط