ASP.NET

Handle 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.

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Mvc;  
  6. using OnDemandPagerDemo.Models;  
  7. namespace OnDemandPagerDemo.Controllers  
  8. {  
  9.     public class HomeController : Controller  
  10.     {  
  11.         public ActionResult Index()  
  12.         {  
  13.             Home model = new Home();  
  14.             BindList(ref model);  
  15.             model.selectValue = 85;  
  16.             return View(model);  
  17.         }  
  18.         public void BindEmpNameAndCode(ref Home home)  
  19.         {  
  20.             List<SelectListItem> optEmplName = new List<SelectListItem>() {   
  21.             new SelectListItem(){ Text="UNKNOWN",Value="0"},  
  22.             new SelectListItem(){ Text="UNKNOWN",Value="1"},  
  23.             new SelectListItem(){ Text="TWO",Value="2"},  
  24.             new SelectListItem(){ Text="TWO",Value="3"},  
  25.             new SelectListItem(){ Text="Four",Value="4"},  
  26.             new SelectListItem(){ Text="Five",Value="5"},  
  27.             };  
  28.             List<SelectListItem>  optEmplCode = new List<SelectListItem>() {   
  29.             new SelectListItem(){Text="0",Value="UNKNOWN"},  
  30.             new SelectListItem(){Text="1",Value="UNKNOWN"},  
  31.             new SelectListItem(){Text="2",Value="TWO"},  
  32.             new SelectListItem(){Text="3",Value="TWO"},  
  33.             new SelectListItem(){Text="4",Value="Four"},  
  34.             new SelectListItem(){Text="5",Value="Five"},  
  35.             };  
  36.             List<SelectListItem> optEmpMed = new List<SelectListItem>() {   
  37.            new SelectListItem(){  Text="Med0",Value="0"},  
  38.             new SelectListItem(){ Text="Med1",Value="1"},  
  39.             new SelectListItem(){ Text="Med2",Value="2"},  
  40.             new SelectListItem(){ Text="Med3",Value="3"},  
  41.             new SelectListItem(){ Text="Med4",Value="4"},  
  42.             new SelectListItem(){ Text="Med5",Value="5"},  
  43.             };  
  44.   
  45.             home.EmployerCode = optEmplCode;  
  46.             home.EmployerName = optEmplName;  
  47.             home.EmployerMno = optEmpMed;  
  48.         }  
  49.   
  50.  // here i am makig loop to create dummy (500)records , you can fetch data from database(write your datanbase logic to fetch data)  
  51.         public void BindList(ref Home home)  
  52.         {  
  53.             List<SelectListItem> optEmplName = new List<SelectListItem>();  
  54.             List<SelectListItem> optEmplCode = new List<SelectListItem>();  
  55.             List<SelectListItem> optEmplMed = new List<SelectListItem>();  
  56.             List<SelectListItem> emuns = new List<SelectListItem>();  
  57.             SelectListItem SelName = null;  
  58.             SelectListItem SelCode = null;  
  59.             SelectListItem SelMed = null;  
  60.             for (int i = 0; i < 500; i++)      
  61.             {  
  62.                 SelName = new SelectListItem();  
  63.                 SelName.Text = i + "Name";  
  64.                 SelName.Value = i.ToString();  
  65.                 optEmplName.Add(SelName);  
  66.             }  
  67.             for (int i = 0; i < 500; i++)  
  68.             {  
  69.                 SelCode = new SelectListItem();  
  70.                 SelCode.Text = i + "Code";  
  71.                 SelCode.Value = i.ToString();  
  72.                 optEmplCode.Add(SelCode);  
  73.             }  
  74.             for (int i = 0; i < 500; i++)  
  75.             {  
  76.                 SelMed = new SelectListItem();  
  77.                 SelMed.Text = i + "Mno";  
  78.                 SelMed.Value = i.ToString();  
  79.                 optEmplMed.Add(SelMed);  
  80.             }  
  81.             SelectListItem select = optEmplCode.Where(x => x.Value == "85").FirstOrDefault();  
  82.             optEmplCode.RemoveAll(x => x.Value == Convert.ToString(85));  
  83.             optEmplCode.Insert(0, select);  
  84.             SelectListItem select1 = optEmplName.Where(x => x.Value == "85").FirstOrDefault();  
  85.             optEmplName.RemoveAll(x => x.Value == Convert.ToString(85));  
  86.             optEmplName.Insert(0, select1);  
  87.             SelectListItem select2 = optEmplMed.Where(x => x.Value == "85").FirstOrDefault();  
  88.             optEmplMed.RemoveAll(x => x.Value == Convert.ToString(85));  
  89.             optEmplMed.Insert(0, select2);  
  90.             home.EmployerName = optEmplName;  
  91.             home.EmployerCode = optEmplCode;  
  92.             home.EmployerMno = optEmplMed;  
  93.         }  
  94.         public ActionResult About()  
  95.         {  
  96.             ViewBag.Message = "Your app description page.";  
  97.             return View();  
  98.         }  
  99.         public ActionResult Contact()  
  100.         {  
  101.             ViewBag.Message = "Your contact page.";  
  102.             return View();  
  103.         }  
  104.         }  
  105.     }  
  106. # View Code  
  107.   
  108. @model OnDemandPagerDemo.Models.Home  
  109. @{  
  110.     Layout = null;  
  111.     ViewBag.Title = "Home Page";  
  112. }  
  113. <script src="~/Scripts/jquery-1.7.1.min.js"></script>  
  114. <style type="text/css">  
  115.     .drop {  
  116.         width: 200px;  
  117.     }  
  118. </style>  
  119. <script type="text/javascript">  
  120. </script>  
  121. <script type="text/javascript">  
  122.      
  123.     var JsonModelForEmployName = null;  
  124.     var JsonModelForEmployCode = null;  
  125.     var JsonModelForEmployMNo = null;  
  126.     var items1 = null;  
  127.     var items2 = null;  
  128.     var items3 = null;  
  129.     var arrayEmpName;  
  130.     var arrayEmpCode;  
  131.     var arrayEmpMno;  
  132.     var  offSet = 10, isPreviousEventComplete = true, isDataAvailable = true;  
  133.     JsonModelForEmployName = '@Html.Raw(Json.Encode(Model.EmployerName))';  
  134.     arrayEmpName = eval(JsonModelForEmployName.replace(/[\r\n]/, ""));  
  135.       
  136.     JsonModelForEmployCode = '@Html.Raw(Json.Encode(Model.EmployerCode))';  
  137.     arrayEmpCode = eval(JsonModelForEmployCode.replace(/[\r\n]/, ""));  
  138.        
  139.      JsonModelForEmployMNo = '@Html.Raw(Json.Encode(Model.EmployerMno))';  
  140.     arrayEmpMno = eval(JsonModelForEmployMNo.replace(/[\r\n]/, ""));  
  141.   
  142.      var startPointName = 0;  
  143.      var startPointCode = 0;  
  144.      var startPointMno = 0;  
  145.      $(document).ready(function () {  
  146.   
  147.          $('#ECode').scroll(function (e) {  
  148.              items1 = null  
  149.              items2 = null  
  150.              items3 = null  
  151.              if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {  
  152.                  var scrollto = $(this).scrollTop();  
  153.                  e.preventDefault();  
  154.                  startPointCode = startPointCode + (startPointCode == 0 ? offSet : 0);  
  155.                  for (var i = startPointCode; i < arrayEmpCode.length; i++) {  
  156.                      if (i < (startPointCode + 100)) {  
  157.                          items1 = "<option value='" + arrayEmpCode[i].Value + "'>" + arrayEmpCode[i].Text + "</option>";  
  158.                          $('#ECode').append(items1);  
  159.                          items2 = "<option value='" + arrayEmpName[i].Value + "'>" + arrayEmpName[i].Text + "</option>";  
  160.                          $('#EName').append(items2);  
  161.                          items3 = "<option value='" + arrayEmpMno[i].Value + "'>" + arrayEmpMno[i].Text + "</option>";  
  162.                          $('#EMno').append(items3);  
  163.                      }  
  164.                      else {  
  165.                          break;  
  166.                      }  
  167.                  }  
  168.                  startPointCode = startPointCode + 100;  
  169.                  startPointName = startPointName + 100;  
  170.                  startPointMno = startPointMno + 100;       
  171.              }  
  172.          });  
  173.         $('#EName').scroll(function (e) {  
  174.             items1 = null  
  175.             items2 = null  
  176.             items3 = null  
  177.               
  178.       if ($(this).scrollTop() + $(this).innerHeight() < $(this)[0].scrollHeight) {  
  179.                 var scrollto = $(this).scrollTop();  
  180.                     e.preventDefault();  
  181.             startPointName = startPointName + (startPointName == 0 ? offSet : 0);  
  182.                     for (var i = startPointName; i < arrayEmpName.length; i++) {  
  183.                         if (i < (startPointName + 100)) { items1 = "<option value='" + arrayEmpCode[i].Value + "'>" + arrayEmpCode[i].Text + "</option>";  
  184.                             $('#ECode').append(items1);items2 = "<option value='" + arrayEmpName[i].Value + "'>" + arrayEmpName[i].Text + "</option>";  
  185.                             $('#EName').append(items2);  
  186. items3 = "<option value='" + arrayEmpMno[i].Value + "'>" + arrayEmpMno[i].Text + "</option>";  
  187.                             $('#EMno').append(items3);  
  188.                         }  
  189.                         else {  
  190.                              
  191.                             break;  
  192.                         }  
  193.                     }  
  194.                     startPointCode = startPointCode + 100;  
  195.                     startPointName = startPointName + 100;  
  196.                     startPointMno = startPointMno + 100;  
  197.                     $('#EName').scrollTop(scrollto);  
  198.             }  
  199.         });  
  200.      
  201.         $('#EMno').scroll(function (e) {  
  202.              if ($(this).scrollTop() + $(this).innerHeight() >= $(this)           [0].scrollHeight) {  
  203.                 var scrollto = $(this).scrollTop();  
  204.                 items1 = null;  
  205.                 items2 = null;  
  206.                 items3 = null;  
  207.                     e.preventDefault();  
  208.               startPointMno = startPointMno + (startPointMno == 0 ? offSet : 0);  
  209.                     for (var i = startPointMno; i < arrayEmpMno.length; i++) {  
  210.                         if (i < (startPointMno + 100)) {  items1 = "<option value='" + arrayEmpCode[i].Value + "'>" + arrayEmpCode[i].Text + "</option>";  
  211.                             $('#ECode').append(items1);  
  212.   items2 = "<option value='" + arrayEmpName[i].Value + "'>" + arrayEmpName[i].Text + "</option>";  
  213.                             $('#EName').append(items2);  
  214.      items3 = "<option value='" + arrayEmpMno[i].Value + "'>" + arrayEmpMno[i].Text + "</option>";  
  215.                             $('#EMno').append(items3);  
  216.                         }  
  217.                         else {  
  218.                              
  219.                             break;  
  220.                         }  
  221.                     }  
  222.                     startPointCode = startPointCode + 100;  
  223.                     startPointName = startPointName + 100;  
  224.                     startPointMno = startPointMno + 100;  
  225.                     $('#EMno').scrollTop(scrollto);  
  226.                 }  
  227.         });  
  228.     });  
  229.     function SetSelectedIndexForAllDropdown(index) {  
  230.         $('#EMno option')[index].selected = true;  
  231.         $('#ECode option')[index].selected = true;  
  232.         $('#EName option')[index].selected = true;  
  233.     }  
  234.     function EmployCode() {  
  235.         SetSelectedIndexForAllDropdown($('#ECode')[0].selectedIndex);  
  236.     }  
  237.     function EmployName() {  
  238.         SetSelectedIndexForAllDropdown($('#EName')[0].selectedIndex);  
  239.     }  
  240.     function MnoChange() {  
  241.         SetSelectedIndexForAllDropdown($('#EMno')[0].selectedIndex);  
  242.     }  
  243. </script>  
  244. <div>  
  245. <div>  
  246.     <label> EmployerCode</label>  
  247. @Html.DropDownListFor(m => m.selectValue, ((IEnumerable<SelectListItem>)Model.EmployerCode).Take(10), new   
  248. {@id="ECode",@class="drop",onchange="EmployCode();",@size=5})  
  249.     </div>  
  250. <br />  
  251.   
  252.       <label> EmployerNAme</label>  
  253. @Html.DropDownListFor(m => m.selectValue, ((IEnumerable<SelectListItem>)Model.EmployerName).Take(10), new    
  254. {@id="EName",@class="drop", onchange="EmployName();",@size=5 })  
  255.     </div>  
  256. <br />  
  257.   
  258. <div>  
  259.     <label> EmployerMedNo</label>  
  260. @Html.DropDownListFor(m => m.selectValue, ((IEnumerable<SelectListItem>)Model.EmployerMno).Take(10), new  
  261. {@id="EMno",@class="drop",onchange="MnoChange();",@size=5 })  
  262.     </div>  
output
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.

output

That's it.

 
Ebook Download
View all
Learn
View all
Get Started

You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

Become a sharper developer and jumpstart your career.

Basic

$0

$

. 00

monthly

For Basic members:

  • Standard Profile
  • Access learning courses
  • Access free e-books
  • 1x point
Premium

$20

$

. 00

monthly

For Premium members:

  • Earn 2x reward points
  • Premium profile with Verified check
  • Premium Avatar with status update
  • Learning courses
  • Unlimited Certifications and badges on profile
  • Unlimited Book downloads
  • Access to Premium content
  • Online Training
  • Unlimited PDF conversions and downloads
  • Professional Resume Writing
  • Interview Preparations Guide
  • 25 messages per month
  • 1 "Kodzu" avatar, basic
Elite

$45

$

. 00

monthly

For Elite members:

  • Bundle E-books
  • Access to all Learn Series
  • Unlimited Apply Jobs