Slower with AJAX?

[Guest]

I am new to AJAX.
I am applying AJAX to a current web solution to get the "instant behaviour".
On my main page I have two sets of criteria: Specific and Wide.
Each set is placed in a View container.
I am not sure that I configured the Triggers correct, but the behaviour is OK.
When I click the linkbuttons they switch between two sets of search controls.
When I click the search buttons they reload the display panel.

BUT .... if the display panel is loaded with lots of data it takes an awful
lot of time to switch search panel! It also takes far too long time to
perform the next search. How can the current page data load affect the next
execution time?

Before I applied AJAX I was quite satisfied with the page. It gave a pretty
fast response to all actions. The only adjustment I needed was to avoid full
page rewrite when not needed. When I did, I also increased response times
enormously!

I appreciate all kinds of suggestions.

<asp:UpdatePanel ID="pnlSearch" runat="server">
<ContentTemplate>
<asp:MultiView ID="SearchMode" runat="server">

<asp:View ID="Specific" runat="server">
(Several criteria controls goes here ....)
<asp:LinkButton ID="lnkShowWide" runat="server">
<asp:Button ID="btnSearchSpecific" runat="server"
CssClass="inputbox" Text=" View " />
<asp:UpdateProgress ID="myUpdateProgress" runat="server">
<ProgressTemplate>
<img src="./CommonUI/Web/images/indicator.gif" title="Updating
page content" alt="" />
</ProgressTemplate>
</asp:UpdateProgress>
</asp:View>

<asp:View ID="Wide" runat="server">
(Several criteria controls goes here ....)
<asp:LinkButton ID="lnkShowSpecific" runat="server">
<asp:Button ID="btnSearchWide" runat="server" CssClass="inputbox"
Text=" View " />
<asp:UpdateProgress ID="myUpdateProgress" runat="server">
<ProgressTemplate>
<img src="./CommonUI/Web/images/indicator.gif" title="Updating
page content" alt="" />
</ProgressTemplate>
</asp:UpdateProgress>
</asp:View>
</asp:MultiView>

</ContentTemplate>

<Triggers>
<asp:AsyncPostBackTrigger ControlID="lnkShowSpecific" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="lnkShowWide" EventName="Click" />
</Triggers>
</asp:UpdatePanel>



<asp:UpdatePanel ID="pnlDisplay" runat="server">
<ContentTemplate>
(Nested repeater control with long result list ...)
</ContentTemplate>

<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnSearchSpecific"
EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="btnSearchWide" EventName="Click" />
</Triggers>
</asp:UpdatePanel>

 

[Walter Wang [MSFT]]

Hi,

Based on my understanding, your question is:

1) You previously have a MultiView with two View to switch between two
parts of your user interface.
2) You now put the MultiView in UpdatePanel to switch using AJAX, and you
found the switching time is much longer than in normal postback mode.

Please feel free to let me know if I've misunderstood anything.

Well, I must say this issue also looks strange to me. After all, there's
still a normal postback on the server-side; this should not make the
rendering slower.

I'm wondering if you could create a smaller but complete and reproducible
web project for further insepection? Thanks for your effort.


Sincerely,
Walter Wang ([email protected], remove 'online.')
Microsoft Online Community Support

==================================================
Get notification to my posts through email? Please refer to
http://msdn.microsoft.com/subscriptions/managednewsgroups/default.aspx#notif
ications. If you are using Outlook Express, please make sure you clear the
check box "Tools/Options/Read: Get 300 headers at a time" to see your reply
promptly.

Note: The MSDN Managed Newsgroup support offering is for non-urgent issues
where an initial response from the community or a Microsoft Support
Engineer within 1 business day is acceptable. Please note that each follow
up response may take approximately 2 business days as the support
professional working with you may need further investigation to reach the
most efficient resolution. The offering is not appropriate for situations
that require urgent, real-time or phone-based interactions or complex
project analysis and dump analysis issues. Issues of this nature are best
handled working with a dedicated Microsoft Support Engineer by contacting
Microsoft Customer Support Services (CSS) at
http://msdn.microsoft.com/subscriptions/support/default.aspx.
==================================================

This posting is provided "AS IS" with no warranties, and confers no rights.

 

[Guest]

No, the MultiView is not really the problem. Actually it is very easy to
exchange it with a simple clientscript to toggle between different criteria
views.

The confusion is the interaction between the two UpdatePanels.
In the first UpdatePanel is the Search button that triggers result to the
second UpdatePanel. The problem is that the Search result is extremely slow
when the current content of the second UpdatePanel is long! I can not
understand why the current page content should affect the response time at
all.
As I mentioned I got the same effect when switching between two Views in
first UpdatePanel if the content of the second UpdatePanel was heavy. It
should be instantaneous and not care about the other UpdatePanel.

Is there a tutorial somewhere as to how the MS AJAX controls should be used?
Many UpdatePanels, Triggers between UpdatePanels, Many Triggers in same
UpdatePanel, One or Many UpdateProgress, etc.

 

[Walter Wang [MSFT]]

Hi,

Thanks for the update and sorry for the delay.

Please use Web Development Helper
(http://projects.nikhilk.net/Projects/WebDevHelper.aspx) to monitor the
http traffic. Will you see large data get sent to server when switchting
the search view when there's a large result in the search result?

For AJAX documentation on multiple UpdatePanel, please refer to following
URLs:


#ASP.NET AJAX > Overview > The UpdatePanel and UpdateProgress Controls >
UpdatePanel Control Overview
http://ajax.asp.net/docs/overview/UpdatePanelOverview.aspx

#ASP.NET AJAX > The UpdatePanel Control > Creating a Simple ASP.NET Page
with Multiple UpdatePanel Controls
http://ajax.asp.net/docs/tutorials/CreatingPageUpdatePanel.aspx


Regards,
Walter Wang ([email protected], remove 'online.')
Microsoft Online Community Support

==================================================
When responding to posts, please "Reply to Group" via your newsreader so
that others may learn and benefit from your issue.
==================================================

This posting is provided "AS IS" with no warranties, and confers no rights.

 

[Guest]

I am not familiar with WebDevHelper but downloaded it.
It looks quite similar to Firebug that I downloaded last week.

The links you provided were good and gave a better understanding, but I did
not find the answer to my specific question.

I am not sure I interpret all the results of WebDevHelper correct but I
notice a substantial difference in request size when clicking the link in
both scenarios: 12000 to 330000. The only difference I can find on the page
is that the content in UpdatePanel pnlDisplay is much bigger in the second
case.

But the LinkButton is inside UpdatePanel pnlSearch and is triggered only to
this UpdatePanel. Why does the size of the other UpdatePanel affect the
response time? Both panels are set to UpdateMode=Conditional. Does a
PostBackAsyncControl still submit the whole page?

I have now designed another version of the same page where I use a client
side script to switch between different criteria views. It is of course much
more effective in all ways and avoids the above problem. But I am still
curious as to why I got the delay in the first scenario.

I feel a bit hesitant to use a technique when I don't understand the
behaviour.

 

[Walter Wang [MSFT]]

Hi Jikob,

Thanks for the updated information and I can understand the issue more
clearly now.

The key point here is that with UpdatePanel, only the response from the
server will be "partial"; not the request. The request is controlled by
HTML form submitting: every input fields on the HTML form will be sent to
the server when the form is submitted. Although UpdatePanel will intercept
the form submitting, it only adds some extra information to help the
server-side code to filter out unneeded information from the response.

You can test this by using following test page:

<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void Button2_Click(object sender, EventArgs e)
{
System.Data.DataTable dt = new System.Data.DataTable();
dt.Columns.Add("Name");
for (int i = 0; i < 1000; i++)
{
dt.Rows.Add("Row " + i.ToString());
}
Repeater1.DataSource = dt;
Repeater1.DataBind();
}

protected void Button1_Click(object sender, EventArgs e)
{
}
</script>
<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:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="Button1" runat="server" Text="Partial
Rendering" OnClick="Button1_Click" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:Button ID="Button2" runat="server" OnClick="Button2_Click"
Text="Load Bound Data" />
<asp:Button ID="Button3" runat="server" Text="Normal Postback" />
<asp:Repeater EnableViewState="false" ID="Repeater1" runat="server">
<ItemTemplate>
<asp:TextBox ID="txt1" runat="server" Text=<%# Eval("Name")
%>></asp:TextBox>
</ItemTemplate>
</asp:Repeater>
</form>
</body>
</html>


Using above test, you can see both in the partial rendering mode and full
page postback mode, the request will always include those TextBox generated
by the repeater control. After all, for a partial page rendering, it's
still a normal postback for the server-side code and you can access all the
control's state there; it's only the returned data will be filter according
to which UpdatePanel(s) are needed to be updated.

Hope this could help you better understand how the ASP.NET AJAX UpdatePanel
works. Please feel free to let me know if there's anything unclear. Thanks.


Regards,
Walter Wang ([email protected], remove 'online.')
Microsoft Online Community Support

==================================================
When responding to posts, please "Reply to Group" via your newsreader so
that others may learn and benefit from your issue.
==================================================

This posting is provided "AS IS" with no warranties, and confers no rights.

 

[Guest]

Thanks for your explanation, I get the idea.

Is it possible to overcome this in some other way, not submitting the whole
page?
I tried double forms but that is obviously not allowed .....

 

[Walter Wang [MSFT]]

Hi,

I'm still researching on your question and will get back to you as soon as
I got further information. Thank you for your patience and understanding.


Regards,
Walter Wang ([email protected], remove 'online.')
Microsoft Online Community Support

==================================================
When responding to posts, please "Reply to Group" via your newsreader so
that others may learn and benefit from your issue.
==================================================

This posting is provided "AS IS" with no warranties, and confers no rights.

 

[Walter Wang [MSFT]]

Hi,

I've done some research, unfortunately I didn't see any approach to control
which fields get submitted to server.

In summary, this question is actually not related to AJAX, this is the
intrinsic behavior of html form.

Please feel free to let me know if there's anything unclear. Thanks.


Regards,
Walter Wang ([email protected], remove 'online.')
Microsoft Online Community Support

==================================================
When responding to posts, please "Reply to Group" via your newsreader so
that others may learn and benefit from your issue.
==================================================

This posting is provided "AS IS" with no warranties, and confers no rights.