Value در Autocomplete

در این مقاله به بررسی فراخوانی Value در Autocomplete در زبان سی شارپ و ASP.NET MVC میپردازیم که چطور یک Value در Autocomplete فراخوانی کنیم.

برخی از نرم افزارها نیاز به استفاده از جعبه متن هایی که به صورت خودکار پر می شوند(auto complete) دارند.

این جعبه ها شامل کلید و مقدار هستند؛ که وقتی کاربر داخل آن تایپ می کند، رکوردها (که ترکیبی از کلید و مقدار است) ثبت می شوند.

این روش جایگزین خوبی برای downlist drop است که اگر نمونه ها بیش از حد باشند مناسب نیست و انتخاب آنها بسیار دشوار است.

key value pair به این معناست که فرض کنید می خواهیم اطلاعات مجموعه ای ازکارمندان را ثبت کنیم؛ این اطلاعات شامل شناسه و نام هایشان و یا موارد دیگر(براساس نیازهایتان) می باشد.

پس بیایید این نیازمندی ها را به کمک یک اپلیکیشن ساده ASP.NET MVC نشان دهیم.

گام ۱ : یک MVC application ایجاد کنید:

  1. “statrt” , سپس “all programs” و در آخر”Microsoft Visual Studio 2015″ را انتخاب کنید.
  2. “file”, سپس “new” را انتخاب کنید. سپس روی “project” کلیک کنید. حالا”ASP.NET Web Application Template” را انتخاب کرده و در آخر نام دلخواهی را برای پروژه قرار دهید و روی OK کلیک کنید.
  3. MVC empty application option را انتخاب کرده و روی OK کلیک کنید.

گام ۲: model class را اضافه کنید.

با کلیک راست روی پوشه model در MVC application که قبلا ایجاد کردید، کلاسی با نام Employee را اضافه کنید و کدهای زیر را در آن بنویسید.

فراخوانی Value

گام ۳: کاربر و کنترلر ادمین را اضافه کنید.

با کلیک راست بر روی پوشه controller در برنامه ی mvc ساخته شده، کلاس controller را به صورت زیر اضافه کنید.

 Value در Autocomplete

پس از انتخاب قالب کنترلر، با کلیک روی دکمه add پنجره دیگری ظاهر می شود، نام کنترلر را وارد کنید.

حالا روی دکمه Add کلیک کنید. اکنون فایل HomeController.cs را باز کنید.

کد زیر را در کلاس Home controller بنویسید ( برای اتصال و ایجاد لیست عمومی از کلاس مدل (model))

HomeController.cs


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  
            List<Employee> ObjList = new List<Employee>()
            {
               new Employee {Id=100,Name="Vithal Wadje" },
                new Employee {Id=200,Name="Sudir Wadje" },
                new Employee {Id=300,Name="Sachin W" },
                new Employee {Id=400,Name="Vikram N" }

        };
            //Searching records from list using LINQ query  
            var EmpDet = (from N in ObjList
                          where N.Id.ToString().StartsWith(Prefix)|| N.Name.ToLower().StartsWith(Prefix.ToLower())
                          select new { N.Name, N.Id });
            return Json(EmpDet, JsonRequestBehavior.AllowGet);
        }
    }
}

در کد بالا، برای دسترسی به رکوردها به جای اینکه به سراغ پایگاه داده بروید، یک لیست عمومی از کلاس مدل ایجاد کنید و رکورد مورد نظر را از لیست بالا واکشی می کنیم.

گام ۴: از ارجاعات jQuery UI css استفاده کنید و همینطور کتابخانه js، چرا که راه های بسیاری برای اضافه کردن ارجاعات مربوط به کتابخانه jquery به پروژه هایمان وجود دارد. در ادامه برخی از متدها بررسی می شوند:

  • با استفاده از مدیر بسته Nuget، شما می توانید کتابخانه و مراجع را روی پروژه خود نصب کنید.
  • از کتابخانه CDN ارائه شده توسط مایکروسافت ، jQuery، گوگل یا هرچیز دیگری که نیازمند اتصال به اینترنت است؛ استفاده کنید.
  • فایل های jQuery  را از وب سایت رسمی jquery دانلود کنید سپس ارجاعات لازم را به پروژه خودتان اضافه کنید.

در این مثال از jQuery CDN library استفاده کنید.

گام ۵: یک تابع jQuery Ajax ایجاد کنید. این تابع برای فراخوانی متد controller JSON action و فراخوانی تابع autocomplete است.

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0A%20%20%20%20%24(document).ready(function%20()%20%7B%0A%20%20%20%20%20%20%20%20%24(%22%23Name%22).autocomplete(%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20source%3A%20function%20(request%2C%20response)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24.ajax(%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20url%3A%20%22%2FHome%2FIndex%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20type%3A%20%22POST%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20dataType%3A%20%22json%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20data%3A%20%7B%20Prefix%3A%20request.term%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20success%3A%20function%20(data)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20response(%24.map(data%2C%20function%20(item)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20return%20%7B%20label%3A%20item.Id%2B%22-%22%2Bitem.Name%2C%20value%3A%20item.Id%20%7D%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D))%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D)%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%7D)%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="script" title="script" />

برای کار با تابع بالا، فراموش نکنید که ارجاعات jQuery CDN library را به صورت زیر اضافه کنید:


گام ۶: یک View (با نام index) ایجاد کنید و آن را بالای تابع JSON اضافه کنید. پس از اضافه کردن کدهای لازم، Index.cshtml به صورت زیر خواهد شد:

Index.cshtml


@model AutoCompleteInMVCJson.Models.Employee
@{
    ViewBag.Title = "www.compilemode.com";
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22%2F%2Fcode.jquery.com%2Fjquery-1.10.2.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="script" title="script" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22%2F%2Fcode.jquery.com%2Fui%2F1.11.4%2Fjquery-ui.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="script" title="script" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0A%20%20%20%20%24(document).ready(function%20()%20%7B%0A%20%20%20%20%20%20%20%20%24(%22%23Name%22).autocomplete(%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20source%3A%20function%20(request%2C%20response)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24.ajax(%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20url%3A%20%22%2FHome%2FIndex%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20type%3A%20%22POST%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20dataType%3A%20%22json%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20data%3A%20%7B%20Prefix%3A%20request.term%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20success%3A%20function%20(data)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20response(%24.map(data%2C%20function%20(item)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20return%20%7B%20label%3A%20item.Id%2B%22-%22%2Bitem.Name%2C%20value%3A%20item.Id%20%7D%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D))%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D)%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%7D)%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="script" title="script" />

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()


<div class="form-horizontal">

<hr />


<div class="form-group">

<div class="col-md-12">
                @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })

            </div>

        </div>

    </div>

}

جستجو توسط کلید یا شناسه

اکنون برنامه را اجرا کنید و یک شناسه یا کلید دلخواه را وارد کنید. سپس برنامه مجموعه ای از رکوردها (رکوردهایی که با اولین کلید تطبیق دارند) را نشان می دهد همانند تصویر زیر:

 AutoComplete در mvc

جستجو به وسیله نام یا مقادیر

اکنون برنامه را اجرا کنید و یک کلمه دلخواه وارد کنید. سپس برنامه مجموعه ای از رکوردها (را که دقیقا با شروع کلمه یکسان است) را نشان می دهد همانند تصویر زیر:

 فراخوانی Value در Autocomplete

رکوردهای انتخاب شده

یک جفت کلید-مقدار دلخواه وارد کنید. برنامه، در جعبه متن، به جای مقدار، کلید را قرار می دهد.(این امکان وجود دارد که به صورت عکس آن را تغییر دهد)

 آموزش MVC

پس از بررسی مثال های بالا، امیدوارم چگونگی ساخت جعبه متن هایی که به صورت خودکار پر می شوند را در ASP.NET MVC و با استفاده از jQuery UI آموخته باشید.

یادداشت:

• کدهای بالا را براساس نیاز خود تغییر دهید.

• استانداردهای مناسب که ممکن است دراین کد مشاهده نشده باشد را اعمال کنید.

• حتما از کتابخانه jQuery  استفاده کنید.

 

محمد دهقانی

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

دیدگاه‌ها

*
*

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

    MasterData پاسخ

    متن آموزشی بعضی جاها گنگ و نامفهومه
    فایل پروژه رو برای دانلود بذارید که نیازی نباشه برای تست تمام کدها رو یه بار تولید بشه

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

      مرسی از انتقاد حتما مورد بررسی قرار میدهیم