Handle Huge Amount Of Data In ASP.NET MVC DropDownList

In this blog, you will learn how to handle a huge amount of data in ASP.NET MVC DropDownList.

Let's say, you have lakhs of data that are coming from the database that have to be shown in your dropdown list. On the UI (page), a your page gets hanged because binding lakhs of data in dropdown is a time consumin process (your page hangs). And, we don't want to use AJAX on demand on any scroll i.e (hit to database again and again).

So, this article helps you to handle these type of scenarios which can be for dropdownlist or listbox or grid etc.

Let's understand the problem by an example.

1. We have three dropdowns, Employername, EmployerCode, MedicateNo.
2. Every employer has unique employer code and Medicate Number.
3. If we select any employer code, the corresponding employer name and medicate number gets selected and vice versa.
4. We have lakhs of data in both dropdowns (i.e., lakhs of employer codes, names, and medicate numbers). If we fill huge data from Controller that is coming from database and render it on the View to bind dropdowns, the webpage gets unresponsive.

So, here is the solution to this problem. Store the huge amount of data in JSON object in the View. Bind the data from object to dropdown on demand to make page run faster.

Below is my Controller code.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using OnDemandPagerDemo.Models;
namespace OnDemandPagerDemo.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            Home model = new Home();
            BindList(ref model);
            model.selectValue = 85;
            return View(model);
        }
        public void BindEmpNameAndCode(ref Home home)
        {
            List<SelectListItem> optEmplName = new List<SelectListItem>() {
            new SelectListItem(){ Text="UNKNOWN",Value="0"},
            new SelectListItem(){ Text="UNKNOWN",Value="1"},
            new SelectListItem(){ Text="TWO",Value="2"},
            new SelectListItem(){ Text="TWO",Value="3"},
            new SelectListItem(){ Text="Four",Value="4"},
            new SelectListItem(){ Text="Five",Value="5"},
            };
            List<SelectListItem>  optEmplCode = new List<SelectListItem>() {
            new SelectListItem(){Text="0",Value="UNKNOWN"},
            new SelectListItem(){Text="1",Value="UNKNOWN"},
            new SelectListItem(){Text="2",Value="TWO"},
            new SelectListItem(){Text="3",Value="TWO"},
            new SelectListItem(){Text="4",Value="Four"},
            new SelectListItem(){Text="5",Value="Five"},
            };
            List<SelectListItem> optEmpMed = new List<SelectListItem>() {
           new SelectListItem(){  Text="Med0",Value="0"},
            new SelectListItem(){ Text="Med1",Value="1"},
            new SelectListItem(){ Text="Med2",Value="2"},
            new SelectListItem(){ Text="Med3",Value="3"},
            new SelectListItem(){ Text="Med4",Value="4"},
            new SelectListItem(){ Text="Med5",Value="5"},
            };

            home.EmployerCode = optEmplCode;
            home.EmployerName = optEmplName;
            home.EmployerMno = optEmpMed;
        }

 // here i am makig loop to create dummy (500)records , you can fetch data from database(write your datanbase logic to fetch data)
        public void BindList(ref Home home)
        {
            List<SelectListItem> optEmplName = new List<SelectListItem>();
            List<SelectListItem> optEmplCode = new List<SelectListItem>();
            List<SelectListItem> optEmplMed = new List<SelectListItem>();
            List<SelectListItem> emuns = new List<SelectListItem>();
            SelectListItem SelName = null;
            SelectListItem SelCode = null;
            SelectListItem SelMed = null;
            for (int i = 0; i < 500; i++)
            {
                SelName = new SelectListItem();
                SelName.Text = i + "Name";
                SelName.Value = i.ToString();
                optEmplName.Add(SelName);
            }
            for (int i = 0; i < 500; i++)
            {
                SelCode = new SelectListItem();
                SelCode.Text = i + "Code";
                SelCode.Value = i.ToString();
                optEmplCode.Add(SelCode);
            }
            for (int i = 0; i < 500; i++)
            {
                SelMed = new SelectListItem();
                SelMed.Text = i + "Mno";
                SelMed.Value = i.ToString();
                optEmplMed.Add(SelMed);
            }
            SelectListItem select = optEmplCode.Where(x => x.Value == "85").FirstOrDefault();
            optEmplCode.RemoveAll(x => x.Value == Convert.ToString(85));
            optEmplCode.Insert(0, select);
            SelectListItem select1 = optEmplName.Where(x => x.Value == "85").FirstOrDefault();
            optEmplName.RemoveAll(x => x.Value == Convert.ToString(85));
            optEmplName.Insert(0, select1);
            SelectListItem select2 = optEmplMed.Where(x => x.Value == "85").FirstOrDefault();
            optEmplMed.RemoveAll(x => x.Value == Convert.ToString(85));
            optEmplMed.Insert(0, select2);
            home.EmployerName = optEmplName;
            home.EmployerCode = optEmplCode;
            home.EmployerMno = optEmplMed;
        }
        public ActionResult About()
        {
            ViewBag.Message = "Your app description page.";
            return View();
        }
        public ActionResult Contact()
        {
            ViewBag.Message = "Your contact page.";
            return View();
        }
        }
    }
# View Code

@model OnDemandPagerDemo.Models.Home
@{
    Layout = null;
    ViewBag.Title = "Home Page";
}
<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<style type="text/css">
    .drop {
        width: 200px;
    }
</style>
<script type="text/javascript">
</script>
<script type="text/javascript">

    var JsonModelForEmployName = null;
    var JsonModelForEmployCode = null;
    var JsonModelForEmployMNo = null;
    var items1 = null;
    var items2 = null;
    var items3 = null;
    var arrayEmpName;
    var arrayEmpCode;
    var arrayEmpMno;
    var  offSet = 10, isPreviousEventComplete = true, isDataAvailable = true;
    JsonModelForEmployName = '@Html.Raw(Json.Encode(Model.EmployerName))';
    arrayEmpName = eval(JsonModelForEmployName.replace(/[\r\n]/, ""));

    JsonModelForEmployCode = '@Html.Raw(Json.Encode(Model.EmployerCode))';
    arrayEmpCode = eval(JsonModelForEmployCode.replace(/[\r\n]/, ""));

     JsonModelForEmployMNo = '@Html.Raw(Json.Encode(Model.EmployerMno))';
    arrayEmpMno = eval(JsonModelForEmployMNo.replace(/[\r\n]/, ""));

     var startPointName = 0;
     var startPointCode = 0;
     var startPointMno = 0;
     $(document).ready(function () {

         $('#ECode').scroll(function (e) {
             items1 = null
             items2 = null
             items3 = null
             if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
                 var scrollto = $(this).scrollTop();
                 e.preventDefault();
                 startPointCode = startPointCode + (startPointCode == 0 ? offSet : 0);
                 for (var i = startPointCode; i < arrayEmpCode.length; i++) {
                     if (i < (startPointCode + 100)) {
                         items1 = "<option value='" + arrayEmpCode[i].Value + "'>" + arrayEmpCode[i].Text + "</option>";
                         $('#ECode').append(items1);
                         items2 = "<option value='" + arrayEmpName[i].Value + "'>" + arrayEmpName[i].Text + "</option>";
                         $('#EName').append(items2);
                         items3 = "<option value='" + arrayEmpMno[i].Value + "'>" + arrayEmpMno[i].Text + "</option>";
                         $('#EMno').append(items3);
                     }
                     else {
                         break;
                     }
                 }
                 startPointCode = startPointCode + 100;
                 startPointName = startPointName + 100;
                 startPointMno = startPointMno + 100;
             }
         });
        $('#EName').scroll(function (e) {
            items1 = null
            items2 = null
            items3 = null

      if ($(this).scrollTop() + $(this).innerHeight() < $(this)[0].scrollHeight) {
                var scrollto = $(this).scrollTop();
                    e.preventDefault();
            startPointName = startPointName + (startPointName == 0 ? offSet : 0);
                    for (var i = startPointName; i < arrayEmpName.length; i++) {
                        if (i < (startPointName + 100)) { items1 = "<option value='" + arrayEmpCode[i].Value + "'>" + arrayEmpCode[i].Text + "</option>";
                            $('#ECode').append(items1);items2 = "<option value='" + arrayEmpName[i].Value + "'>" + arrayEmpName[i].Text + "</option>";
                            $('#EName').append(items2);
items3 = "<option value='" + arrayEmpMno[i].Value + "'>" + arrayEmpMno[i].Text + "</option>";
                            $('#EMno').append(items3);
                        }
                        else {

                            break;
                        }
                    }
                    startPointCode = startPointCode + 100;
                    startPointName = startPointName + 100;
                    startPointMno = startPointMno + 100;
                    $('#EName').scrollTop(scrollto);
            }
        });

        $('#EMno').scroll(function (e) {
             if ($(this).scrollTop() + $(this).innerHeight() >= $(this)           [0].scrollHeight) {
                var scrollto = $(this).scrollTop();
                items1 = null;
                items2 = null;
                items3 = null;
                    e.preventDefault();
              startPointMno = startPointMno + (startPointMno == 0 ? offSet : 0);
                    for (var i = startPointMno; i < arrayEmpMno.length; i++) {
                        if (i < (startPointMno + 100)) {  items1 = "<option value='" + arrayEmpCode[i].Value + "'>" + arrayEmpCode[i].Text + "</option>";
                            $('#ECode').append(items1);
  items2 = "<option value='" + arrayEmpName[i].Value + "'>" + arrayEmpName[i].Text + "</option>";
                            $('#EName').append(items2);
     items3 = "<option value='" + arrayEmpMno[i].Value + "'>" + arrayEmpMno[i].Text + "</option>";
                            $('#EMno').append(items3);
                        }
                        else {

                            break;
                        }
                    }
                    startPointCode = startPointCode + 100;
                    startPointName = startPointName + 100;
                    startPointMno = startPointMno + 100;
                    $('#EMno').scrollTop(scrollto);
                }
        });
    });
    function SetSelectedIndexForAllDropdown(index) {
        $('#EMno option')[index].selected = true;
        $('#ECode option')[index].selected = true;
        $('#EName option')[index].selected = true;
    }
    function EmployCode() {
        SetSelectedIndexForAllDropdown($('#ECode')[0].selectedIndex);
    }
    function EmployName() {
        SetSelectedIndexForAllDropdown($('#EName')[0].selectedIndex);
    }
    function MnoChange() {
        SetSelectedIndexForAllDropdown($('#EMno')[0].selectedIndex);
    }
</script>
<div>
<div>
    <label> EmployerCode</label>
@Html.DropDownListFor(m => m.selectValue, ((IEnumerable<SelectListItem>)Model.EmployerCode).Take(10), new
{@id="ECode",@class="drop",onchange="EmployCode();",@size=5})
    </div>
<br />

      <label> EmployerNAme</label>
@Html.DropDownListFor(m => m.selectValue, ((IEnumerable<SelectListItem>)Model.EmployerName).Take(10), new
{@id="EName",@class="drop", onchange="EmployName();",@size=5 })
    </div>
<br />

<div>
    <label> EmployerMedNo</label>
@Html.DropDownListFor(m => m.selectValue, ((IEnumerable<SelectListItem>)Model.EmployerMno).Take(10), new
{@id="EMno",@class="drop",onchange="MnoChange();",@size=5 })
    </div>

Now, after scrolling through the Employer dropdown, Data loaded in parallel in both the drop downs. Vice versa with Employer name and medicate Number. Now, click on medicate number dropdown. You will get to see the following.



That's it.