Less Is More

Reduce DropDownList Size in ASP.NET Web Applications





Less Is More

Reduce DropDownList Size in ASP.NET Web Applications


By Bill Xie


ASP.NET Web applications can often be plagued with perceived performance problems due to excessive download times. Sometimes the issue is caused by many images on the page, but oftentimes the culprit is page size bloat. In ASP.NET Web applications, page size bloat can often result from one or more dropdown lists either because of a large bulk of dropdown list options or because of duplicate copies of dropdown list options and their persistence in ViewState.


This article will discuss two effective ways to reduce page size due to dropdown list options. The first is to have the data be shared such that only one copy of ViewState and options will be present at the client-side HTML page; the second is to move the data out of the page and into a popup window so that it is only downloaded when the user clicks a button. These implementations are based on ASP.NET 1.0 and 1.1, but they can easily be adapted to version 2.0.


Shared ViewState and Rendering

It is common to have on the same page multiple dropdown lists that contain duplicate data, such as US states or lists of people. In these cases, the same option text and value data is downloaded over and over again for every respective dropdown list on the page. In addition, an encoded copy of the data is also stored in ViewState multiple times; you can see how inefficient this is. If we can make these dropdown lists download and share only one copy of this data, the page size will inevitably be reduced. The idea is very straightforward; a look at the rendered HTML code in Figure 1 illustrates this method.


 "dDw0MzUxMjU2OT......" />

Figure 1: HTML code for shared ViewState and rendering.


Note that the large list of options for each dropdown list now reduces to one line of JavaScript with the function call CopySelectOptions. And only one copy of the option text and value data is contained within the page in the form of a JavaScript array. Although not displayed here, ViewState also keeps only one copy of this data. To implement this page-trimming method, we will first extend the basic DropDownList control by adding two more properties: ShareEnabled and SharedID. Then we need to override the way the ViewState is saved and loaded and the way the HTML code is rendered. When the Boolean ShareEnabled property is set to False, the dropdown list will function no differently than the DropDownList to which you are accustomed. However, if ShareEnabled is set to True, then all DropDownList controls with the same SharedID will share the same data. SharedID must be a valid identifier at the page level, which will be known by all shared dropdown lists. The first step, as displayed in Figure 2, is to override OnPreRender and render a common JavaScript function, as well as the shared option text and value arrays.


Protected Overrides Sub OnPreRender(

 ByVal e As System.EventArgs)

  If Me.ShareEnabled Then

    Dim obj As Object

    obj = HttpContext.Current.Items(Me.GetRenderIndicator())

    If obj Is Nothing Then

      If Not Me.Page.IsClientScriptBlockRegistered(

       Me.GetFunctionRegisterKey()) Then




      End If

      If Not Me.Page.IsClientScriptBlockRegistered(

       Me.GetArrayRegisterKey()) Then




      End If

      HttpContext.Current.Items(Me.GetRenderIndicator()) =

        String.Empty 'just an indicator

    End If

  End If


End Sub

Figure 2: Render common JavaScript.


The code should be fairly easy to follow, except for possibly the key generation functions (which return a unique name for JavaScript array variables). In addition, a server-side indicator stored in HttpContext.Items specifies whether these common scripts have already been rendered, and thus ensures that they are rendered only once. This same technique is also used to ensure that the ViewState data will be saved once. The second step is to override RenderContents, as shown in Figure 3. RenderContents is normally responsible for rendering the


  • Allowed HTML tags: <em> <strong> <blockquote> <br> <p>

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.