Updating a field in an Master Page's UpdatePanel from CodeBehind

Question

I've got a master page with a cart count at the top of my page inside an updatepanel, along with another updatepanel which wraps a search field tied a dropbox denoting search type. (The UpdatePanelSearch is tied to an AutoCompleteExtender and the Find dropdown at left sets the type of contextkey to be used when autocompleting)

I'm attempting to let code-behind code in a subordinate page (usually the user clicking or manipulating an inventory item of some sort) update the cart count.

Things I've tried:

If UpdatePanelCart and UpdatePanelSearch are both set with updatemode=automatic, UpdatePanelSearch stops reacting to updates of the Find dropdown.
The same happens if I use a single updatepanel to wrap both areas.
If I set UpdatePanelCart's UpdateMode to conditional, then UpdatePanelSearch works properly--but I don't have an obvious way (to me at least) of forcing the refresh of the cart count (i.e., I can set it to a new value in code a code-behind, but it won't actually be redrawn until the page is fully redrawn).

What's the correct strategy here? I'll admit I don't fully understand why #1 and #2 don't work (I suspect the AutocompleteExtender is the reason but I'm really just guessing)

Code for the Search panel follows:

<asp:UpdatePanel ID="UpdatePanelSearch" runat="server">
    <ContentTemplate>
        <ajaxToolkit:AutoCompleteExtender ID="AutoCompleteExtender2" runat="server"
            CompletionInterval="150"
            CompletionListCssClass="autocomplete_completionListElement"
            ServiceMethod="GetCompletionList"
            ServicePath="/atomic/Autocomplete.asmx"
            TargetControlID="txtThingToFind"
            UseContextKey="True"
            CompletionSetCount="75">
        </ajaxToolkit:AutoCompleteExtender>

        <asp:Panel ID="Panel1" DefaultButton="cmdQuickFind" runat="server">
            <div id="mainSearchArea">
                <div id="searchLine">

                    <div id="signinArea">
                        <asp:Label ID="Label1" runat="server" CssClass="formfield-required"></asp:Label>
                    </div>
                    <asp:Panel ID="Panel2" DefaultButton="cmdQuickFind" runat="server">
                        <div id="searchArea">
                            <div class="row">
                                <div class="col-lg-8">
                                    <div class="input-group">
                                        <div class="input-group-btn">
                                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Find <span class="caret"></span></button>
                                            <ul class="dropdown-menu">
                                                <li>
                                                    <asp:LinkButton ID="LinkButton1" runat="server">Comic Title</asp:LinkButton></li>
                                                <li>
                                                    <asp:LinkButton ID="LinkButton2" runat="server">Publisher</asp:LinkButton></li>
                                                <li class="divider"></li>
                                                <li>
                                                    <asp:LinkButton ID="LinkButton3" runat="server">Artist</asp:LinkButton></li>
                                                <li>
                                                    <asp:LinkButton ID="LinkButton4" runat="server">Writer</asp:LinkButton></li>
                                                <li class="divider"></li>
                                                <li>
                                                    <asp:LinkButton ID="LinkButton5" runat="server">Storyline</asp:LinkButton></li>
                                                <li class="divider"></li>
                                                <li>
                                                    <asp:LinkButton ID="LinkButton6" runat="server">1st Appearance</asp:LinkButton></li>
                                                <li>
                                                    <asp:LinkButton ID="LinkButton7" runat="server">2nd Appearance</asp:LinkButton></li>
                                                <li>
                                                    <asp:LinkButton ID="LinkButton8" runat="server">Origin</asp:LinkButton></li>
                                                <li>
                                                    <asp:LinkButton ID="LinkButton9" runat="server">Death</asp:LinkButton></li>
                                                <li>
                                                    <asp:LinkButton ID="LinkButton10" runat="server">Special Appearance</asp:LinkButton></li>
                                                <li class="divider"></li>
                                                <li>
                                                    <asp:LinkButton ID="LinkButton11" runat="server">Advanced Find...</asp:LinkButton></li>
                                            </ul>
                                        </div>
                                        <!-- /btn-group -->

                                        <asp:TextBox ID="TextBox1" runat="server"
                                            CssClass="form-control" AutoCompleteType="None" autocomplete="off"
                                            placeholder="Find comic title or issue...">
                                        </asp:TextBox>

                                        &nbsp;
                                                    <asp:Button runat="server" ID="Button1" Text="Go" CssClass="btn btn-primary" />

                                    </div>

                                    <asp:Panel runat="server" ID="Panel3" CssClass="findScope" Visible="false">
                                        <label>Search: </label>
                                        <asp:RadioButton ID="RadioButton1" runat="server" GroupName="findScope" AutoPostBack="True" />
                                        &nbsp;&nbsp;&nbsp;
                                            <asp:RadioButton ID="RadioButton2" runat="server" Text="All sellers" Checked="True" GroupName="findScope" AutoPostBack="True" />
                                    </asp:Panel>

                                </div>
                                <!-- /input-group -->
                            </div>
                            <!-- /.col-lg-6 -->
                        </div>
                    </asp:Panel>
                </div>
            </div>
        </asp:Panel>
    </ContentTemplate>
</asp:UpdatePanel>

score 0 · Answer 1 · answered Jun 11 '17 at 03:57

It seems at least one of my problems was my fuzzy understanding of the trigger mechanism for UpdatePanels.

The reason for behavior #1 (the Cart not updating) was that I hadn't placed the UpdatePanelCart closely enough around the cart label. Automatically updating UpdatePanels only update as a result to changes in their immediate child controls unless explicit postbacktriggers are defined. Since the UpdatePanel was wrapping the whole menu line, the automatic update didn't happen.

Behavior #2 (nothing on the page of any consequence updating if I attempted to wrap the whole page in an updatepanel) was related-- none of the controls I wanted to see update were immediate child controls, so this was going to fail.

The solution for me was to draw the updatepanels more narrowly, and do some extra CSS work to work around the formatting issues these inevitably caused to the menu.

Updating a field in an Master Page's UpdatePanel from CodeBehind

1 Answers1