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">
<html xmlns="http://www.w3.org/1999/xhtml">
<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>
&l开发者_开发技巧t;/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
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.)
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.
加载中,请稍侯......
精彩评论