CODEWITHSUNDEEP
c#updatepanelpostback
NoBullMan
NoBullMan

Reputation: 2188

Postback inside update panel issue

I have a panel inside an update panel that is initially hidden. When a row inside a grid is selected this panel is made visible with details of selected record.

In this panel I have a dropdown list that does a postback in order to set the text of a label. When postback happens, the panel is made invisible again. I tried setting triggers for update panel and set it to dropdown's slectedindexchanged event but didn't work. I put this update panel inside another update panel but no luck.

<asp:UpdatePanel runat="server" ID="upnlDetail" RenderMode="Inline">
    <ContentTemplate>
        <asp:Panel runat="server" ID="pnlDetail" style="display:none">
            <asp:DropDownList runat="server" 
                ID="ddlIDSID" 
                AutoPostBack="true" 
                DataSourceID="odsIDS" 
                DataTextField="IDSNAME_BK" 
                DataValueField="IDSID" 
                OnSelectedIndexChanged="ddlIDSID_SelectedIndexChanged">
            </asp:DropDownList>
            <asp:Label runat="server" ID="lblIDSSite" CssClass="NormalSmall" />
        </asp:Panel>
    </ContentTemplate>        
</asp:UpdatePanel>

When grid is selected, I use javascript to populate the controls and make the panel visible:

function populate(record) {
    var oDetailPanel = document.getElementById('<%=pnlDetail.ClientID %>');
    /* set up all controls  */
    oDetailPanel.style.display = "block";
}

Upvotes: 4

Views: 2782

Answers (1)

Greg
Greg

Reputation: 11478

You could potentially solve your issue on the Page Load, of your call:

if(Page.IsPostback)
     pnContent.Visible = true;

You may have to do the IsAjaxPostBack I think it is through the Script Manager.

Below is why I'm against Update Panel's.

In short, while still using an Update Panel, this problem will be very complicated to fix. You should use your own Ajax instead.

The issue itself is quite common. The Hypertext Transfer Protocol is stateless, but Asp.Net Web-Forms creates an entire life cycle that immediately forces some form of state persistence to your application.

One of the tools to help alleviate some of those pressures is the notoriously evil Update Panel. This panel isn't anything special, it simply copies your entire page to memory, then executes the Postback via Ajax to hit the server without the flicker that will occur when you normally do a Postback.

Update Panel Issues:

  • Performance heavy.
  • Difficult to debug or ensure works correctly.
  • Hard to gauge page state.

The third point is the most prevalent for one singular reason, it makes you code in a circle. What I'm trying to say, your page loads. The Update Panel triggers, page refreshes. The page is modified via the client, Update Panel triggers, page refreshes without Client-Side modification.

The server isn't aware of your Client-Side change, it doesn't persist in memory. So when the Update Panel triggers it recalls the page from the last moment the server sent data.

The only way to truly fix this. You have to implement QueryStrings and other nuances to help ensure the Server-Side and Client-Side stay in synchronization. This will create spaghetti incredibly quick, so hopefully you enjoy pasta.

The best way to avoid these scenarios, is to leverage Web Services and send your own Ajax to ensure the page always reflects the goal, so when your user does a Postback, you are in control of the data sent.

Hopefully this explanation explains in detail the pitfalls of using an Update Panel. More than likely redoing the page in the manner I mentioned above will be far faster unless you can avoid JavaScript and rely solely on the server.

I'm trying to truly convey why you should use your own Ajax and do it yourself without having data applied automatically through the Update Panel. You shouldn't use the panel, should do it yourself.

Upvotes: 1

Related Questions