simon-holman.net

In a project I’m working on, I had to create a Facebook style notification system. I wanted the user to be able to enter a status and click the add button and have the list of notifications below it update with their most recent post. That is simple enough to do, all I had to do was to add the notification, clear the textbox then call the updateNotifications function in my button_click code behind method. This all had to be very smooth to the eye so i added the usual updatepanel around the textbox, button and div that listed the notifications.

As well as that, I also wanted the notifications system to automatically update with other users notifications within the same group. So I added a Time control to the mix and set it to refresh the notifications list every 10 seconds.

This seemed to work well until I was half way through typing a new notification when the timer triggered and refreshed the notification list. As the textbox was inside the updatepanel it stopped letting me type any text while it refreshed.

So then I thought that I’d move the textbox outside the updatepanel so it wasn’t impacted when the timer refreshed the list.

The only problem now is that because the submit button to add a new notification was inside the updatepanel and the textbox was outside the updatepanel the textbox could no longer be cleared on the partial postback. My txtNotification.Text = String.Empty; was being ignored.

I can’t quite remember the next thing I tried but it obviously didn’t work because now the whole page was refreshing everytime the timer triggered.

In the end I remembered about the UpdateMode property on the update panel. I set the updatemode to conditional around my textbox/button updatepanel and always on the notification list/timer updatepanel. That way the timer triggers updated the notification list without upsetting the textbox and submitting the add button updated the list and cleared the textbox. Perfect result.

ASPX code:

<asp:UpdatePanel ID="updStatusUpdate" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <asp:TextBox ID="txtStatusUpdate" runat="server" TextMode="MultiLine" Rows="2" Width="570"></asp:TextBox> <br />        

        <asp:Button ID="btnAddStatusUpdate" runat="server" Text="Update Status"
            onclick="btnAddStatusUpdate_Click" class="ui-state-default ui-corner-all"/>

    </ContentTemplate>
</asp:UpdatePanel> 

<asp:UpdatePanel ID="updNotifications" runat="server" UpdateMode="Always">
    <ContentTemplate>
        <div class="NotificationList">
            <asp:Literal ID="litNotifications" runat="server"></asp:Literal>
        </div>
        <asp:Timer ID="Timer1" runat="server" ontick="Timer1_Tick" Interval="10000"></asp:Timer>
    </ContentTemplate>
</asp:UpdatePanel>