asked on

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

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

ASKER CERTIFIED SOLUTION

Robert Schutt

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Robert Schutt

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.

Staudte

ASKER

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 :-)

Robert Schutt

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!

Staudte

ASKER

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 :-)