Question 86196 in ASP.NET Question posted in
The official documentation can be found here.

Update Panel removes the CssClass after postback? – Asp.net

Well, This seems weird because I have been using update panel since then, then guess what, it removes the all the CssClass of the objects inside it after the postback.

I used the update panel to add items on my ListBox and the listbox returns to its original form. I meant in the return to the original form that it is like a listbox without the CSS.

But when I check the element on the web browser, the class of the object still there but it does not really reflect on the UI.

so this is my code:

<asp:UpdatePanel runat="server">
            <ContentTemplate>
                <!--RECEIVER INFORMATION-->
                <div class="pd-20">
                    <h4 class="text-green h4">Receiver Details</h4>
                </div>

                <div class="col-md-12">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Vendor Name</label>
                                <asp:DropDownList runat="server" ClientIDMode="Static"
                                    CssClass="custom-select2 form-control" ID="cmbVendor">
                                </asp:DropDownList>
                            </div>
                        </div>
                        <div class="col-md-6 col-sm-12 col-xs-12">
                            <label>Currency</label>
                            <div class="input-group custom">
                                <asp:TextBox runat="server" ID="txtCurrency" Placeholder="Currency"
                                    CssClass="form-control form-control-lg text-uppercase"></asp:TextBox>
                                <div class="input-group-append custom">
                                    <span class="input-group-text"><i class="icon-copy fi-dollar"></i></span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 col-sm-12 col-xs-12">
                            <label>Amount</label>
                            <div class="input-group custom">
                                <asp:TextBox runat="server" ID="txtAmount" Placeholder="Amount" TextMode="Number" AutoPostBack="true"
                                    CssClass="form-control form-control-lg" OnTextChanged="txtAmount_TextChanged"></asp:TextBox>
                                <div class="input-group-append custom">
                                    <span class="input-group-text"><i class="icon-copy fi-dollar-bill"></i></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--RECEIVER INFORMATION-->

                <!--APPROVER DETAILS-->
                <div class="pd-20">
                    <h4 class="text-green h4">Approver Details</h4>
                </div>

                <div class="col-md-12">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Approvers</label>
                                <asp:ListBox runat="server" ID="lbApprovers" SelectionMode="Multiple" ClientIDMode="Static"
                                    CssClass="custom-select2 form-control text-uppercase" multiple="multiple"></asp:ListBox>
                            </div>
                        </div>
                    </div>
                </div>
                <!--APPROVER DETAILS-->
            </ContentTemplate>
        </asp:UpdatePanel>

I can’t really explain what was happening so I’m going to attach the photo of the problem after postback.

Here is the before postback
before postback

And here is the after postback
after postback

Can someone tell me what I am doing wrong and What should I do to make this right?

Tags:

2

Answers


  1. 0

    The ListBox using Custom-select2 components which initialize by js on page load. When postback using UpdatePanel, all contents inside UpdatePanel will be replaced but page load event will not trigger again as this is ajax call. Thus, the custom-select2 initialize script does not trigger.

    For page with UpdatePanel, you can call initialize script in pageLoad method, which will be triggered on each postback by UpdatePanel.

    <script>
    function pageLoad(sender, args) {
        console.log("page load event occur");
    }
</script>
    Login or Signup to reply.
  2. 0 
    <asp:UpdatePanel ID="UpdatePanel" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">

    Please try to add ChildrenAsTriggers="false" UpdateMode="Conditional" and check.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search