Optimera kommunikationen när du använder UpdatePanel i ASP.NET AJAX
När du använder UpdatePanel-kontrollen i ASP.NET AJAX är det mycket smidigt att dra och släppa in kontroller inom en UpdatePanel för att snabbt AJAX-ifiera din applikation. Det du då ska vara medveten om är att servern alltid renderar och skickar tillbaka all HTML för alla de kontroller som ligger inom en och samma UpdatePanel när den får ett anrop - oavsett vilken kontroll som orsakade postback-eventet. Det innebär att svaret kan komma att innehålla onödigt mycket data, vilket i sin tur kan ha betydelse för prestanda. Speciellt kan detta vara viktigt om du måste ta hänsyn till faktorer som dålig bandbredd och äldre klientdatorer.
För att undersöka hur stor skillnaden kan vara gjorde jag en enkel test där jag först la in en kalender-kontroll, en label, en knapp och ytterligare en label inom en och samma UpdatePanel. Så här såg det ut i designläge i Visual Studio:
När jag väljer datum så skriver jag ut tid+datum i Label1:
protected void Calendar1_SelectionChanged(object sender, EventArgs e)
{
Label1.Text = Calendar1.SelectedDate.ToString();
}
När jag klickar på knappen Button så skriver jag ut tid+datum i Label2:
protected void Button1_Click(object sender, EventArgs e)
{
Label2.Text =
DateTime.Now.ToString();
}
Ingen kärnfysik så långt direkt... det som är intressant är hur anropet till och svaret från servern ser ut när jag klickar på knappen.
Här är postningen till servern:
= BODY ====
ScriptManager1=UpdatePanel1|Button1
__EVENTTARGET=
__EVENTARGUMENT=
__VIEWSTATE=/wEPDwUKMTg4NjQ4MTI2NQ9kFgICAw9kFgICAw9kFgJmD2QWBAIBDzwrAAoBAA8WAh4CU0QWAQYAQBdUrD/JCGRkAgMPDxYCHgRUZXh0BRMyMDA3LTAzLTI5IDAwOjAwOjAwZGRkrzbcDDezkIvV/1QNDVNiWPpp//k=
__EVENTVALIDATION=/wEWLgLb2dSACQLpg5zvCALVmMq/DgLzrd6ECwLzrcq/DALzrabbBQLzrZL2DgLzrY6RBgLzrbr6BALzrZaVDALuuri+DwLuupRZAu66gPQJAu66/K8BAu666MoKAu66xOUDAu66sIELAu66rLwMAu662IQBAu66tKAKAsnTx8gFAsnTs+QOAsnTr58GAsnTm7oPAsnT91UCydPj8AkCydPfqwECydPLxgoCydPnrw8CydPTSgKk6eXTAwKk6dGOCwKk6c2pDAKk6bnFBQKk6ZXgDgKk6YGbBgKk6f22DwKk6elRAqTphboFAqTp8dUOAp+Gg/4JAp+G/5kBAp+G67QKAp+Gx+8DAp+Gs4sLAoznisYGJBTdeNz0tScDHnuFt5xZcNFPB94=
Button1=Button
... och så här ser svaret ut
1d98
7539|updatePanel|UpdatePanel1|
<table id="Calendar1" cellspacing="0" cellpadding="2" title="Calendar" border="0" style="border-width:1px;border-style:solid;border-collapse:collapse;">
<tr><td colspan="7" style="background-color:Silver;"><table cellspacing="0" border="0" style="width:100%;border-collapse:collapse;">
<tr><td style="width:15%;"><a href="javascript:__doPostBack('Calendar1','V2588')" style="color:Black" title="Go to the previous month"><</a></td><td align="center" style="width:70%;">mars 2007</td><td align="right" style="width:15%;"><a href="javascript:__doPostBack('Calendar1','V2647')" style="color:Black" title="Go to the next month">></a></td></tr>
</table></td></tr><tr><th align="center" abbr="måndag" scope="col">må</th><th align="center" abbr="tisdag" scope="col">ti</th><th align="center" abbr="onsdag" scope="col">on</th><th align="center" abbr="torsdag" scope="col">to</th><th align="center" abbr="fredag" scope="col">fr</th><th align="center" abbr="lördag" scope="col">lö</th><th align="center" abbr="söndag" scope="col">sö</th></tr><tr><td align="center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','2613')" style="color:Black" title="den 26 februari">26</a></td><td align="center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','2614')" style="color:Black" title="den 27 februari">27</a></td><td align="center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','2615')" style="color:Black" title="den 28 februari">28</a></td><td align="center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','2616')" style="color:Black" title="den 1 mars">1</a></td><td align="center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','2617')" style="color:Black" title="den 2 mars">2</a></td><td align="center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','2618')" style="color:Black" title="den 3 mars">3</a></td><td align="center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','2619')" style="color:Black" title="den 4 mars">4</a></td></tr><tr><td align="center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','2620')" style="color:Black" title="den 5 mars">5</a></td><td align="center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','2621')" style="color:Black" title="den 6 mars">6</a></td><td align="center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','2622')" style="color:Black" title="den 7 mars">7</a></td><td align="center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','2623')" style="color:Black" title="den 8 mars">8</a></td><td align="center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','2624')" style="color:Black" title="den 9 mars">9</a></td><td align="center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','2625')" style="color:Black" title="den 10 mars">10</a></td><td align="center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','2626')" style="color:Black" title="den 11 mars">11</a></td></tr><tr><td align="center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','2627')" style="color:Black" title="den 12 mars">12</a></td><td align="center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','2628')" style="color:Black" title="den 13 mars">13</a></td><td align="center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','2629')" style="color:Black" title="den 14 mars">14</a></td><td align="center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','2630')" style="color:Black" title="den 15 mars">15</a></td><td align="center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','2631')" style="color:Black" title="den 16 mars">16</a></td><td align="center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','2632')" style="color:Black" title="den 17 mars">17</a></td><td align="center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','2633')" style="color:Black" title="den 18 mars">18</a></td></tr><tr><td align="center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','2634')" style="color:Black" title="den 19 mars">19</a></td><td align="center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','2635')" style="color:Black" title="den 20 mars">20</a></td><td align="center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','2636')" style="color:Black" title="den 21 mars">21</a></td><td align="center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','2637')" style="color:Black" title="den 22 mars">22</a></td><td align="center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','2638')" style="color:Black" title="den 23 mars">23</a></td><td align="center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','2639')" style="color:Black" title="den 24 mars">24</a></td><td align="center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','2640')" style="color:Black" title="den 25 mars">25</a></td></tr><tr><td align="center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','2641')" style="color:Black" title="den 26 mars">26</a></td><td align="center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','2642')" style="color:Black" title="den 27 mars">27</a></td><td align="center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','2643')" style="color:Black" title="den 28 mars">28</a></td><td align="center" style="color:White;background-color:Silver;width:14%;"><a href="javascript:__doPostBack('Calendar1','2644')" style="color:White" title="den 29 mars">29</a></td><td align="center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','2645')" style="color:Black" title="den 30 mars">30</a></td><td align="center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','2646')" style="color:Black" title="den 31 mars">31</a></td><td align="center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','2647')" style="color:Black" title="den 1 april">1</a></td></tr><tr><td align="center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','2648')" style="color:Black" title="den 2 april">2</a></td><td align="center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','2649')" style="color:Black" title="den 3 april">3</a></td><td align="center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','2650')" style="color:Black" title="den 4 april">4</a></td><td align="center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','2651')" style="color:Black" title="den 5 april">5</a></td><td align="center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','2652')" style="color:Black" title="den 6 april">6</a></td><td align="center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','2653')" style="color:Black" title="den 7 april">7</a></td><td align="center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','2654')" style="color:Black" title="den 8 april">8</a></td></tr></table><span id="Label1" style="display:inline-block;width:116px;">2007-03-29 00:00:00</span><br /><br /><input type="submit" name="Button1" value="Button" id="Button1" /><br /><br /><span id="Label2" style="display:inline-block;width:114px;">2007-03-08 23:09:23</span>3b80|hiddenField|__EVENTTARGET||0|hiddenField|__EVENTARGUMENT||204|hiddenField|__VIEWSTATE|/wEPDwUKMTg4NjQ4MTI2NQ9kFgICAw9kFgICAw9kFgJmD2QWBgIBDzwrAAoBAA8WAh4CU0QWAQYAQBdUrD/JCGRkAgMPDxYCHgRUZXh0BRMyMDA3LTAzLTI5IDAwOjAwOjAwZGQCBw8PFgIfAQUTMjAwNy0wMy0wOCAyMzowOToyM2RkZJppSQKUmGWqz8QafMEqTm63gL9d|396|hiddenField|__EVENTVALIDATION|/wEWLgLJ29TuCALpg5zvCALVmMq/DgLzrd6ECwLzrcq/DALzrabbBQLzrZL2DgLzrY6RBgLzrbr6BALzrZaVDALuuri+DwLuupRZAu66gPQJAu66/K8BAu666MoKAu66xOUDAu66sIELAu66rLwMAu662IQBAu66tKAKAsnTx8gFAsnTs+QOAsnTr58GAsnTm7oPAsnT91UCydPj8AkCydPfqwECydPLxgoCydPnrw8CydPTSgKk6eXTAwKk6dGOCwKk6c2pDAKk6bnFBQKk6ZXgDgKk6YGbBgKk6f22DwKk6elRAqTphboFAqTp8dUOAp+Gg/4JAp+G/5kBAp+G67QKAp+Gx+8DAp+Gs4sLAoznisYGL9bAYhNab5glYNxooVHpJ14z9XU=|0|asyncPostBackControlIDs|||0|postBackControlIDs|||13|updatePanelIDs||tUpdatePanel1|0|childUpdatePanelIDs|||12|panelsToRefreshIDs||UpdatePanel1|2|asyncPostBackTimeout||90|13|formAction||WebForm1.aspx|13|pageTitle||Untitled Page|
0
I svaret skickas alltså, förutom uppdaterat datum och tid i min label, hela renderingen av kalenderkontrollen igen, fastän denna inte har förändrats.
Genom att istället använda flera stycken UpdatePanel och sätta egenskapen UpdateMode till "Conditional" (istället för "Always" som är default) för dessa får du ett beteende där servern kan hantera partiell rendering av endast den eller de kontroller som faktiskt orsakat anropet.
I mitt exempel lägger jag till en UpdatePanel2 och flyttar min Button och Label2 till denna - så det ser ut så här i desingläge:
Det blir ingen skillnad i storleken på anropet mot servern när jag nu klickar på Button - däremot blir det en markant skillnad i storleken på svaret från servern:
= BODY ====
e8
202|updatePanel|UpdatePanel2|
<input type="submit" name="Button1" value="Button" id="Button1" />
<span id="Label2" style="display:inline-block;width:114px;">2007-03-08 23:03:13</span>
|
3d6
0|hiddenField|__EVENTTARGET||0|hiddenField|__EVENTARGUMENT||220|hiddenField|__VIEWSTATE|/wEPDwUKMTMzNzY
4MjQ2Ng9kFgICAw9kFgQCAw9kFgJmD2QWBAIBDzwrAAoBAA8WAh4CU0QWAQYAADMrLDrJCGRkAgMPDxYCHgRUZXh0BRMyMDA3LTAzLT
IyIDAwOjAwOjAwZGQCBQ9kFgJmD2QWAgIDDw8WAh8BBRMyMDA3LTAzLTA4IDIzOjAzOjEzZGRkQGHXfhdbbCxNkesPSSunMttg5Zw=|
396|hiddenField|__EVENTVALIDATION|/wEWLgLg6IPkAwKM54rGBgLpg5zvCALVmMq/DgLzrd6ECwLzrcq/DALzrabbBQLzrZL2D
gLzrY6RBgLzrbr6BALzrZaVDALuuri+DwLuupRZAu66gPQJAu66/K8BAu666MoKAu66xOUDAu66sIELAu66rLwMAu662IQBAu66tKAK
AsnTx8gFAsnTs+QOAsnTr58GAsnTm7oPAsnT91UCydPj8AkCydPfqwECydPLxgoCydPnrw8CydPTSgKk6eXTAwKk6dGOCwKk6c2pDAK
k6bnFBQKk6ZXgDgKk6YGbBgKk6f22DwKk6elRAqTphboFAqTp8dUOAp+Gg/4JAp+G/5kBAp+G67QKAp+Gx+8DAp+Gs4sLjqzO8fSuer
Eo8sb5pxv3rnJAJVY=|0|asyncPostBackControlIDs|||0|postBackControlIDs|||27|updatePanelIDs||tUpdatePanel1,
tUpdatePanel2|0|childUpdatePanelIDs|||12|panelsToRefreshIDs||UpdatePanel2|2|asyncPostBackTimeout||90|13
|formAction||WebForm1.aspx|13|pageTitle||Untitled Page|
0
Så här ser min aspx-sida ut efter förändringen:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="AJAXEnabledWebApplication1.WebForm1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Calendar ID="Calendar1" runat="server" OnSelectionChanged="Calendar1_SelectionChanged">
</asp:Calendar>
<asp:Label ID="Label1" runat="server" Text="Label1" Width="116px"></asp:Label>
<br />
<br />
<br />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
<asp:Label ID="Label2" runat="server" Text="Label2" Width="114px"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
Comments
Anonymous
March 11, 2007
Mycket intressant. Vad använder du för att få ut storlek och svar från serven? Fiddler?Anonymous
March 17, 2007
Ursäkta en smula sent svar: jo jag använder Fiddler för att undersöka anrop och svar, mycket smidigt tycker jag. Även intressant i största allmänhet att köra den för att få lite pejl på alla utgående http-anrop som görs från ens maskin av diverse tjänster, applikationer och browserfönster man har öppna...Anonymous
March 29, 2007
Bättre sent än aldrig! ;-) Jag sitter en del med Fiddler, speciellt vid utveckling av AJAX. Inte för att det blir så mycket :-) Tycker det är snyggt att man kan lägga in "breakpoints" exempelvis då css-filer laddas eller vid andra tillfällen. Gillar fiddler 2 stort!