آموزش اجرای AutoComplete در MVC
دوشنبه 18 آبان 1394 1:19 PM
|
1
2
|
public int PersonId { get; set; } public string PersonName { get; set; } |
حالا رو یپوشه Controller کلیک راست کنید و گزینه Add سپس Controller را انتخاب کنید از لیست ظاهر شده Mvc 5 Controller With Views,Using Entity Framework را انتخاب کنید در پنجره Add Controller مدل خود را یعنی person را انتخاب کنید و بروی add کلیک کنید سپس برنامه را اجرا کنید و تعدادی نام به پروژه خود اضافه کنید سپس از منوی tools گزینه Nuget Package Manager و Manage Nuget Packages For Solution را انتخاب کنید و به قسمت آنلاین بروید و در سمت بالا سمت راست کلمه jQuery UI Autocomplete را جستجو کنید و( Jquery Ui (Combined Library را انتخاب و روی Install کلیک کنید و منتظر بمانید تا فایل های لازم به پروژه شما اضافه شود.سپس برنامه رو stop کنید به ویو Create بروید و فیلد PersonName را به شکل زیر تغییر دهید:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<div class="form-group"> @Html.LabelFor(model => model.PersonName, new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.TextBoxFor(Model => Model.PersonName,new{ @class = "autocomplete-with-hidden", data_url = Url.Action("GetListForAutocomplete", "People")}) @Html.HiddenFor(Model => Model.PersonId) @Html.ValidationMessageFor(model => model.PersonName) </div></div> |
در انتهای ویو اسکریپت زیر را بنویسید:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<script> $(function () { $('.autocomplete-with-hidden').autocomplete({ minLength: 0, source: function (request, response) { var url = $(this.element).data('url'); $.getJSON(url, { term: request.term }, function (data) { response(data); }) }, select: function (event, ui) { $(event.target).next('input[type=hidden]').val(ui.item.id); }, change: function (event, ui) { if (!ui.item) { $(event.target).val('').next('input[type=hidden]').val(''); } } }); })</script> |
توسط اسکریپت بالا از طریق json به کنترلر رفته عمل جستجو را انجام داده و نتیجه از نوع json پاس داده میشود حال به Controller خود رفته و یک تابع با فرمت json مینویسیم:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
public JsonResult GetListForAutocomplete(string term) { Person[] matching = string.IsNullOrWhiteSpace(term) ? db.People.ToArray() : db.People.Where(p => p.PersonName.ToUpper().StartsWith(term.ToUpper())).ToArray(); return Json(matching.Select(m => new { id = m.PersonId, value = m.PersonName, label = m.ToString() }), JsonRequestBehavior.AllowGet); } |
حالا میتونید برنامه خود را اجرا کنید ودر ویوی Create در هنکام تایپ نام AutoComplete عمل خواهد کرد.
