روش ایجاد کمبوباکس (Drop Down List) با قابلیت جستجو در Asp.net Core

پاسخ هوش مصنوعی

برای ایجاد یک کمبوباکس با قابلیت جستجو در ASP.NET Core، می توانید از چندین روش استفاده کنید. یکی از روش های رایج استفاده از یک کتابخانه جاوا اسکریپت مانند Select2 است. در ادامه، مراحل را بررسی می کنیم:

1. نصب Select2

ابتدا باید کتابخانه Select2 را به پروژه خود اضافه کنید. می توانید آن را از طریق CDN یا از طریق npm نصب کنید. در اینجا ما از CDN استفاده می کنیم:

2. ایجاد مدل و کنترلر

مدل و کنترلری برای مشاغل بیمه ایجاد کنید و داده ها را به یک لیست ارسال کنید:

// Model
public class Job
{
    public int Id { get; set; }
    public string Name { get; set; }
}

// Controller
public class JobsController : Controller
{
    private readonly IJobRepository _jobRepository;

    public JobsController(IJobRepository jobRepository)
    {
        _jobRepository = jobRepository;
    }

    public IActionResult Index()
    {
        var jobs = _jobRepository.GetAllJobs(); // فرض بر این است که این متد لیستی از مشاغل را برمی گرداند
        return View(jobs);
    }
}

3. طراحی ویو

در ویو، یک کمبوباکس ایجاد کنید:

@model IEnumerable


    انتخاب شغل
    @foreach (var job in Model)
    {
        @job.Name
    }

4. اعمال Select2

بعد از بارگذاری صفحه، Select2 را بر روی کمبوباکس اعمال کنید:

با این کار شما یک کمبوباکس با قابلیت جستجو ایجاد کرده اید که فقط بعد از نوشتن یک کاراکتر در آن مشاغل نمایش داده می شوند.

سوال شما شامل دو بخش هست. اول اینکه میفرمایید یک لیست از مشاغل دارید که در یک فایل اکسل موجود هست و می خواهید این لیست رو درون دیتابیس بریزید. خب پس شما اول باید لیست خودتون رو داخل Sql Server بریزید و به صورت یک جدول داشته باشید. برای این منظور لینک زیر رو مطالعه کنید :

انتقال اطلاعات از اکسل به جدول Sql Server

خب مرحله بعد این هست که قصد دارید لیست رو درون یک Drop Down List با قابلیت جستجو نمایش بدید. برای این منظور می تونید از پلاگین select2 استفاده کنید.

ایجاد کمبوباکس با قابلیت انتخاب چند آیتم و جست و جو در اطلاعات

خب ابتدا به سایت select2 مراجعه کنید و فایل های css و javascript مورد نیاز برای استفاده از این پلاگین رو دانلود کنید و یا به صورت CDN استفاده کنید.

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

سپس مطابق با مثال زیر میتونید خیلی ساده یک Drop Down List با قابلیت جستجو داشته باشید.

کدهای Html 

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />


<select class="js-example-basic-single" name="state">
    <option value="AL">Alabama</option>
    <option value="TH">Tehran</option>
    <option value="WY">Wyoming</option>
</select>

کدهای جاوا اسکریپت

@section Scripts{
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

    <script>
        $(document).ready(function () {
            $('.js-example-basic-single').select2();
        });
    </script>
}

با اجرای پروژه می بینید که یک کمبوباکس با قابلیت جستجو در اطلاعات دارید. شما فقط کافیه اطلاعات رو از دیتابیس درون کمبوباکس نمایش بدید.

دانلود سورس

من اطلاعات رو از اکسل به دیتابیس انتقال دادم ولی با توجه به اینکه من از روش code first استفاده میکنم چطور میتونم این جدول جدید رو به context خودم اضافه کنم.(یک جدول جدید با همین مشخصات توسط مایگریشن ساختم ولی خطا میده)

لطفا راهنمایی کنید چطور میتونم این جدول رو به مدلی تبدیل کنم که دارای این اطلاعات است