Getting Post-Back And No Update When Using ASP.NET AJAX

Question

Hi.

I am new to ASP.NET AJAX and am trying to get a status text box / button to allow users to update a status without a post-back. I have a script manager tag on the master page with "enablepartialrendering" set to "true". I also have an updatepanel tag on the content page. When I try this out, the page postbacks and nothing happens. What am I doing wrong? I am using ASP.NET 3.5 / C#. Thanks.

The master page has the following script tag just below the form tag:

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true">
    </asp:ScriptManager>

And somewhere on the page exists a ContentPlaceHolder:

<asp:ContentPlaceHolder ID="ContentCenter" runat="server">
                </asp:ContentPlaceHolder>

The ContentPlaceHolder's associated content tag looks like this:

<asp:Content ContentPlaceHolderID="ContentCenter" runat="server">
    <div class="divContainer">
        <div class="divContainerBox">
            <div class="divContainerTitle">
                Network Activity</div>
            <div class="divContainerRow">
                <asp:Panel ID="pnlStatusUpdate" runat="server">
                    <asp:TextBox Width="400" Height="50" Style="font-size: 9px; padding-left: 0px; padding-right: 0px;"
                        ID="txtStatusUpdate" runat="server"></asp:TextBox>
                    <br />
                    <asp:Button Style="font-size: 9px; padding-left: 0px; padding-right: 0px;" ID="BtnAddStatus"
                        runat="server" Text="Add" /><br />
                    <asp:Repeater ID="repFilter" runat="server">
                        <ItemTemplate>
                            <asp:Label ID="lblMessage" runat="server" Text='<%# ((Alert)Container.DataItem).Message  %>'></asp:Label>
                        </ItemTemplate>
                        <SeparatorTemplate>
                            <hr />
                        </SeparatorTemplate>
                    </asp:Repeater>
                    <asp:Label ID="lblMessage" runat="server"></asp:Label>
                </asp:Panel>
            </div>
        </div>
    </div>
</asp:Content>

And Here Is The Server Method. It does not return anything - it sends the data to "SaveStatusUpdate" to the database. The next time the page post-backs, the new update appears. What I want is no postback and for the entered text that was input (plus any text that a friend might have input) to appear when the status update button is clicked.

protected void BtnAddStatusClick(object sender, EventArgs e)
        {
            var su = new StatusUpdate
             {
                 CreateDate = DateTime.Now,
                 AccountId = _userSession.CurrentUser.AccountId,
                 Status = txtStatusUpdate.Text
             };

            _statusRepository.SaveStatusUpdate(su);
            _alertService.AddStatusUpdateAlert(su);

        }

I am guessing somebody might ask what the "AddStautsUpdateALert" method looks like, so here it is. The "_alertMessage" is the status update. How do I get it to appear using AJAX?

public void AddStatusUpdateAlert(StatusUpdate statusUpdate)
        {
            _alert = new Alert
                        {
                            CreateDate = DateTime.Now,
                            AccountId = _userSession.CurrentUser.AccountId,
                            AlertTypeId = (int) AlertType.AlertTypes.StatusUpdate
                        };
            _alertMessage = "<div class=\"AlertHeader\">" + GetProfileImage(_userSession.CurrentUser.AccountId) +
                           GetProfileUrl(_userSession.CurrentUser.UserName) + " " + statusUpdate.Status + "</div>";
            _alert.Message = _alertMessage;
            SaveAlert(_alert);
            SendAlertToFriends(_alert);

        }

Answer 1

Update panels still post to the server - they just don't return the entire HTML document to the client. Instead they return the part of the page contained within your <asp:UpdatePanel> and replace its contents.

As long as BtnAddStatus is inside the update panel, you have partial page rendering enabled, and you haven't disabled the update panels triggers, clicking the button should trigger your server side event (it does not directly invoke the AddStatusUpdateAlert method).

For more details, see "Understanding Partial Page Updates with ASP.NET AJAX." (There used to be a great article at the same site, with extremely helpful diagrams, but it's vanished.)