Optimized CSS model for use with master page in asp.net 2.0

Source: Internet
Author: User
Tags define header reference
asp.net|css| optimization

ASP.net 2.0 has increased the support of the built in MasterPage, which is a great convenience for us. However, after a period of use, I found that MasterPage is not so perfect: nested MasterPage cannot support the design-time interface, as well as the question of adding CSS to the content Page mentioned below.

Usually, before 2.0, we add a CSS reference to the page syntax as follows:

<link rel= "stylesheet" href= "Css/test.css"/>

It was a very common practice. But in a MasterPage page, there's a very awkward situation: where do we put the code?

Because of the MasterPage content page, you can only define the contents of a <asp:content/> tag. We do not control the page's

At the same time, we can not put a contentplaceholder in the MasterPage

So my approach is to define a helper class as follows:

static public class Controlhelper
{
static public void Addstylesheet (Page page, string csspath)
{
Htmllink link = new Htmllink ();
Link. Href = Csspath;
Link. attributes["rel"] = "stylesheet";
Link. attributes["type"] = "text/css";
Page. HEADER.CONTROLS.ADD (link);
}
}

So, on a specific page, we can add a CSS reference to the following code:

protected void Page_Load (object sender, EventArgs e)
{
Controlhelper.addstylesheet (this. Page, "Css/projectpage.css");
}

Also, this code supports use in a specific content page, or in a nested Master page.

Here, some people may ask, why do you want to separate CSS to load it? Is it necessary? Wouldn't it be nice to have all the CSS in my pages defined in a few public CSS files?

In fact, people familiar with the Web standards of HTML production friends must know that in a more perfect state, the page's HTML and the performance of the CSS should be completely separated. Our web-standard design, in general, is to first make a positioning code for each frame div in the Master Page, as well as the header,footer part of the cosmetic code. These are for every content page to use, will be placed in a unified CSS inside. Other specific content pages, each page will have their own different content layout, decoration style, so I put each specific part of the page in its own CSS. This creates a CSS model that merges layers by layer, according to the implementation level of Master Page (nested). The advantage is that the separation of responsibilities for each CSS file is achieved and is easier to understand and maintain.

As a result of ASP.net 2.0 contact soon, the above only for the individual to explore a little experience, if there is more convenient solution, please advise your friends.







Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.