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

03:18:00 PM - 1400/05/15

من یک لیست بزرگ از مشاغل بیمه که حدودا 130000 رکورد دارد را در کمبوباکس select2 نمایش دادم ولی به محض ورود به فرم ثبت نام پیج بسیار سنگین که انگار هنگ کرده و پلاگین select2 بعد از انتخاب به مدت چند ثانیه سیاه میشود و بعد نمایش داده میشود این بخاطر لود کردن جدولی به این سنگینی هست.

در سایتی دیگر همین کار رو کردن ولی تا قبل از اینکه کاربر کلمه ای ننویسد لیست رو لود نمیکنه.

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

(من از IEnumerable) استفاده کردم

@model IEnumerable<ModiranVira.Models.Person>
                  
<label>شغل بیمه</label>
<select class="form-control js-example-basic-single" asp-for="@Model.person.SematYaShoghlBime">
   @foreach (var item in Model.TaminJobs)
   {
      <option value="@item.jobName @item.jobCode">@item.jobName @item.jobCode</option>
   }
</select>

کدهای BackEnd

public IActionResult submitPerson()
{   
   var Tamin = _context.TaminJobs.ToList();
   return View(Tamin);
}

ویرایش شده در شنبه ۱۶ مرداد ۱۴۰۰ ساعت ۱۶:۰۹:۳۸

به این سوال امتیاز بدهید 0 تعداد بازدید این سوال : 2801

پاسخ دهنده : fateme 03:35:00 PM - ۱۴۰۰/۰۵/۱۶

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

تفاوت بین IEnumerable و IQueryable

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

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

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

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

خاصیت autocomplete در input

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

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

ویرایش شده در شنبه ۱۶ مرداد ۱۴۰۰ ساعت ۱۶:۱۱:۱۲