[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Reduce amount of data transferred during a partial render of a web page

Posted on 2014-08-24
5
Medium Priority
?
456 Views
Last Modified: 2014-08-28
Dear asp.net experts,

I'm developing a web-application that will display data derived from a database. As soon as the database was updated (elsewhere on the network) the page should refresh. As I've not found a way to trigger a page refresh from the server side, I have created two updatepanels: one with a timer that periodically checks for updates and one with the label containing the output. Only when the procedure triggered by the timer detects an update in the database, the output panel gets updated.

That in itself is working fine. However, the whole page gets transferred every time the timer triggers, including the lengthy output (which was unchanged) - I have cked that with chrome's "inspect element" function and the network timeline. The update panels got rid of the flickering of a full-refresh of the screen, but as the page will be displayed on a mobile device, data transfer volume must be kept low.

Is there a way I can either trigger the update from the server's end or reduce the amount of data transferred? (Ideally there would only be a few bytes if there was no change.)

The sample project is below.

Thank you for sharing your wisdom :-)

Default.aspx.vb:
Imports Microsoft.VisualBasic
Imports System
Imports System.Web.UI

Public Class _default
    Inherits System.Web.UI.Page

    Protected Sub timerUpdate_Tick(sender As Object, e As EventArgs) Handles timerUpdate.Tick
        Dim s As String

        ' At this point s would actually be created from a database.
        ' Unless there was a change in the database, s will remain the same in each iteration
        s = String.Concat(Enumerable.Repeat("abc ", 10000))

        ' The right-business is only to remove the timestamp, which is only used anyway in this test
        ' Usually the code would be
        ' If s <> lbl1.Text Then
        '     lbl1.Text = s
        '     UpdatePanel.Update()
        ' End If
        If s <> Right(lbl1.Text, Len(s)) Then
            lbl1.Text = Now.ToString & " " & s
            UpdatePanel.Update()
        End If

    End Sub
End Class

Open in new window


Default.aspx:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
</head>
<body>
    <form id="form1" runat="server" title=" ">
        <asp:ScriptManager EnablePartialRendering="true" ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <asp:UpdatePanel runat="server" ID="TimerPanel" UpdateMode="Conditional">
            <ContentTemplate>
                <asp:Timer runat="server" ID="timerUpdate" Interval="2000" OnTick="timerUpdate_Tick"></asp:Timer>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdatePanel runat="server" ID="UpdatePanel" UpdateMode="Conditional">
            <ContentTemplate>
                <asp:Label ID="lbl1" runat="server" text="not updated yet"/>
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>

Open in new window

0
Comment
Question by:Staudte
  • 3
  • 2
5 Comments
 
LVL 35

Accepted Solution

by:
Robert Schutt earned 2000 total points
ID: 40287503
It took me a while to understand what's going on here and I'm by no means a true UpdatePanel expert but I think I found a way to get to your desired result: no database update means no data over the line.

I have copied your code and tested various things and what I found was that the text in the label was actually included in the ViewState (which is logical in hind-sight otherwise the test on its contents would not have worked) and that's the reason the large number of bytes are transferred on every timer tick.

So I changed that:
<asp:Label ID="lbl1" runat="server" text="not updated yet" EnableViewState="false"/>

Open in new window

but then you need to save the old contents (because now when the page request comes in, the label always holds its default text), for example in a Session variable:
    Protected Sub timerUpdate_Tick(sender As Object, e As EventArgs) Handles timerUpdate.Tick
        Dim s As String

        ' At this point s would actually be created from a database.
        ' Unless there was a change in the database, s will remain the same in each iteration
        s = String.Concat(Enumerable.Repeat("abc " & Now.ToString.Substring(0, Now.ToString.Length - 1) & " ", 1000)) ' changes every 10 seconds...

        If Session("s") Is Nothing OrElse s <> Session("s").ToString Then
            lbl1.Text = Now.ToString & " " & s
            UpdatePanel.Update()
            Session("s") = s
        End If

    End Sub

Open in new window

Note that I changed the 'database testing' logic a bit so that it automatically generates different content every 10 seconds.

Now, indeed when looking at Fiddler, every 5th update shows the full data being transferred (the text of the label, not the viewstate as before) and the other times it only transfers about 1 kb of data.
capture Fiddler
0
 
LVL 35

Expert Comment

by:Robert Schutt
ID: 40287518
By the way, push notifications should be possible but it seems rather involved to set up (understandably). One example with a lot of explanations about what you need: https://developers.google.com/drive/web/push 

It's an emerging field/market with services being created to make it easier to develop apps and websites using these techniques but I have not worked on anything like this yet, that's why I opted to answer the 'polling' question rather than the 'push' question ;-)

Also, I often feel in certain situations people think they need a server push mechanism while in fact polling is adequate. Whether that's the case in your situation would depend on a number of things, for example number of users. But if the 'database output' is the same for all users you would have another option in the form of caching to reduce stress on the database.
0
 

Author Comment

by:Staudte
ID: 40287521
Robert,

THANK YOU SO MUCH! Reading your solution I'm sure that that it is absolutely correct. (I could've come up with the same solution, but - as in so many cases - it needs a second pair of eyes to see the obvious :-)  ) I'll test this later today and then close the question. As this will only be for a single user and development efforts should be kept to a minimum, polling is perfectly fine. I'll read through the link you've supplied anyway to learn more about the push mechanisms - one never knows when that'll be useful :-)
0
 
LVL 35

Expert Comment

by:Robert Schutt
ID: 40287644
Ok, cool. Another 'by the way', since I was looking deeper into this, thought to share this: http://www.html5rocks.com/en/tutorials/eventsource/basics/

If your application were to evolve into a multi-user, world wide information system, you could look into SSE: send messages to remove and add information (say row by row) rather than sending the whole table each time.

Or, if I read it correctly, should your app becomes more interactive (ability to insert/update/delete records by the user perhaps but more complex ideas elude me at the moment) then the WebSockets could be your solution.

But as you say, for now probably not necessary, just so darn interesting to see all these developments!
0
 

Author Closing Comment

by:Staudte
ID: 40289735
Perfect solution, exactly understood the problem, precisely explained and documented. THIS IS THE WAY IT SHOULD BE! It should be graded A++ and given triple points... Thank you so much :-)
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

IntroductionWhile developing web applications, a single page might contain many regions and each region might contain many number of controls with the capability to perform  postback. Many times you might need to perform some action on an ASP.NET po…
Preparing an email is something we should all take special care with – especially when the email is for somebody you may not know very well. The pressures of everyday working life stacked with a hectic office environment can make this a real challen…
Integration Management Part 2
Loops Section Overview
Suggested Courses

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question