AutoComplete

در این مقاله نشان می دهیم که چگونه با استفاده از jQuery UI در ASP.Net MVC می توانیم AutoComplete TextBox ایجاد کنیم.آموزش به صورت کامل و تصویری بوده همراه ما در ادامه باشید.

ساخت یک AutoComplete

گام ۱: ایجاد یک اپلیکیشن MVC

به منوی File رفته و New Project را انتخاب کرده و سپس “ASP.Net Web Application Template” را انتخاب می کنیم. پس از آن نام مناسبی برای پروژه انتخاب کرده Ok می کنیم. در پنجره باز شده MVC empty application را انتخاب می نماییم.

گام ۲: اضافه کردن کلاس Model

روی فولدر Model راست کلیک کرده و کلاسی با نام “CityModel” ایجاد می کنیم و کد زیر را در آن می نویسیم.

<public class City  
  {  
      public int Id { get; set; }  
      public string Name { get; set; }  
  
  }  

گام ۳: اضافه کردن کنترلر user و admin

روی فولدر Controller راست کلیک کرده و کلاس کنترلر را به صورت زیر اضافه می کنیم:

 ساخت AutoComplete در MVC

حال پس از انتخاب قالب کنترلر، روی دکمه Add کلیک می کنیم و پنجره زیر باز می شود:

 AutoComplete در mvc

نام کنترلر را مشخص کرده و روی دکمه Add کلیک می کنیم، حال فایل HomeController.cs را باز کرده و کد زیر را برای اتصال و ایجاد لیست جنریک از کلاس Model به صورت زیر در این کلاس می نویسیم.

using System.Collections.Generic;  
using System.Linq;  
using System.Web.Mvc;  
using AutoCompleteInMVCJson.Models;  
namespace AutoCompleteInMVCJson.Controllers  
{  
    public class HomeController : Controller  
    {  
        // GET: Home  
        [HttpGet]  
        public ActionResult Index()  
        {  
            return View();  
        }  
        [HttpPost]  
        public JsonResult Index(string Prefix)  
        {  
            //Note : you can bind same list from database  
            ListCity ObjList = new ListCity()  
            {  
  
                new City {Id=1,Name="Latur" },  
                new City {Id=2,Name="Mumbai" },  
                new City {Id=3,Name="Pune" },  
                new City {Id=4,Name="Delhi" },  
                new City {Id=5,Name="Dehradun" },  
                new City {Id=6,Name="Noida" },  
                new City {Id=7,Name="New Delhi" }  
  
        };  
            //Searching records from list using LINQ query  
            var CityName = (from N in ObjList  
                            where N.Name.StartsWith(Prefix)  
                          select new { N.Name });  
            return Json(CityName, JsonRequestBehavior.AllowGet);  
        }  
    }  
}  

در کد بالا، به جای استفاده از دیتابیس برای دریافت رکوردها، لیست جنریکی از جنس کلاس model ایجاد کرده و رکوردها را از این لیست واکشی نمودیم.

گام ۴: اضافه کردن رفرنس jQueryUI CSS و  کتابخانهjs

برای اضافه کردن آن ها به پروژه راه های مختلفی وجود دارد. برخی از این روش ها به صورت زیر می باشد:

  • استفاده از Nuget package manager، می توانید کتابخانه را نصب کرده و رفرنس آن را به پروژه بدهید.
  • استفاده از کتابخانه CDN که توسط مایکروسافت، گوگل یا jQuery فراهم شده است که نیاز به اتصال اینترنت دارد.
  • دانلود فایل های jQuery از سایت رسمی jQuery و اضافه کردن رفرنس آن به پروژه

در این مقاله ما از کتابخانه CDN استفاده کرده ایم.

گام ۵: تابع jQuery Ajax را برای فراخوانی متد JSON در کنترلر و همچنین فراخوانی تابع autocompelete ایجاد می کنیم.

$(document).ready(function () {  
       $("#CityName").autocomplete({  
           source: function(request,response) {  
               $.ajax({  
                   url: "/Home/Index",  
                   type: "POST",  
                   dataType: "json",  
                   data: { Prefix: request.term },  
                   success: function (data) {  
                       response($.map(data, function (item) {  
                           return { label: item.Name, value: item.Name };  
                       }))  
  
                   }  
               })  
           },  
           messages: {  
               noResults: "", results: ""  
           }  
       });  
   })  

برای کار کردن تابع بالا، فراموش نکنید که رفرنس کتابخانه jquery CDN را به صورت زیر اضافه نمایید.

link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" 
script src="//code.jquery.com/jquery-1.10.2.js"/script 
script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"/script

گام ۶: یک view به نام index اضافه کرده و تابع json بالا را در آن قرار می دهیم. بعد از قرار دادن کدهای لازم index.cshtml به شکل زیر خواهد بود:

@model AutoCompleteInMVCJson.Models.CityModel  
@{  
    ViewBag.Title = "www.compilemode.com";  
}  
link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"  
script src="//code.jquery.com/jquery-1.10.2.js"/script  
script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"/script  
script type="text/javascript"  
    $(document).ready(function () {  
        $("#CityName").autocomplete({  
            source: function (request, response) {  
                $.ajax({  
                    url: "/Home/Index",  
                    type: "POST",  
                    dataType: "json",  
                    data: { Prefix: request.term },  
                    success: function (data) {  
                        response($.map(data, function (item) {  
                            return { label: item.Name, value: item.Name };  
                        }))  
  
                    }  
                })  
            },  
            messages: {  
                noResults: "", results: ""  
            }  
        });  
    })  
/script  
@using (Html.BeginForm())  
{  
    @Html.AntiForgeryToken()  
  
    div class="form-horizontal"  
  
        hr /  
  
        div class="form-group"  
  
            div class="col-md-12"  
                @Html.EditorFor(model = model.CityName, new { htmlAttributes = new { @class = "form-control" } })  
  
            /div  
        /div  
  
    /div  
}

حال اپلیکیشن را اجرا می کنیم و با تایپ هر کلمه، به طور اتوماتیک با کلماتی که اولین حرف آن ها با حرف تایپ شده مطابقت داشته باشد نمایش داده می شود.

AutoComplete

اگر می خواهید، autocompelete شامل هر یک از حروف کلمه تایپ شده باشد، فقط لازم است که کوئری Linq را تغییر دهید و حالا هر کلمه ای به شکل زیر جستجو می شود.

چگونه در MVC یک AutoComplete بسازیم

مسعود شریفی پور

از سال 88 که با برنامه نویسی آشنا شدم خیلی علاقه مند بودم یک بستر آموزشی بسازم در فضای وب و به انتشار آموزش های در این زمینه بپردازم.حالا یک تیم داریم و با قدرت رو به جلو حرکت میکنیم.

نوشته‌های مرتبط

دیدگاه‌ها

*
*

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.