Accessing from both javascript and code-behind

Question

I have a div with style="display:none". The div should become visible on pressing an html button:

function JSAdd() {
    document.getElementById('divDetail').style.display = "block";
}
    <div style="float:left">

    <div id="ctl00_MainContent_upnlLbRD">





            <select size="4" name="ctl00$MainContent$lbRD" id="ctl00_MainContent_lbRD" style="width:188px;">

    <option value="5">one</option>
    <option value="1">two</option>
</select>

    <input id="btnAdd" type="button" value="Добавить" onclick="JSAdd();" />
    <input id="btnEdit" type="button" value="Редактировать" onclick="JSEdit();" />
</div>
<div id="ctl00_MainContent_divDetail" style="display:none" clientidmode="static">
    <div id="ctl00_MainContent_upnlDescription">

            <div>

                <span id="ctl00_MainContent_lblDescription">Описание:</span>

                <input name="ctl00$MainContent$txtDescription" type="text" id="ctl00_MainContent_txtDescription" />  

                <span id="ctl00_MainContent_txtDescriptionRequiredFieldValidator" style="color:Red;visibility:hidden;">Описание является обязательным для заполнения</span>

            </div>

            <input type="submit" name="ctl00$MainContent$btnSave" value="Сохранить" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$MainContent$btnSave&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, false))" id="ctl00_MainContent_btnSave" />   

I need to be able to make the div invisible again from code-behind. I cannot access the div unless it is runat="server". But when I add runat="server", the div doesn't become visible on pressing the button from the javascript function above. Could you please help me with this?

Thanks,
David

Answer 1

You can access a div in code-behind by adding the runat="server" attribute. Adding this attribute does change the way you access the element in JavaScript though:

var el = document.getElementById("<%=div1.ClientID%>");
if (el){
    el.style.display = "none"; //hidden
}

There are two ways to adjust the visibility from code-behind, but since you're setting display:none in JavaScript, you'd probably want to use the same approach in code-behind:

div1.Style["display"] = "block"; //visible

In code-behind, you can also set the Visible property to false, but this is different because it will prevent the element from being rendered at all.

EDIT

If the div is still showing with display:none present, you probably have an unclosed tag or quote somewhere affecting the markup. Double check and make sure that the markup is valid.

Answer 2

You have a few options, use ClientIDMode="Static" or use the dynamic ClientID at run-time. Both of these options give you server-side access to the object.

Dynamic:

 <div id="divDetail" runat="server" />
 //or
 <asp:panel id="divDetail" runat="server" />

  function JSAdd() {
    document.getElementById('<%= divDetail.ClientID %>').style.display = "block";
  }

  //to hide from code-beind
  divDetail.Attributes.Add("style","display:none;");

Static(.NET 4.0 +):

 <div id="divDetail" runat="server" ClientIdMode="Static">
  //or
 <asp:panel id="divDetail" runat="server" ClientIdMode="Static" />

  function JSAdd() {
    document.getElementById('divDetail').style.display = "block";
  }

Answer 3

Use a Panel, it renders as a classic div

<asp:Panel runat="server" ID="divDetail" ClientIDMode="Static" /> 

Answer 4

When runat="server" is applied to an element, asp.net ensures that it has a unique ID by mangling it. Simply ask asp.net for the real client id:

function JSAdd() {
    document.getElementById("<%=div1.ClientID%>").style.display = "block";
}

Alternatively, you could tell asp.net to leave your ID alone by adding this to your div:

<div id="div1" runat="server" clientidmode="Static">

Resources:

ClientIdMode="Static" docs

Answer 5

In ASP.NET, to make IDs unique (if multiple control loaded where same ID are specified), ID on elements are often follow a convention like ctl00_container1_container2_controlID and this is what returned when you call control.ClientID.

If you consider such a case where there's same ID on the serverside and you loaded those two controls in your page, you may consider using jQuery and life would be easier with runat="server" with just matching the ID with the end part:

function JSAdd() {
    $("div[id$=divDetails]").show();
}

Answer 6

Simplest technique will be to use Javascript/Jquery to Changes Display property of the Div. if not that you can use following code

<form method="post" runat="server">
    <div style = "display:none" id= "div1" runat ="server" >Hello I am visible</div>
    <asp:Button Text="display Div" runat ="server" ID ="btnDisplay" OnClick = "displayDiv" />
    <asp:Button Text="display Div" runat ="server" ID ="btnHideDiv" OnClick = "hideDiv" />
    </form>

code behind code is as follows

 protected void displayDiv(object sender, EventArgs e)
    {
        div1.Style.Clear();
        div1.Style.Add("display", "block");
    }
    protected void hideDiv(object sender, EventArgs e)
    {

        div1.Style.Clear();
        div1.Style.Add("display", "none");
    }

guess you Got your solution