آموزش اجرای AutoComplete در MVC

در این مقاله میخواهیم در MVC از AutoComplete استفاده کنیم

آموزش اجرای AutoComplete در MVC

یک برنامه از نوع MVC بسازید سپس روی پوشه Model کلیک راست کرده و یک کلاس به نام Person بسازید:

 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 را به شکل زیر تغییر دهید:

        <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>

در انتهای ویو اسکریپت زیر را بنویسید:

<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 مینویسیم:

 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 عمل خواهد کرد.

فایل های ضمیمه