How to select a div element in the code-behind page?

Question

I have a div element:

<div class="tab-pane active" id="portlet_tab1">

I want to control this element from the code-behind page and remove the class "active"

NOTE:

Div doesn't contain the runat="server" property.
This is not the master page file but this is another file named "AssignImages.aspx" and it contains ContentPlaceHolder.

The div is inside this ContentPlaceHolder:

<asp:Content ContentPlaceHolderID="ContentPlaceHolder1" runat="server" ID="Content1">

You need to use `runat="server"` in order to be able to access it server side. ContenPlaceHolder only 'injects' the content to where it is placed — Robert, Oct 09 '13 at 06:56
can't you use asp panel (server side control) instead of div(s) that you want to access from code behind? — Khadim Ali, Oct 09 '13 at 06:56

Carlos Landeras · Accepted Answer · 2013-10-09T07:15:48.107

27

If you want to find the control from code behind you have to use runat="server" attribute on control. And then you can use Control.FindControl.

<div class="tab-pane active" id="portlet_tab1" runat="server">

Control myControl1 = FindControl("portlet_tab1");
if(myControl1!=null)
{
    //do stuff
}

If you use runat server and your control is inside the ContentPlaceHolder you have to know the ctrl name would not be portlet_tab1 anymore. It will render with the ctrl00 format.

Something like: #ctl00_ContentPlaceHolderMain_portlet_tab1. You will have to modify name if you use jquery.

You can also do it using jQuery on client side without using the runat-server attribute:

<script type='text/javascript'>

    $("#portlet_tab1").removeClass("Active");

</script>

edited Oct 09 '13 at 07:15

answered Oct 09 '13 at 07:00

Carlos Landeras

11,025
11
56
82

if i do it with jquery, do i need runat="server" attribute? – Manu Oct 09 '13 at 07:06
No you dont need. Jquery access the control directly from the client side. Perfect to manage css – Carlos Landeras Oct 09 '13 at 07:08
Visual Studio should auto update the associated designer file with a declaration for `myControl1` after adding `runat="server"`, making an explicit one unnecessary. – samus Oct 05 '16 at 18:13

score 9 · Answer 2 · edited Oct 08 '18 at 09:54

9

you'll need to cast it to an HtmlControl in order to access the Style property.

HtmlControl control = (HtmlControl)Page.FindControl("portlet_tab1"); control.Style.Add("display","none");

edited Oct 08 '18 at 09:54

MrMaavin

1,611
2
19
30

answered Jan 10 '17 at 10:33

JJ_Coder4Hire

4,706
1
37
25

score 3 · Answer 3 · edited Oct 22 '18 at 14:53

@CarlosLanderas is correct depending on where you've placed the DIV control. The DIV by the way is not technically an ASP control, which is why you cannot find it directly like other controls. But the best way around this is to turn it into an ASP control.

Use asp:Panel instead. It is rendered into a <div> tag anyway...

<asp:Panel id="divSubmitted" runat="server" style="text-align:center" visible="false">
   <asp:Label ID="labSubmitted" runat="server" Text="Roll Call Submitted"></asp:Label>
</asp:Panel>

And in code behind, simply find the Panel control as per normal...

Panel DivCtl1 = (Panel)gvRollCall.FooterRow.FindControl("divSubmitted");
if (DivCtl1 != null)
    DivCtl1.Visible = true;

Please note that I've used FooterRow, as my "psuedo div" is inside the footer row of a Gridview control.

Good coding!

score 0 · Answer 4 · answered Oct 09 '13 at 06:58

0

You have make div as server control using following code,

<div class="tab-pane active" id="portlet_tab1" runat="server">

then this div will be accessible in code behind.

answered Oct 09 '13 at 06:58

Rajesh Subramanian

6,400
5
29
42

How? That is the question – Fandango68 Jan 08 '16 at 00:26

score 0 · Answer 5 · answered Jan 21 '19 at 10:50

0

id + runat="server" leads to accessible at the server

answered Jan 21 '19 at 10:50

Hudson

839
1
10
15

score -1 · Answer 6 · answered Oct 09 '13 at 07:03

-1

Give ID and attribute runat='server' as :

<div class="tab-pane active" id="portlet_tab1" runat="server">

//somecode Codebehind:

Access at code behind

    Control Test = Page.FindControl("portlet_tab1");
    Test.Style.Add("display", "none"); 

    or 

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

answered Oct 09 '13 at 07:03

Deep Sharma

3,374
3
29
49

Style is not an object of the Control module, for VS2005 that is – Fandango68 Jan 08 '16 at 00:28

How to select a div element in the code-behind page?

6 Answers6

Linked