نمایش اطلاعات زیاد در پلاگین select2 و مشکل Load شدن کند Page

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

برای بهبود عملکرد پلاگین Select2 و کاهش تأخیر در بارگذاری صفحه، می توانید از بارگذاری تنبل (Lazy Loading) به همراه جستجو در سمت سرور استفاده کنید. این روش اجازه می دهد که تنها زمانی که کاربر شروع به تایپ می کند، داده ها از سرور درخواست شوند و نه در بارگذاری اولیه صفحه.

در ابتدا، کد HTML مربوط به Select2 را به گونه ای تغییر دهید که از AJAX برای بارگذاری داده ها استفاده کند:

شغل بیمه

سپس کد JavaScript برای بارگذاری داده ها به صورت دینامیک اضافه کنید:

$(document).ready(function() {
    $('#taminJobs').select2({
        ajax: {
            url: '/your-controller/get-tamin-jobs',
            dataType: 'json',
            delay: 250,
            data: function (params) {
                return {
                    searchTerm: params.term // Term جستجو شده
                };
            },
            processResults: function (data) {
                return {
                    results: data.map(function(item) {
                        return {
                            id: item.jobCode, // یا هر شناسه ی منحصر به فرد دیگر
                            text: item.jobName // نام شغل
                        };
                    })
                };
            },
            cache: true
        },
        minimumInputLength: 1 // حداقل کاراکتر برای شروع جستجو
    });
});

و سرانجام در کد BackEnd خود، می توانید یک متد جدید ایجاد کنید تا داده های شغلی را بر اساس ورودی جستجو بارگذاری کند:

public JsonResult GetTaminJobs(string searchTerm)
{
    var jobs = _context.TaminJobs
        .Where(j => j.jobName.Contains(searchTerm) || j.jobCode.Contains(searchTerm))
        .Select(j => new { jobName = j.jobName, jobCode = j.jobCode })
        .ToList();

    return Json(jobs);
}

این تغییرات باعث می شوند که داده ها تنها در صورت نیاز بارگذاری شوند و از تأخیر در بارگذاری اولیه صفحه جلوگیری گردد.

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

برای حل مشکل لود سنگین اطلاعات در پلاگین select2 و بهبود عملکرد، می توانید از بارگذاری بر اساس جستجو (Infinite Scroll یا AJAX) استفاده کنید. این روش به شما این امکان را می دهد که فقط با شروع تایپ کاربر، داده ها را بارگذاری کنید. در زیر یک نمونه از نحوه پیاده سازی این راه حل آورده شده است:

ابتدا کد HTML خود را به این صورت تغییر دهید:

@model IEnumerable<ModiranVira.Models.Person>

<label>شغل بیمه</label>
<select class="form-control js-example-basic-single" asp-for="@Model.person.SematYaShoghlBime" id="taminJobSelect"></select>

سپس در فایل جاوااسکریپت خود (در پایین صفحه یا فایل جداگانه) کد زیر را اضافه کنید تا از AJAX برای بارگذاری مشاغل استفاده کنید:

$(document).ready(function() {
    $('#taminJobSelect').select2({
        ajax: {
            url: '/YourController/GetTaminJobs', // آدرس اکشن برای بارگذاری مشاغل
            type: 'GET',
            dataType: 'json',
            delay: 250,
            data: function (params) {
                return {
                    searchTerm: params.term // کلمه جستجو
                };
            },
            processResults: function (data) {
                return {
                    results: data.map(function(job) {
                        return {
                            id: job.jobCode,
                            text: job.jobName + ' ' + job.jobCode
                        };
                    })
                };
            },
            cache: true
        },
        minimumInputLength: 1 // حداقل طول ورودی برای شروع جستجو
    });
});

در نهایت، در کنترلر خود یک اکشن جدید برای بازگشت نتایج جستجو اضافه کنید:

public IActionResult GetTaminJobs(string searchTerm)
{
    var results = _context.TaminJobs
                          .Where(job => job.jobName.Contains(searchTerm) || job.jobCode.Contains(searchTerm))
                          .Select(job => new { job.jobName, job.jobCode })
                          .ToList();

    return Json(results);
}

با این روش، تنها زمانی که کاربر شروع به تایپ می کند، داده ها لود می شوند و این باعث می شود که صفحه به طور کلی سبک تر و با عملکرد بهتری بارگذاری شود.

شما وقتی قصد دارید اطلاعات رو از دیتابیس توسط انتیتی فریم ورک فراخوانی کنید به روشهای مختلفی مثل eagle Loading (برای اطلاعات در حجم کم و سرعت بالا) و یا Lazy Loading (برای اطلاعات در حجم بالا) می تونید استفاده کنید. که برای این منظور لینک زیر رو مطالعه کنید.

تفاوت بین IEnumerable و IQueryable

اما خب مورد شما کمی متفاوت هست. شما میخواهید حدود 130 هزار رکورد رو از دیتابیس واکشی کنید و در یک تگ select نمایش بدید. خب شما به هر روشی کار کنید قدری delay یا تاخیر خواهید داشت چون در هر صورت واکشی 130 هزار رکورد قطعا زمان زیادی از سرور رو میگیره. خصوصا اگر تعداد کاربران سیستم شما زیاد باشه نتایج بسیار بدی می بینید. فرض کنید همزمان 100 کاربر به این View درخواست نمایش بفرستن. اونجا قطعا سرور دچار هنگی میشه.

ببینید به نظر من راه حل این مشکل این هست که شما 130 هزار رکورد رو همزمان واکشی نکنید.

راه حل اول : اولین راه حلی که میشه روش کار کرد این هست که این اطلاعات رو توسط یک شاخص تقسیم بندی کنید. مثلا اگر لیست تمامی شهرها و روستاها و شهرستان ها رو در یک جدول دارید خب توسط یک فیلد مشخص کنید استان هر کدوم چی هست. به این صورت شما میتونید دو تا تگ select داشته باشید. اولی لیست استان ها که با انتخاب هر استان شهرها و شهرستان های همون استان نمایش داده بشه. البته این کار رو باید از ابتدای طراحی سیستم انجام می دادید.

راه حل دوم : دومین راه حل این هست که شما اصلا از select2 استفاده نکنید. کامپوننت select2 برای زمانی هست که شما قصد دارید بیش تر از یک آیتم رو انتخاب کنید. مثلا لیست علاقمندیهای یک شخص که ممکنه بیش از یک علاقمندی داشته باشه. پلاگین Select2 قابلیت جست و جو هم داره ولی همه اطلاعات رو واکشی میکنه و برای اطلاعات در حجم زیاد کند هست. ولی شما ظاهرا نیازی ندارید چند آیتم رو انتخاب کنید. خب در این صورت میتونید از خاصیت AutoComplete مربوط به خود تگ input استفاده کنید. به تصویر زیر دقت کنید :

همونطوری که می بینید در اینجا دیگه ما کمبوباکس نداریم. یک تگ input ساده داریم که خاصیت autoComplete فعال شده براش. و 2 یا 3 یا بیشتر (قابل تنظیم) حرف که وارد میشه خودش در دیتابیس جست و جو میکنه و موارد پیدا شده رو نمایش میده و میتونید انتخاب کنید. مثلا در تصویر بالا کلمه "درخ" نوشته شده و همه عبارتهایی که شامل این کلمه هستن از سمت دیتابیس واکشی شدن و نمایش داده شدن. دقت کنید این یک تگ input هست نه کمبوباکس !

آموزش استفاده از قابلیت AutoComplete