Question

I’ve got an ASP.NET web form which uses UpdatePanels to allow partial page postbacks. Within one of my UpdatePanels, I’m using the AutoCompleteExtender from the AjaxControlToolkit to call a WebMethod on my page to asynchronously retrieve a list of ProjectNames and their associated ProjectID values. When I select an item from the list, I’m using jQuery to save the ProjectID value to a HiddenField server control. I need this value when I click on the Submit button within the UpdatePanel to execute a database query. So far, everything works just great. Here’s the relevant client-side code:

    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <asp:TextBox ID="txtProjectName" Width="200" ToolTip="Type the first few characters of the project to search for" runat="server"></asp:TextBox>
        <ajaxToolkit:AutoCompleteExtender ID="AutoComplete1" TargetControlID="txtProjectName" MinimumPrefixLength="2"
            CompletionInterval="250" CompletionSetCount="20" ServiceMethod="GetProjectCompletionList"
            ServicePath="Default.aspx" runat="server" OnClientItemSelected="itemSelected" />
        <asp:HiddenField ID="hdnProjectID" runat="server" />
        <asp:Label ID="lblProjectName" runat="server"></asp:Label>
        <script type="text/javascript">
            function itemSelected(source, eventArgs) {
                $get('<%= hdnProjectID.ClientID %>').value = eventArgs.get_value();
                $get('<%= lblProjectName.ClientID %>').innerHTML = eventArgs.get_text();
            }
        </script>
        <br /><br />
        <asp:Button ID="btnSubmit" Text="Submit" runat="server" />
    </ContentTemplate>
</asp:UpdatePanel>

But, I also want to display the selected ProjectName text somewhere outside of the TextBox. The reason for this is I want a clear way to visually differentiate between a value in the TextBox that matched an item in the list returned by the AutoCompleteExtender and any old extraneous text leftover that didn’t match anything. So, I’ve tried displaying the selected text in a Label control, but as soon as the postback occurs, this value disappears. I’ve tried using a variety of server and HTML controls, but the behavior is the same… except with the ASP.NET HiddenField control. I’m not sure why this control retains these values across postbacks when the others don’t, but I’m still left without a complete solution.

I have found that if the Label I’m using to display the value is OUTSIDE of the UpdatePanel, it works fine, but the way my form is currently laid out, this isn’t an option. I realize there are some better alternatives to using UpdatePanel when you need more granular control of what to update during partial page postbacks, but I’d rather than delve into that at this time if there is a simpler solution to my problem.

Answer 1

Your Label control is cleared during partial postbacks because it resides in the UpdatePanel, so it gets refreshed, but there is no provision to post its “value” (actually its inner text) back to the server, so the refresh resets it.

You’ll need to use a web control that can post its current value back to the server. I’d suggest a TextBox control in read-only mode: it should work on most browsers, and you can style it to make it look like a label.