Skip to content
Article

Dynamic Body ID and Class properties on ASP.NET Master Pages

Master pages are a great feature of ASP.NET. However, they do have some drawbacks, one being they do not easily offer the flexibility of dynamic body ids and classes that our design team here needs.

Luckily a solution exists, and best of all it isn’t all that difficult to implement. The solution is built around the idea that child pages can access their master page, as well as any publicly exposed properties on the master. For example, in the Page_Load method of a child page, you can write:

MyMasterPage masterPage = Master as MyMasterPage; masterPage.Property = “property value”;

This is not ideal though, because we are now committed to never changing our child’s master page; if we do, it will break our build. The correct implementation of this concept is to create an interface that all of our master pages will implement, then use that in our child pages’ Page_Load method:

IMasterPage masterPage = Master as IMasterPage; masterPage.Property = “property value”;

We can still set our property this way, only now we can later change what master page we use, as long as the new one still implements the same interface. Good stuff. So good, that it puts us most of the way there towards dynamic body ids and classes.

To get these, we need a couple of properties on our interface:

public interface IMasterPage { String BodyId { get; set; } String BodyClass { get; set; } }

Then, in the code-behind file for our actual master page:

public partial class MasterPagesDefault : MasterPage, IMasterPage { private string _bodyId; private string _bodyClass; public string BodyId { get { return _bodyId; } set { _bodyId = value; } } public string BodyClass { get { return _bodyClass; } set { _bodyClass = value;} } }

Finally, in the master page’s body tag:

<body id=”<%= BodyId %>” class=”<%= BodyClass %>”>

Now, to set these dynamically, use the child page’s Page_Load method just like before:

IMasterPage masterPage = Master as IMasterPage; if (masterPage != null) { masterPage.BodyId = “index”; masterPage.BodyClass = “index two-col”; }

By using publicly accessible properties, we give child pages the ability to set values on their master page. With this, it is easy to create dynamic body classes and ids in .NET.

The Atlantic BT Manifesto

The Ultimate Guide To Planning A Complex Web Project

Insights

Atlantic BT's Insights

We’re sharing the latest concepts in tech, design, and software development. Learn more about our findings.

Questions & Answers

What is the best web development framework?
Many people commonly ask “what is a framework in web development?” Web development frameworks can easily be confused with web development tools, languages, or parts of the web development stack (like .NET, PHP, JavaScript, or Ruby).
Learn More about What is the best web development framework?
What is the best programming language for web development?
If there was one “best” programming language, then everything else would be obsolete. The reality is that there are so many different programming languages because there is no “best” language for any situation.
Learn More about What is the best programming language for web development?
How much does web development cost?
Web development can vary from a few hundred to millions of dollars depending on what is needed. You may simply need some changes to something that already exists, or you'd like to build a large or complex application.
Learn More about How much does web development cost?
What is PHP web development?
PHP is a back end language primarily used for custom applications, content management systems (such as Wordpress), eCommerce engines (such as Magento), or even massive sites like Facebook.
Learn More about What is PHP web development?
What is the best way to become a web developer?
We get lots of questions from university students working on projects -- How do I get into web development? How long does it take to learn? How much do web developers make?
Learn More about What is the best way to become a web developer?
What is front end vs. back end development?
As web development evolved, it separated into logical specialization: front end web development and back end development. While back end development involves the server-side development, front end is the final rendering.
Learn More about What is front end vs. back end development?
What is full stack web development?
Full stack web development as a term evolved due to the separation of roles between front end and back end developers. A “full stack” developer is a developer that can work in both front end and back end technologies.
Learn More about What is full stack web development?