Displaying and hiding parts of the web form freely without limitations in order to avoid ViewState loading problems

Question

The problem

I have a web form and I would like to hide and show some panels. When I say "Panel" I do not mean the Panel control but just a pane in the html (usually represented by a DIV).

Well I want to show and hide this panels as I wish... no limits means that not necessarly only one pane must by visible, also 2, 3 or 4 can be.

Usually I achieved this by:

<div id="mypane1" runat="server">
  ...
</div>
<div id="mypane2" runat="server">
  ...
</div>
<div id="mypane3" runat="server">
  ...
</div>

and this:

this.mypane1.Visible = true;
this.mypane2.Visible = false;
this.mypane3.Visible = true;

Unfortunately these panels contain controls and some of them are not shown from the beginning (first web form load, so when no PostBack happens). This leads to problems for ViewState loading.

Regarding ViewState loading

Of course many will obviously ask about these ViewState problems of mine. Well, briefly, the thing is this: a ViewState loading error is not easy to manage but in the end I could understand the following.

Let's say to have this:

<!-- In .aspx -->
<div id="mypane1" runat="server">
  ...
  <asp:Literal ID="..." runat="server" ...></asp:Literal>
  <asp:TextBox ID="..." runat="server" ...></asp:TextBox>
  ...
</div>
<div id="mypane2" runat="server">
  ...
  <asp:LinkButton ID="lb1" OnClick="lb1_Click" runat="server" ...></asp:LinkButton>
  <asp:LinkButton ID="lb2" OnClick="lb2_Click" runat="server" ...></asp:LinkButton>
  <asp:LinkButton ID="lb3" OnClick="lb3_Click" runat="server" ...></asp:LinkButton>
  ...
</div>
<div id="mypane3" runat="server">
  ...
  <asp:TextBox ID="..." runat="server" ...></asp:TextBox>
  <asp:LinkButton ID="lb4" OnClick="lb4_Click" runat="server" ...></asp:LinkButton>
  <asp:TextBox ID="..." runat="server" ...></asp:TextBox>
  ...
</div>

// In .aspx.cs
protected void Page_Load(...) {
  if (!this.IsPostBack) {
    this.mypane1.Visible = true;
    this.mypane2.Visible = false;
    this.mypane3.Visible = true;
  }
}

/// ... In the page many happens and the panes are shown and hidden ... ///

// Event Handlers
protected void lb1_Click(object sender, EventArgs e) {
  ...
}
protected void lb2_Click(object sender, EventArgs e) {
  ...
}
protected void lb3_Click(object sender, EventArgs e) {
  ...
}
protected void lb4_Click(object sender, EventArgs e) {
  ...
}

Well the problem is the following.

• At the beginning pane2 is not shown.

• After some actions pane2 is shown and its controls are shown too.

• User click lb1 --> ViewState error

Note that the same happens for every event associated to pane2's controls. Is lb4 is pressed, no problems.

The problem is that the beginning hierarchy is represented by controls in pane 1 and 3. When events are raised by controls not part if the beginning hierarchy, ViewState is found inconsistent (because I act on HtmlControls, usually ServerControls are more intelligent and can manage better ViewState when controls are added inside them).

Feasible solutoions

Note that I could simply do the following to hide and show panels:

this.mypane2.Attributes.Add("display", "none");

This is not something I would like to do for two reasons:

• I want panes not to be rendered as Html.

• I would like to use server controls.

Request

I need to use web controls to manage my panel management, I cannot use HtmlControls because Control Hierarchy is not correctly loaded.

I tried MultiView and View controls but they enable me to use only one active view. How can I do?

Note: Please do not focus too much on the ViewState problem, it is just a good desc to let you know what happens, my only interest is to find a way to hide and show panes freely using server controls.

Thankyou

Answer 1

I'm assuming that setting the visiblity to false for the panels causes the children not to be added to ViewState or interfers with it in some way. Is that correct?

Given that, if you want to have the controls there as far as the .Net rendering engine is concerned but hidden from the end user you could try to show and hide them using css i.e.

show

pnlDemo.Attributes.Add("style", "display:block");

hide

pnlDemo.Attributes.Add("style", "display:none");

I had a situation where I needed ASP.Net controls there for ViewState purpose but not shown. At the appropriate point I would show them using JQuery and this method work for that scenario so it may work for yours.

Answer 2

Have you tried using the ViewStateModeByIdAttribute?

The ViewStateModeByIdAttribute class is used to specify a control that requires view-state loading by ID. The default view-state loading behavior is for ASP.NET to load the view-state information for a control by its index in the control tree of the page. There is a performance cost for loading view-state information by ID because the page control tree must be searched for the control specifically before loading its view-state information.

Answer 3

Have you tried with page.RegisterStartupScript . script will load at the end of page load so control will have their viewstate . Write JavaScript code that get the id of panel to hide & change the CSS to visibility hidden not display none.

another asp button on which you want to display the panel. you can write JavaScript code onClientClick event of button to change the CSS of panel to change its visibility.