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    lt asp DropDownList runat  server  ID  lstFilePrefix1  AutoPostBack  True                     OnSelectedIndexChanged  DropDownList1 SelectedIndexChanged   gt     lt asp ListItem Text  Prefix1  Value  Prefix1    gt     lt asp ListItem Text  Prefix2  Value  Prefix2    gt     lt asp ListItem Text  Prefix3  Value  Prefix3    gt     lt asp ListItem Text  Prefix1 and Prefix2  Value  Prefix1 and Prefix2    gt     lt asp ListItem Text  Prefix2 and Prefix3  Value  Prefix2 and Prefix3    gt   lt  asp DropDownList gt    lt asp DataList ID  DataList1  runat  server  RepeatColumns  4                  CssClass  datalist1   OnItemDataBound  SOMENAMEItemBound                CellSpacing  6  onselectedindexchanged  DataList1 SelectedIndexChanged                 HorizontalAlign  Center  Width  500px  gt    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

User · Answer

You can use a standard ASP NET Panel and then set it s visible property in your code behind    lt asp Panel ID  Panel1  runat  server  visible  false    gt    To show panel in codebehind      Panel1 Visible   true

User · Answer

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

User · Answer

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    lt div id  myDiv  runat  server  gt  lt  div gt    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        lt   myDiv ClientID  gt     myDiv hide            and to show  myDiv show

User · Answer

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

User · Answer

lt div id  OK1   runat  server  style   display none   gt       lt asp DropDownList ID  DropDownList2  runat  server  gt  lt  asp DropDownList gt   lt  div gt    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

User · Answer

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        lt   myDiv ClientID  gt     myDiv hide          and to show   myDiv show

User · Answer

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

User · Answer

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

[asp.net] Show hide div using codebehind

Examples related to asp.net

Examples related to drop-down-menu