CodeCampOz 2007 AJAX Demo

As part of CodeCampOz 2007, Damien and myself co-delivered a presentation on real life experiences with ASP.NET AJAX. Damien has already posted some content on what he delivered and so I thought I'd do the same.

The demo code I used can be download from here.

My demo was fairly simple, and showed a basic way of achieving a partial page load of the pages content to maximise what I like to call "data entry dead time". Basically this is just where the user is performing some form of data entry, particularly on pages with a reasonable amount of fields to deal with. During this time, it provides a good opportunity to load other parts of the page for display and data entry.

In this way, you can load a very small portion of the page, and have the rest of the content load while the user is busy entering away. In the situation I used this it worked well as the link was quite poor and allowed a smaller first portion of the page to load, then the subsequent sections. This occured without interruption to the user and allowed data entry to contine on the page.

So on first page load, you get an initial set of data entry fields.

Then as you type, you get more....

And finally.....

The markup required to do this is quite simple. 1 initial panel for the data entry, and 2 subsequent panels whose Visible=False is initial set, and which are contained within UpdatePanels. The first UpdatePanel has a timer enabled which acts as a trigger for its UpdatePanel. The second UpdatePanel also has a timer, but its initially disabled. When the first timer triggers its panel, in the code behind, the timer disables itself, sets the panels visibility to true, and enables the next timer. The next timer, when triggered, disables itself within the code behind, sets its corresponding panel visibility to true.

The markup is:

 

<asp:Panel ID="Panel1" runat="server">
    <h4>Section 1</h4>
    <label id="Label20">Entry field 1:</label><asp:TextBox ID="TextBox18" runat="server"></asp:TextBox>
    <label id="Label21">Entry field 2:</label><asp:TextBox ID="TextBox19" runat="server"></asp:TextBox><br />
    <label id="Label22">Entry field 3:</label><asp:TextBox ID="TextBox20" runat="server"></asp:TextBox>
    <label id="Label23">Entry field 4:</label><asp:TextBox ID="TextBox21" runat="server"></asp:TextBox><br />
    <label id="Label24">Entry field 5:</label><asp:TextBox ID="TextBox22" runat="server"></asp:TextBox>
    <label id="Label25">Entry field 6:</label><asp:TextBox ID="TextBox23" runat="server"></asp:TextBox><br />
</asp:Panel>

 

<asp:UpdatePanel ID="up2" runat="server" UpdateMode="Conditional" >
    <ContentTemplate>
        <asp:Panel ID="pnl2" runat="server" Visible="false" EnableViewState="false" >
            <h4>Section 2</h4>
            <label id="Label3">Entry field 1:</label><asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
            <label id="Label4">Entry field 2:</label><asp:TextBox ID="TextBox4" runat="server"></asp:TextBox><br />
            <label id="Label5">Entry field 3:</label><asp:TextBox ID="TextBox5" runat="server"></asp:TextBox>
            <label id="Label12">Entry field 4:</label><asp:TextBox ID="TextBox12" runat="server"></asp:TextBox><br />
            <label id="Label13">Entry field 5:</label><asp:TextBox ID="TextBox13" runat="server"></asp:TextBox>
            <label id="Label14">Entry field 6:</label><asp:TextBox ID="TextBox14" runat="server"></asp:TextBox><br />
        </asp:Panel>
        <asp:Timer ID="tmr1" runat="server" Interval="1000" Enabled="true" OnTick="tmr1_tick" />
    </ContentTemplate>
</asp:UpdatePanel>

<hr />

<asp:UpdatePanel ID="up3" runat="server" UpdateMode="Conditional" >
    <ContentTemplate>
        <asp:Panel ID="pnl3" runat="server" Visible="false" EnableViewState="false">
            <h4>Section 3</h4>
            <label id="Label6">Entry field 1:</label><asp:TextBox ID="TextBox6" runat="server"></asp:TextBox>
            <label id="Label7">Entry field 2:</label><asp:TextBox ID="TextBox7" runat="server"></asp:TextBox><br />
            <label id="Label8">Entry field 3:</label><asp:TextBox ID="TextBox8" runat="server"></asp:TextBox>
            <label id="Label15">Entry field 4:</label><asp:TextBox ID="TextBox15" runat="server"></asp:TextBox><br />
            <label id="Label16">Entry field 5:</label><asp:TextBox ID="TextBox16" runat="server"></asp:TextBox>
            <label id="Label17">Entry field 6:</label><asp:TextBox ID="TextBox17" runat="server"></asp:TextBox><br />
        </asp:Panel>
        <asp:Timer ID="tmr2" runat="server" Interval="1000" Enabled="false" OnTick="tmr2_tick" />
    </ContentTemplate>
</asp:UpdatePanel>

And the codebehind is:

protected void tmr1_tick(object sender, EventArgs e)
{
    System.Threading.Thread.Sleep(5000);
    tmr1.Enabled = false;
    tmr2.Enabled = true;
    pnl2.Visible = true;
}
protected void tmr2_tick(object sender, EventArgs e)
{
    System.Threading.Thread.Sleep(5000);
    tmr1.Enabled = false;
    tmr2.Enabled = false;
    pnl3.Visible = true;
}

And thats it. Sorry for the lengthy post.

Now the wierdness happens when you disable ViewState on the page OR you EnableEventValidation, which causes the page to throw an exception whenever a normal or async postback occurs.

The EventValidation error occurs because you are dynamically enabling more input controls than what the page is expecting to receive as submitted data. So when the page is submitted, it compares what it receives, to what it calculated as part of the EvenValidatin signature when the page was initially rendered and because we are enabling more controls to be submitted than originally rendered, an error occurs.

As to the viewstate issues, thats a post for another day.

No Comments