Show hide div using codebehind

Question

I have a DropDownList for which I am trying to show a div OnSelectedIndexChanged but it says OBJECT REQUIRED.

I am binding the DataList in that div:

aspx:

<asp:DropDownList runat="server" ID="lstFilePrefix1" AutoPostBack="True" 
                  OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged" >
  <asp:ListItem Text="Prefix1" Value="Prefix1" />
  <asp:ListItem Text="Prefix2" Value="Prefix2" />
  <asp:ListItem Text="Prefix3" Value="Prefix3" />
  <asp:ListItem Text="Prefix1 and Prefix2" Value="Prefix1 and Prefix2" />
  <asp:ListItem Text="Prefix2 and Prefix3" Value="Prefix2 and Prefix3" />
</asp:DropDownList>

<asp:DataList ID="DataList1" runat="server" RepeatColumns="4"  
              CssClass="datalist1"  OnItemDataBound="SOMENAMEItemBound"
              CellSpacing="6" onselectedindexchanged="DataList1_SelectedIndexChanged" 
              HorizontalAlign="Center" Width="500px">

code behind:

protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
    if (lstFilePrefix1.SelectedItem.Text=="Prefix2")
    {
        int TotalRows = this.BindList(1);
        this.Prepare_Pager(TotalRows);
        Page.ClientScript.RegisterClientScriptBlock(GetType(), "JScript1", "ShowDiv('data');", true);
    }
}

javascript:

function ShowDiv(obj)
{
     var dataDiv = document.getElementById(obj);
     dataDiv.style.display = "block";
}

What am I doing wrong?

Answer 1

You can use a standard ASP.NET Panel and then set it's visible property in your code behind.

<asp:Panel ID="Panel1" runat="server" visible="false" />

To show panel in codebehind:

Panel1.Visible = true;

Answer 2

Make the div

runat="server" 

and do

if (lstFilePrefix1.SelectedValue=="Prefix2")
{
    int TotalRows = this.BindList(1);
    this.Prepare_Pager(TotalRows);
    data.Style["display"] = "block";
}

Your method isn't working because the javascript is being rendered in the top of the body tag, before the div is rendered. You'd have to include code to tell the javascript to wait for the DOM to be completely ready to take on your request, which would probably be easiest to do with jQuery.

Answer 3

There are a few ways to handle rendering/showing controls on the page and you should take note to what happens with each method.

Rendering and Visibility

There are some instances where elements on your page don't need to be rendered for the user because of some type of logic or database value. In this case, you can prevent rendering (creating the control on the returned web page) altogether. You would want to do this if the control doesn't need to be shown later on the client side because no matter what, the user viewing the page never needs to see it.

Any controls or elements can have their visibility set from the server side. If it is a plain old html element, you just need to set the runat attribute value to server on the markup page.

<div id="myDiv" runat="server"></div>

The decision to render the div or not can now be done in the code behind class like so:

myDiv.Visible = someConditionalBool;

If set to true, it will be rendered on the page and if it's false it won't be rendered at all, not even hidden.

Client Side Hiding

Hiding an element is done on the client side only. Meaning, it's rendered but it has a display CSS style set on it which instructs your browser to not show it to the user. This is beneficial when you want to hide/show things based on user input. It's important to know that the element CAN be hidden on the server side too as long as the element/control has runat=server set just as I explained in the previous example.

Hiding in the Code Behind Class

To hide an element that you want rendered to the page but hidden is another simple single line of code:

myDiv.Style["display"] = "none";

If you have a need to remove the display style server side, it can be done by removing the display style, or setting it to a different value like inline or block (values described here).

myDiv.Style.Remove("display");
// -- or --
myDiv.Style["display"] = "inline";

Hiding on the Client Side with javascript

Using plain old javascript, you can easily hide the same element in this manner

var myDivElem = document.getElementById("myDiv");
myDivElem.style.display = "none";

// then to show again
myDivElem.style.display = "";

jQuery makes hiding elements a little simpler if you prefer to use jQuery:

var myDiv = $("#<%=myDiv.ClientID%>");
myDiv.hide();

// ... and to show 
myDiv.show();

Answer 4

Another method (which it appears no-one has mentioned thus far), is to add an additional KeyValue pair to the element's Style array. i.e

Div.Style.Add("display", "none");

This has the added benefit of merely hiding the element, rather than preventing it from being written to the DOM to begin with - unlike the "Visible" property. i.e.

Div.Visible = false

results in the div never being written to the DOM.

Edit: This should be done in the 'code-behind', I.e. The *.aspx.cs file.