tags:

views:

380

answers:

2
Q: 

Why does ASP ListBox take so long to render in AJAX update panel?

I have a problem when updating the source of an ASP ListBox in an AJAX update panel. When I set the source of the ListBox to a large dataset, I would assume it would take a small amount of time to render due to the number of items. However, when the DataSource is switched at run-time to a smaller set of items, it takes just as long to clear it. If you go from a small set of items to a small set of items this is lightning fast. Maybe I'm doing something wrong. I'm using the Visual Studio 2008 item template for an AJAX 1.0-Enabled ASP.NET 2.0 Web Application. I downloaded that from Microsoft.

Here is my code (Full source zip below):

Default.aspx

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="TestingAJAXComboLoadTimes._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
     <ContentTemplate>
      <asp:ListBox ID="myListBox" runat="server" Rows="12" Width="100%" DataTextField="Display"
       DataValueField="Value" AutoPostBack="True" />
      <asp:Button ID="myButton" runat="server" Text="Change List" />
     </ContentTemplate>
    </asp:UpdatePanel>
    </form>
</body>
</html>

Default.aspx.vb

Partial Public Class _Default
    Inherits System.Web.UI.Page

    Private _ListA As IList(Of MyModel) = New List(Of MyModel)
    Private _ListB As IList(Of MyModel) = New List(Of MyModel)

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
     LoadData()
     If Not Page.IsPostBack Then
      myListBox.DataSource = _ListA
      myListBox.DataBind()
     End If
    End Sub

    Private Sub LoadData()
     For x As Integer = 0 To 5000
      _ListA.Add(New MyModel("testing A - " & x, x))
     Next
     For x As Integer = 0 To 50
      _ListB.Add(New MyModel("testing B - " & x, x))
     Next
    End Sub

    Private Sub SwitchDataSource()
     If IsALoaded Then
      myListBox.DataSource = _ListB
     Else
      myListBox.DataSource = _ListA
     End If
     IsALoaded = Not IsALoaded
     myListBox.DataBind()
    End Sub

    Private Sub myButton_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles myButton.Click
     SwitchDataSource()
    End Sub

    Public Property IsALoaded() As Boolean
     Get
      Return CBool(ViewState("IsALoaded"))
     End Get
     Set(ByVal value As Boolean)
      ViewState("IsALoaded") = value
     End Set
    End Property
End Class

MyModel Class (contained within Default.aspx.vb) 

Public Class MyModel
    Private _Display As String
    Private _Value As Integer
    Public Sub New(ByVal display As String, ByVal value As Integer)
     _Display = display
     _Value = value
    End Sub
    Public ReadOnly Property Display() As String
     Get
      Return _Display
     End Get
    End Property
    Public ReadOnly Property Value() As Integer
     Get
      Return _Value
     End Get
    End Property
End Class

I didn't modify the web.config file, but here it is for completeness: 

<?xml version="1.0"?>
<configuration>
    <configSections>
     <sectionGroup name="system.web.extensions" type="System.Web.Configuration.SystemWebExtensionsSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35">
      <sectionGroup name="scripting" type="System.Web.Configuration.ScriptingSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35">
       <section name="scriptResourceHandler" type="System.Web.Configuration.ScriptingScriptResourceHandlerSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="MachineToApplication"/>
       <sectionGroup name="webServices" type="System.Web.Configuration.ScriptingWebServicesSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35">
        <section name="jsonSerialization" type="System.Web.Configuration.ScriptingJsonSerializationSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="Everywhere"/>
        <section name="profileService" type="System.Web.Configuration.ScriptingProfileServiceSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="MachineToApplication"/>
        <section name="authenticationService" type="System.Web.Configuration.ScriptingAuthenticationServiceSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="MachineToApplication"/>
       </sectionGroup>
      </sectionGroup>
     </sectionGroup>
    </configSections>
    <system.web>
     <pages>
      <controls>
       <add tagPrefix="asp" namespace="System.Web.UI" assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
      </controls>
     </pages>
     <!--
          Set compilation debug="true" to insert debugging
          symbols into the compiled page. Because this
          affects performance, set this value to true only
          during development.
    -->
     <compilation debug="true">
      <assemblies>
       <add assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
      </assemblies>
     </compilation>
     <httpHandlers>
      <remove verb="*" path="*.asmx"/>
      <add verb="*" path="*.asmx" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
      <add verb="*" path="*_AppService.axd" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
      <add verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate="false"/>
     </httpHandlers>
     <httpModules>
      <add name="ScriptModule" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
     </httpModules>
    </system.web>
    <system.web.extensions>
     <scripting>
      <webServices>
       <!-- Uncomment this line to customize maxJsonLength and add a custom converter -->
       <!--
      <jsonSerialization maxJsonLength="500">
        <converters>
          <add name="ConvertMe" type="Acme.SubAcme.ConvertMeTypeConverter"/>
        </converters>
      </jsonSerialization>
      -->
       <!-- Uncomment this line to enable the authentication service. Include requireSSL="true" if appropriate. -->
       <!--
        <authenticationService enabled="true" requireSSL = "true|false"/>
      -->
       <!-- Uncomment these lines to enable the profile service. To allow profile properties to be retrieved
           and modified in ASP.NET AJAX applications, you need to add each property name to the readAccessProperties and
           writeAccessProperties attributes. -->
       <!--
      <profileService enabled="true"
                      readAccessProperties="propertyname1,propertyname2"
                      writeAccessProperties="propertyname1,propertyname2" />
      -->
      </webServices>
      <!--
      <scriptResourceHandler enableCompression="true" enableCaching="true" />
      -->
     </scripting>
    </system.web.extensions>
    <system.webServer>
     <validation validateIntegratedModeConfiguration="false"/>
     <modules>
      <add name="ScriptModule" preCondition="integratedMode" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
     </modules>
     <handlers>
      <remove name="WebServiceHandlerFactory-Integrated"/>
      <add name="ScriptHandlerFactory" verb="*" path="*.asmx" preCondition="integratedMode" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
      <add name="ScriptHandlerFactoryAppServices" verb="*" path="*_AppService.axd" preCondition="integratedMode" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
      <add name="ScriptResource" preCondition="integratedMode" verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
     </handlers>
    </system.webServer>
</configuration>

Here is my Google Code project, and my Source Code. Can you tell me why it takes so long to clear the items and set a new list of items?

Thank you,

Scott

+1  A: 

You do realise that UpdatePanel does a full postback don't you? Personally, I don't use it for that reason. You can do lightweight ajax ops on datasources and controls using jQuery and PageMethods.

This is a nice walkthrough...

Edit: article on full postback performance issues

When a PostBack occurs in an UpdatePanel the page’s entire ViewState is passed to the server, updated, and then the updates are passed back down to the ASP.NET page. So the size of your page’s ViewState has a HUGE effect on the performance of your UpdatePanel postbacks.

flesh  2009-12-03 21:00:11
Although I do like jQuery, I can't commit to using it in this scenario. From MSDN: "If someone clicks the Button in this setup, the Button control will raise a postback event that will be caught by the UpdatePanel control. The UpdatePanel then resubmits the postback event as a partial postback and its content will be asynchronously updated (without the browser fully reloading the page)." - http://msdn.microsoft.com/en-us/magazine/cc163354.aspx
Scott  2009-12-03 21:26:07
You're right, it doesn't 'fully reload the page', it refreshes the content in the panel to give the impression of a partial refresh, however server-side the page does a full execution of its lifecycle. Stick a break point in Page_Load and watch it if you don't believe me. Coupled with viewstate, this is almost certainly your problem. I don't appreciate the down vote either - I haven't provided you with an incorrect answer, whether you liked what I wrote or not :)
flesh  2009-12-03 23:37:29
scott- it really is worth trying out the jquery method, compare the two, it's not hard at all, it's maybe an hours work. if you like it you'll have a another tool in your box, if it doesn't make any difference here then i'd be happy to eat humble pie :)
flesh  2009-12-03 23:57:30
+1  A: 

The most likely culprit is viewstate.

When viewstate is enabled, ASP.NET sends all the ListBox data to the client (along with myriad control settings).

Client-side UpdatePanel actions then send the entire viewstate right back to the server. If your dataset is large, that can slow things down significantly, which is probably why going from a large dataset to a small dataset takes so long.

You can speed this up by disabling viewstate for your list box, though that will mean you have to do a lot more in the page by hand - for example, you'll have to rebind the list box on every post.

The article ASP.NET Simplifies State Management in Web Applications offers an excellent overview of what's going on and what's at stake (see the section titled "Use Viewstate Sparingly" on page three in particular.)

Jeff Sternal  2009-12-03 21:37:20
Thanks for this answer, I am using view state so that is a possible culprit, however, when I run the same code in Google Chrome, it changes the list without a problem. It doesn't seem to be a problem with populating the list, it seems to be a problem clearing the list. Thanks for the link, I'll look into that!
Scott  2009-12-03 22:00:00

related questions

Subsonic Vs NHibernate
How to check For File Lock in C# ?
Is nAnt still supported and suitable for .net 3.5/VS2008?
Limit size of Queue<T> in .NET?
Viewstate invalid when using Safari
Free OCR library
Unhandled Exception Handler in .NET 1.1
Localising date format descriptors
Get a new object instance from a Type in C#
VFP .NET OLEdb provider does not work in Win 64-Bits. Help
.NET Testing Framework Advice
Embedded Database for .net that can run off a network
Automatically update version number
Homegrown consumption of web services
How do you migrate a large app from VB6 to VB .net ?
.NET Migrations Engine
Adding Scripting functionality to .NET applications
SQLite and XSD
Floating Point Number parsing: Is there a Catch All algorithm?
How do I programmatically create a PDF in my .NET application?
How do I sync the SVN revision number with my ASP.NET web site?
XSD DataSets and ignoring foreign keys
Anatomy of a "Memory Leak"
Reliable Timer in a Console Application
How do I calculate relative time?