Refreshing a Repeater control in an UpdatePanel with ASP.NET

Question

I'm trying to code a page where you can post a comment without reloading the whole page. The comments are displayed using a Repeater control. The template looks like this:

    <asp:UpdatePanel runat="server" ID="commentsUpdatePanel" UpdateMode="Conditional">
        <ContentTemplate>
        <!-- Comments block -->
        <div class="wrapper bloc content">
            <h3><img src="img/comments.png" alt="Comments" />&nbsp;Comments</h3>                                     
            <p><asp:Label ID="viewImageNoComments" runat="server" /></p>
            <asp:Repeater ID="viewImageCommentsRepeater" runat="server">
                <HeaderTemplate>
                    <div class="float_box marge wrapper comments">
                </HeaderTemplate>
                <ItemTemplate>
                    <div class="grid_25">
                        <span class="user"><%#Eval("username")%></span><br />
                        <span style="font-size:x-small; color:#666"><%#Eval("datetime") %></span>
                    </div>
                    <div class="grid_75">
                        <p align="justify"><%#Eval("com_text") %></p>
                    </div>
                </ItemTemplate>
                <FooterTemplate>
                    </div>
                </FooterTemplate>
            </asp:Repeater>
        </div>
        <!-- Post comment block -->
        <div class="wrapper bloc content">
            <h3><a id="post_comment" name="post_comment"><img src="img/comment_edit.png" alt="Comments" /></a>&nbsp;Post 
                a comment</h3>
            <p class="description">Please be polite.</p>
            <p>
                <asp:Label ID="postCommentFeedback" runat="server" />
            </p>
            <table border="0">
                <tr>
                    <td valign="top">
                    <asp:TextBox id="postCommentContent" runat="server" TextMode="MultiLine" 
                    MaxLength="600" Columns="50" Rows="15" Width="400px" />
                    </td>
                    <td valign="top">
                    <span style="font-size:x-small">BBCode is enabled. Usage :<br />
                    <b>bold</b> : [b]bold[/b]<br />
                    <i>italic</i> : [i]italic[/i]<br />
                    <span class="style1">underline</span> : [u]underline[/u]<br />
                    Link : [url=http://...]Link name[/url]<br />
                    Quote : [quote=username]blah blah blah[/quote]</span>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                    <asp:Button ID="postCommentButton" runat="server" Text="Submit" 
                    onclick="postCommentButton_Click" />    
                    </td>
                </tr>
            </table>
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>

The postCommentButton_Click() function works just fine - clicking "Submit" will make the post. However, I need to completely reload the page in order to see new comments - the post the user just made will not show until then. I Databind the Repeater in Page_Load() after a (!isPostBack) check.

The postCommentButton_Click() function looks like this:

protected void postCommentButton_Click(object sender, EventArgs e)
{
        // We check if user is authenticated
        if (User.Identity.IsAuthenticated)
        {
            // Attempt to run query
            if (Wb.Posts.DoPost(postCommentContent.Text, Request.QueryString["imageid"].ToString(), User.Identity.Name, Request.UserHostAddress))
            {
                postCommentFeedback.Text = "Your post was sucessful.";
                postCommentContent.Text = "";

            }
            else
            {
                postCommentFeedback.Text = "There was a problem with your post.<br />";
            }

        }
        // CAPTCHA handling if user is not authenticated
        else
        {
            // CAPTCHA
        }
}

In my case, we do see postCommentFeedback.Text refreshed, but, again, not the content of the repeater which should have one more post.

What is it I'm missing?

Answer 1

You should DataBind in the Page_Load within a !IsPostBack as you are. You should ALSO databind in your Click event.

    protected void Page_Load(object sender, EventArgs e)
    {
        if(!IsPostBack)
        {
            this.DataBind();
        }
    }
    protected void MyButton_Click(object sender, EventArgs e)
    {
        //Code to do stuff here...

        //Re DataBind
        this.DataBind();
    }
    public override void DataBind()
    {
        //Databinding logic here
    }