change element id - SQL Server Forums

Please start any new threads on our new site at https://forums.sqlteam.com. We've got lots of great SQL Server experts to answer whatever question you can come up with.

All Forums

Development Tools

ASP.NET

change element id

Author

Topic

-Dman100-
Posting Yak Master

210 Posts

Posted - 2006-07-25 : 22:54:17

This isn't a .NET database question, but I hope someone might be able to help as I'm new to .net programming.

I have a master page with a container div (id ="container") that I use for a single column layout. I also have a nested master page for pages that require a two-column layout.

I'm using the css faux-column design to tile a background image vertically the full length of my container div. I only need the faux-column styles applied to the container div when I'm using the two-column layout (my nested master page).

I was trying to programmatically change the id of the div for the nested master page, but haven't been successful. My idea was to change the id of the div to "container2" for the nested master page and in my master page the id of div would remain "container".

This way, I maintain one stylesheet.
The div id "container2" would use the css markup for the faux-column
The div id "container" would exclude those styles.

I was wondering if anyone knew how to accomplish this or another method to achieve the same goal?

I've been googling, but coming up empty. I'm just learning asp.net so I might not be looking in the right place.

Any help is appreciated.

dfiala
Posting Yak Master

116 Posts

Posted - 2006-07-25 : 23:09:58

Check out http://groups.yahoo.com/group/AspNet2/
http://groups.yahoo.com/group/AspNetAnyQuestionIsOk

Why do you need to change it programmatically? From what you describe it sounds like you have two static cases and you can just set the names.

Dean Fiala
Very Practical Software, Inc
Now with Blogging...
http://www.vpsw.com/blogbaby
Microsoft MVP

-Dman100-
Posting Yak Master

210 Posts

Posted - 2006-07-25 : 23:23:42

Dean thanks for replying to my post and the links to the yahoo groups.

I'm not sure what you mean by setting the names?

My master page is as follows:

<%@ Master Language="C#" %>
<%@ Register Src="../UserControls/TopNavigationBar.ascx" TagName="TopNavigationBar"
TagPrefix="uc2" %>
<%@ Register Src="../UserControls/searchform.ascx" TagName="searchform" TagPrefix="uc1" %>
<%@ Register Src="../UserControls/MainNavigationBar.ascx" TagName="MainNavigationBar" TagPrefix="uc3" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Educational Software Solutions - Student, Curriculum Assessment & Management :: CompassLearning</title>
<link href="../styles.css" rel="stylesheet" type="text/css" />
<style type="text/css">
h5 {margin: 10px 0px 0px 0px; }
</style>
</head>
<body>
<form id="Form1" runat="server">
<div id="container">
<div id="topnav">
additional element and user controls...etc., etc., etc.
<div id="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>

My nested master page is:

<%@ Master Language="C#" MasterPageFile="~/Templates/SiteMaster.master" AutoEventWireup="true" CodeFile="TwoColumnMaster.master.cs" Inherits="TwoColumnMaster" %>
<%@ Register Src="../UserControls/LeftNavigationBar.ascx" TagName="LeftNavigationBar" TagPrefix="uc1" %>
<asp:content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<div id="leftcolumn">
<asp:ContentPlaceHolder id="LeftColumn" Runat="Server" />
<uc1:LeftNavigationBar ID="LeftNavigationBar1" runat="server" />
</div>
<div id="rightcolumn">
<asp:ContentPlaceHolder id="RightColumn" Runat="Server" />
</div>
</asp:content>

The div in the master page is set to id="container"

When I create content pages for a nested master, it automatcially inherits the master page layout, so <div id="container"> is used.

I might not understand correctly, can you explain?

dfiala
Posting Yak Master

116 Posts

Posted - 2006-07-25 : 23:55:45

I see now.

Don't think that changing the ID is the way to go.

You'd be better off setting a class.
<div id="Container" runat="server" class="SomeCssClass">

then in code for pages when you want to change the class...
HtmlControl div = this.Master.FindControl("Container");
div.Attributes["class"] = "SomeOtherCssClass";

Dean Fiala
Very Practical Software, Inc
Now with Blogging...
http://www.vpsw.com/blogbaby
Microsoft MVP

dfiala
Posting Yak Master

116 Posts

Posted - 2006-07-25 : 23:56:22

Should be
HtmlControl div = (HtmlControl)this.Master.FindControl("Container");

Dean Fiala
Very Practical Software, Inc
Now with Blogging...
http://www.vpsw.com/blogbaby
Microsoft MVP

-Dman100-
Posting Yak Master

210 Posts

Posted - 2006-07-26 : 10:41:33

Dean,

I give your suggestion a try this morning and received the following error message:

'NullReferenceException was unhandled by the usercode'

the error occurred on the following line:

public partial class privacy : BasePage
{
protected void Page_Load(object sender, EventArgs e)
{
HtmlControl div = (HtmlControl)this.Master.FindControl("container");
div.Attributes["class"] = "FauxColumns";
}
}

dfiala
Posting Yak Master

116 Posts

Posted - 2006-07-26 : 10:46:31

does your div tag in master page look like this:

<div id="container" runat="server" class="SomeClass" >

?

Dean Fiala
Very Practical Software, Inc
Now with Blogging...
http://www.vpsw.com/blogbaby
Microsoft MVP

-Dman100-
Posting Yak Master

210 Posts

Posted - 2006-07-26 : 10:58:39

this is the div element in my master page:

<div id="container" runat="server" class="noFauxColumns">

dfiala
Posting Yak Master

116 Posts

Posted - 2006-07-26 : 11:04:03

What is null? The div object or the class attribute.

Dean Fiala
Very Practical Software, Inc
Now with Blogging...
http://www.vpsw.com/blogbaby
Microsoft MVP

-Dman100-
Posting Yak Master

210 Posts

Posted - 2006-07-26 : 11:18:05

Based on the error message, I believe it is the div object that is null.

'object reference not set to an instance of an object'

This is a stupid question, but how do I check whether the object or class attribute is null to be certain?

dfiala
Posting Yak Master

116 Posts

Posted - 2006-07-26 : 11:25:51

Stepping through the code in the IDE and using the immediate window is the sure fire way. You can also use the Locals window.

My bet is that your div contained in some other control on the master page. When I tested this night, I just threw up a simple master and demo page.

While you are stepping through, iterate through the controls in this.Master.Controls and see if you can find the div's parent control. Then you can do something like this in your code.

HtmlControl div = (HtmlControl)this.Master.FindControl("SomeParent").FindControl("container");

Dean Fiala
Very Practical Software, Inc
Now with Blogging...
http://www.vpsw.com/blogbaby
Microsoft MVP

dfiala
Posting Yak Master

116 Posts

Posted - 2006-07-26 : 11:27:29

PS. You can also trace the page output to see the control tree and see where your div is.

Dean Fiala
Very Practical Software, Inc
Now with Blogging...
http://www.vpsw.com/blogbaby
Microsoft MVP

-Dman100-
Posting Yak Master

210 Posts

Posted - 2006-07-26 : 11:49:07

I'm trying to figure out how to work the immediate window and debug this.

Also, does the <div id="containter"> tag specifically have to have a runat="server" property?

dfiala
Posting Yak Master

116 Posts

Posted - 2006-07-26 : 12:03:26

?div

will print out the info about div if it exists

or will show an exception

YES -- you need runat="server" otherwise your code cannot see and manipulate the object. It would not be available to any server side code if you remove this tag

Dean Fiala
Very Practical Software, Inc
Now with Blogging...
http://www.vpsw.com/blogbaby
Microsoft MVP

-Dman100-
Posting Yak Master

210 Posts

Posted - 2006-07-26 : 12:14:45

?div showed null in the immediate window

Watch window:
div null System.Web.UI.HtmlControls.HtmlControl
null null <null>
<null> Invalid expression term '<'

Locals window:
+ this {ASP.privacy_aspx} privacy {ASP.privacy_aspx}
+ sender {ASP.privacy_aspx} object {ASP.privacy_aspx}
+ e {System.EventArgs} System.EventArgs
div null System.Web.UI.HtmlControls.HtmlControl

the reason I asked about the runat property was because when I added it to the div tag, some of my styles got messed up? If I remove the runat property from the div, the styles work. Not sure why that happened. It didn't mess up all my styles just a few.

dfiala
Posting Yak Master

116 Posts

Posted - 2006-07-26 : 12:41:48

so,yes, your code is not finding the div element. You will need to investigate the control tree to find it as I discussed earlier.

the reason the styles are changed is that .NET alters the client ID of the control at run time to include names of containing controls. If you are doing name based styling, this will be affected.

Dean Fiala
Very Practical Software, Inc
Now with Blogging...
http://www.vpsw.com/blogbaby
Microsoft MVP

-Dman100-
Posting Yak Master

210 Posts

Posted - 2006-07-26 : 12:55:26

quick question, how do I trace the page output?

dfiala
Posting Yak Master

116 Posts

Posted - 2006-07-26 : 12:58:24

quick and dirty -- http://msdn.microsoft.com/library/default.asp?url=/library/en-us/cpguide/html/cpcondisplayingtracemessagesonpage.asp

Dean Fiala
Very Practical Software, Inc
Now with Blogging...
http://www.vpsw.com/blogbaby
Microsoft MVP

-Dman100-
Posting Yak Master

210 Posts

Posted - 2006-07-26 : 13:05:03

Okay, I got it...

__Page ASP.privacy_aspx 32575 0 0
ctl00 ASP.templates_twocolumnmaster_master 32575 0 0
ctl00$ctl00 ASP.templates_sitemaster_master 32575 0 0
ctl00$ctl00$ctl02 System.Web.UI.LiteralControl 152 0 0
ctl00$ctl00$Head1 System.Web.UI.HtmlControls.HtmlHead 599 0 0
ctl00$ctl00$ctl00 System.Web.UI.HtmlControls.HtmlTitle 67 0 0
ctl00$ctl00$ctl01 System.Web.UI.HtmlControls.HtmlLink 59 0 0
ctl00$ctl00$ctl03 System.Web.UI.LiteralControl 70 0 0
ctl00$ctl00$ctl04 System.Web.UI.LiteralControl 10 0 0
aspnetForm System.Web.UI.HtmlControls.HtmlForm 31794 0 0
ctl00$ctl00$ctl05 System.Web.UI.LiteralControl 6 0 0
ctl00$ctl00$container System.Web.UI.HtmlControls.HtmlGenericControl 25028 0 0
etc., etc.,

dfiala
Posting Yak Master

116 Posts

Posted - 2006-07-26 : 13:14:08

Just out of curosity, try this:

HtmlControl div = (HtmlControl)this.Master.Master.FindControl("container");

Dean Fiala
Very Practical Software, Inc
Now with Blogging...
http://www.vpsw.com/blogbaby
Microsoft MVP

-Dman100-
Posting Yak Master

210 Posts

Posted - 2006-07-26 : 13:29:12

Using the following code:

public partial class privacy : BasePage
{
protected void Page_Load(object sender, EventArgs e)
{
HtmlControl div = (HtmlControl)this.Master.FindControl("container");
//div.Attributes["class"] = "FauxColumns";
}
}

The page ran fine.

Here is the trace output:

__Page ASP.privacy_aspx 32575 0 0
ctl00 ASP.templates_twocolumnmaster_master 32575 0 0
ctl00$ctl00 ASP.templates_sitemaster_master 32575 0 0
ctl00$ctl00$ctl02 System.Web.UI.LiteralControl 152 0 0
ctl00$ctl00$Head1 System.Web.UI.HtmlControls.HtmlHead 599 0 0
ctl00$ctl00$ctl00 System.Web.UI.HtmlControls.HtmlTitle 67 0 0
ctl00$ctl00$ctl01 System.Web.UI.HtmlControls.HtmlLink 59 0 0
ctl00$ctl00$ctl03 System.Web.UI.LiteralControl 70 0 0
ctl00$ctl00$ctl04 System.Web.UI.LiteralControl 10 0 0
aspnetForm System.Web.UI.HtmlControls.HtmlForm 31794 0 0
ctl00$ctl00$ctl05 System.Web.UI.LiteralControl 6 0 0
ctl00$ctl00$container System.Web.UI.HtmlControls.HtmlGenericControl 25028 0 0

Next Page

Subscribe to SQLTeam.com

SQLTeam.com Articles via RSS

SQLTeam.com Weblog via RSS

- Advertisement -

Resources