locked
updatepanel.update() does not work RRS feed

  • Question

  • User1032508733 posted

    I have the following html in my master page:

    <asp:UpdatePanel runat="server" id="UpdatePanelCartBody" updatemode="Conditional">
                                        <ContentTemplate>
                                        <asp:Repeater runat="server" ID="repeaterCartItems" ItemType="AlvariumActivity.Models.CartItem" SelectMethod="GetMyCartItems">
                                            <ItemTemplate>
                                                <div class="cart-inline-item" onmouseover='updateHiddenFields(<%#:Item.ProductId %>, <%# Container.ItemIndex%>)'>
                                                    <div class="unit2 align-items-center">
                                                        <div class="unit2-left">
                                                            <a>
                                                                 <img id="imageCartItem" src="image/<%#:Item.Product.ImagePath%>" width="150" height="112" />
                                                            </a>
                                                        </div>
                                                        <div class="unit2-body">
                                                            <h6 class="cart-inline-name"> <asp:HyperLink runat="server" ID="productNameCartItem" NavigateUrl="#" Text="<%#:Item.Product.ProductName %>" /></h6>
                                                            <div>
                                                                <div class="group-xs group-inline-middle">
                                                                    <div class="table-cart-stepper">
                                                                        <input class="form-input-count" id="inputQty<%#:Item.ProductId %>" name="inputQty<%#:Item.ProductId %>"
                                                                            type="number" data-zeros="true"
                                                                            value="<%#: Item.Quantity %>" min="1" max="1000"
                                                                            onchange='updateHiddenFields(<%#:Item.ProductId %>, <%# Container.ItemIndex%>)'/>
                                                                    </div>
                                                                    <h6 class="cart-inline-title" id="totalCostCartItem">&nbsp&nbsp&nbsp<%#: String.Format("{0:c}", ((Convert.ToDouble(Item.Quantity)) *  Convert.ToDouble(Item.Product.UnitPrice)))%></h6>
                                                                    <div class="row">
                                                                        <div class=" offset-1 col-10">
                                                                            <asp:Button ID="buttonUpdateCartItem" runat="server" CommandName="Update" CssClass="button-xs button-borderless" 
                                                                                Text="Update Qty" OnClick="buttonUpdateCartItem_Click" />
                                                                            <asp:Button ID="buttonDeleteCartItem" runat="server" CommandName="Delete" CssClass="button-xs button-borderless" 
                                                                                Text="Delete" OnClick="buttonDeleteCartItem_Click" />
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="cart-line"></div>
                                            </ItemTemplate>
                                        </asp:Repeater>
                                       
                                        </ContentTemplate>
                                        </asp:UpdatePanel>

    Each cart item has a buttonDeleteCartItem.  When I click on buttonDeleteCartItem, the item is deleted from the cart.   This part work without any issues.

    On the content page, I have the following HTML:

    <asp:Panel    
                        ID="panelSalads"    
                        runat="server"   
                        BackColor="white"   
                        HorizontalAlign="Center"
                        CssClass="panel-menu-items">
                       
                         <div class="row">
                         <asp:Repeater runat="server" ID="repeaterSalads" ItemType="AlvariumActivity.Models.Product" SelectMethod="GetSalads"> 
                             <ItemTemplate>
                                    <!--Fouad, Feb 28, 2020: Added onclick event to update hidden fields when user switch from one menu item to another -->
                                    <div class="col-sm-11 col-md-5" style="border:1px solid #9b9b9b; padding:10px 10px 1px 10px; margin:5px 4.1667% 5px 4.1667%" 
                                         onmouseover='updateHiddenField(<%#:Item.ProductID %>, <%# Container.ItemIndex%>,"Salads")'>
                                        <asp:Label runat="server" ID="labelSaladsProductID" Text="<%#:Item.ProductID %>" CssClass="not-visible" />
                                        <div class="row">
                                            <div class="col-12">
                                                <h5 style="font-size: 18px;">
                                                    <%#:Item.ProductName%>
                                                </h5>
                                            </div>
                                            <b style="color:green; ; top:10px; right:20px;"><%#:String.Format("{0:c}", Item.UnitPrice)%></b>
                                            
                                        </div>
                                        <a>
                                            <img src="image/<%#:Item.ImagePath%>" width="150" height="112" />
                                        </a>
                                
                                        <br />
                                        <span>
                                            <%#:Item.Description%>
                                        </span>
                                        <br />
                                        <span>
                                            <div class="row" style="padding:10px;">
                                                <div class="col-7">
                                                    <div class="group-xs group-inline-middle">
                                                        <span>Qty:</span>
                                                    <div class="table-cart-stepper">
                                                        <input class="form-input-count" id="inputQuantity<%#:Item.ProductID %>" name="inputQuantity<%#:Item.ProductID %>" type="number" data-zeros="true" value="1" min="1" max="100"
                                                             onchange='updateHiddenField(<%#:Item.ProductID %>, <%# Container.ItemIndex%>,"Salads")'/>
                                                        
                                                    </div>
                                                    </div>
                                                </div>
                                                 
                                                <div class="col-5">
                                                <asp:UpdatePanel runat="server" ID="updatePanelSalads"  updatemode="Conditional">
                                                <ContentTemplate>
                                                    <asp:Button runat="server" ID="buttonAddToCart" OnClick="buttonAddToCart_Click" CssClass="button-primary-outline-v3" style="border:1px solid #F69522; padding:5px 10px 5px 10px;" 
                                                                CommandName="Add To Cart" Text="Add To Cart"/>
                                                    <asp:Button runat="server" ID="Button1" OnClick="Button1_Click" Visible="true"/>
                                                    <asp:Label runat="server" id="labelSaladsItemAdded" class="added-cart-icon fa-check not-visible"></asp:Label>
                                                </ContentTemplate>
                                                </asp:UpdatePanel>   
                                                </div>
                                                
                                            </div>
                                        </span>
                                    </div>
                                </ItemTemplate>
                            </asp:Repeater>  
                        </div>
                        
                    </asp:Panel>  

    There is a buttonAddToCart button for each menu item (I use a repeater).  When buttonAddToCart is clicked for an item, this item gets added to the cart.  This part works without any issues.  Also, the label labelSaladsItemAdded for this item becomes visible (it adds a check mark to indicate that this item is already in the cart).  This also works without any issues.

    Now comes the part that is not working as I expect and I need help with.  When I click the buttonDeleteCartItem for an item in the cart (in the master page), I want the labelSaladsItemAdded that correspond to the item deleted from the cart to become hidden.   I use the code behind below to accomplish this:

    Master page code behind:

    public event EventHandler contentCallEvent;
    
            protected void buttonDeleteCartItem_Click(object sender, EventArgs e)
            {
                string rawId = "";
                rawId = this.Request.Form["hiddenProductId"];
    
                //Update the cart item with the new quantity
                using (ShoppingCartActions usersShoppingCart = new ShoppingCartActions())
                {
    
                    if (rawId != "")
                    {
                        usersShoppingCart.RemoveItem(usersShoppingCart.GetCartId(), Convert.ToInt16(rawId));
                    }
    
                }
    
                //Update the cart icon in the master page with the new item count after adding to the cart.
                //Also update the header of the cart basket with the item acount and the new total cost.
                using (ShoppingCartActions usersShoppingCart = new ShoppingCartActions())
                {
                    string cartStr = string.Format("{0}", usersShoppingCart.GetCount());
                    spanCartItemCount.InnerText = cartStr;
                    spanCartIconCount.InnerHtml = cartStr;
                    decimal cartTotal = 0;
                    cartTotal = usersShoppingCart.GetTotal();
                    if (cartTotal > 0)
                    {
                        // Display Total.
                        spanCartTotal.InnerHtml = String.Format("{0:c}", cartTotal);
                    }
                    else
                    {
                        spanCartTotal.InnerHtml = "$0";
                    }
                }
                UpdatePanelCartIcon.Update();
                UpdatePanelCart.Update();
    
                //Update the items in the body of the cart
                repeaterCartItems.DataBind();
                UpdatePanelCartBody.Update();
    
    
                if (contentCallEvent != null)
                {
                    //call the content page method to rebind the data and refresh the update panel.
                    contentCallEvent(this, EventArgs.Empty);
                }
    
    
            }

    The code behind above also work as expected.  The contentCallEvent triggers a Button1_click function in the content page code behind.

    Here is the code behind for the content page:

    protected void Button1_Click(object sender, EventArgs e)
            {
                //Since you deleted an item, you need to update the check marks placed next to items in the menu
                //that are added to the cart.
                //Fouad, Feb 29, 2020: Retrieve items in cart.  Place a check mark next to each item in cart.
                //Find the master page content place holder
                ContentPlaceHolder contMain = (ContentPlaceHolder)this.Master.FindControl("MainContent");
                ShoppingCartActions actions = new ShoppingCartActions();
                List<CartItem> myCartItems = actions.GetCartItems();
                List<Category> myCategories = actions.GetCategories();
                string repeaterID = "";
                if (myCategories != null)
                {
                    foreach (Category myCategory in myCategories)
                    {
                        repeaterID = "repeater" + myCategory.CategoryName;
                        //Find the repeater
                        Repeater currentRepeater = (Repeater)contMain.FindControl(repeaterID);
                        if (currentRepeater != null)
                        {
                            currentRepeater.DataBind();
                            foreach (RepeaterItem row in currentRepeater.Items)
                            {
                                //Find the label that holds the product ID for this product
                                string labelID = "label" + myCategory.CategoryName + "ProductID";
                                Label labelProductID = (Label)row.FindControl(labelID);
                                if (labelProductID != null)
                                {
                                    //Find the product ID.
                                    //Iterate through the cart.  If any item in the cart matches the product ID, 
                                    //then put a check mark to indicate that this product is already in cart.
                                    int productID = Convert.ToInt16(labelProductID.Text);
                                    foreach (CartItem myCartItem in myCartItems)
                                    {
                                        labelID = "label" + myCategory.CategoryName + "ItemAdded";
                                        Label myCheckLabel = (Label)row.FindControl(labelID);
                                        
                                        if (myCartItem.ProductId == productID)
                                        {
                                            if (myCheckLabel != null)
                                            {
                                                myCheckLabel.CssClass = "added-cart-icon fa-check visible";
                                            }
                                            break;
                                        }
                                        else
                                        {
                                            if (myCheckLabel != null)
                                            {
                                                myCheckLabel.CssClass = "added-cart-icon fa-check not-visible";
                                            }
                                        }
    
                                    }
                                }
                                //Update the updatepanel.
                                string updatePanelName = "updatePanel" + myCategory.CategoryName;
                                UpdatePanel updatePanelCheckLabel = (UpdatePanel)row.FindControl(updatePanelName);
                                if (updatePanelCheckLabel != null)
                                {
                                    updatePanelCheckLabel.Update();
                                }
    
                            }
    
                        }
    
    
                    }
                }
                    
            }

    I stepped through the code above and it is stepping as expected.  The problem is that updatePanelCheckLabel.Update() is supposed to update the updatePanelSalads in the content page but it does not.

    What is interesting is that if I click on the Button1 button, the same logic execute and the updatepanel update as expected.  

    Does anyone know why updating updatePanelSalads using update() is not working? 

    Thanks in advance for your help!

    Saturday, March 7, 2020 3:36 AM

All replies

  • User475983607 posted

    As far as I can tell, the design simply will not work.   The update panel in the master page tries to update UI content in an update panel located in the content page using an event handler.   Update panels replaces the HTML content within the current panel.  The changes made to the update panel in the content page are not returned to the browser.  You'll need to rethink the design.

    Saturday, March 7, 2020 12:50 PM
  • User1032508733 posted

    Thanks for your comments!  Any ideas on how I can change the design to accomplish my objective?  In summary, what I want to do is cause a partial post back of label control in content page when a button in the master page is clicked.

    Saturday, March 7, 2020 2:44 PM
  • User475983607 posted

    Thanks for your comments!  Any ideas on how I can change the design to accomplish my objective?  In summary, what I want to do is cause a partial post back of label control in content page when a button in the master page is clicked.

    You'll need to write a little JavaScript function to update the markup when the update panel returns.

    Saturday, March 7, 2020 2:57 PM
  • User1032508733 posted

    Can you provide an example for how to do this? 

    Sunday, March 8, 2020 3:28 PM
  • User475983607 posted

    Can you provide an example for how to do this? 

    https://stackoverflow.com/questions/1190549/how-can-i-run-some-javascript-after-an-update-panel-refreshes

    Sunday, March 8, 2020 4:15 PM