در این مقاله نشان می دهیم که چگونه با استفاده از 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 راست کلیک کرده و کلاس کنترلر را به صورت زیر اضافه می کنیم:
حال پس از انتخاب قالب کنترلر، روی دکمه Add کلیک می کنیم و پنجره زیر باز می شود:
نام کنترلر را مشخص کرده و روی دکمه 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
}
حال اپلیکیشن را اجرا می کنیم و با تایپ هر کلمه، به طور اتوماتیک با کلماتی که اولین حرف آن ها با حرف تایپ شده مطابقت داشته باشد نمایش داده می شود.
اگر می خواهید، autocompelete شامل هر یک از حروف کلمه تایپ شده باشد، فقط لازم است که کوئری Linq را تغییر دهید و حالا هر کلمه ای به شکل زیر جستجو می شود.
دیدگاه‌ها