[asp.net] Show hide div using codebehind

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?

RegisteredClientScriptBlock adds the script at the top of the page on the post-back with no assurance about the order, meaning that either the call is being injected after the function declaration (your js file with the function is inlined after your call) or when the script tries to execute the div is probably not there yet 'cause the page is still rendering. A good idea is probably to simulate the two scenarios I described above on firebug and see if you get similar errors.

My guess is this would work if you append the script at the bottom of the page with RegisterStartupScript - worth a shot at least.

Anyway, as an alternative solution if you add the runat="server" attribute to the div you will be able to access it by its id in the codebehind (without reverting to js - how cool that might be), and make it disappear like this:

data.visible = false

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;

<div id="OK1"  runat="server" style ="display:none" >
    <asp:DropDownList ID="DropDownList2" runat="server"></asp:DropDownList>
</div>

vb.net code

  Protected Sub DropDownList1_SelectedIndexChanged(sender As Object, e As EventArgs) Handles DropDownList1.SelectedIndexChanged
    If DropDownList1.SelectedIndex = 0 Then
        OK1.Style.Add("display", "none")
    Else
        OK1.Style.Add("display", "block")
    End If
End Sub

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.

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();

I was having a problem where setting element.Visible = true in my code behind wasn't having any effect on the actual screen. The solution for me was to wrap the area of my page where I wanted to show the div in an ASP UpdatePanel, which is used to cause partial screen updates.

http://msdn.microsoft.com/en-us/library/bb399001.aspx

Having the element runat=server gave me access to it from the codebehind, and placing it in the UpdatePanel let it actually be updated on the screen.

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();