How to Use CSS and JavaScript For content pages when using master pages)

Source: Internet
Author: User

Because the header and bottom of the main channel page and list page of the website are the same, if you place each page in a separate page, the maintenance volume is too large when the header and bottom need to be changed. So I want to make the header and bottom into a master page, and put the specific content of the channel page and list page into the content page. In this way, you only need to modify the master page when the header and the base need to be changed.

The benefits are solved, and the problem continues. In the past, there were their respective CSS introductions and some JavaScript Functions on the channel page and list page. How do I deal with these CSS styles and JavaScript Functions on the Content Page when using the master page? As you know, the content page of the master page cannot contain the Place all CSS styles and JavaScript Functions on the I think the disadvantage of this is that the CodeTo specify the CSS file on the Content Page. The Code is as follows:

Static Public Class Controlhelper
{
Static Public Void Addstylesheet (page, String Csspath)
{
Htmllink Link = New Htmllink ();
Link. href = Csspath;
Link. attributes [ " REL " ] = " Stylesheet " ;
Link. attributes [ " Type " ] = " Text/ CSS " ;
Page. header. Controls. Add (Link );
}
}

In this way, you can addCSSReference:

Protected Void Page_load ( Object Sender, eventargs E)
{
Controlhelper. addstylesheet ( This . Page, " CSS/Projectpage. CSS " );
}

The benefits of this solution can be found inProgramHow can I dynamically change the required CSS file during runtime? Besides, is it necessary to add CSS and JavaScript that should have been added to HTML code through CS code? Therefore, this solution was quickly rejected by me. The restThe third solution is to add a content control in It sounds like this solution is the most convenient and appropriate solution. However, when I drag the contentplaceholder control to the center of

During the day, I thought this method would not work and almost gave up. If you want to find a better solution at nightArticleBasically, the first two solutions are mentioned. Some people say an error to the third solution. It seems that there are quite a few people who give up after this prompt. I did not handle this error. Go directly to the content page and insert the following code into the content page:

After reading this, there is no error on the content page. It seems that there is a drama. You can go to the design view on the Content Page and see the following interface: the heart is cool, because I didn't see the CSS style applied above. The code of my CSS file is as follows: # Content
{
Text-align: center;
Width: 200px;
Height: 100px;
Background-color: #00ff00;
Color: # ff0000;
Font-size: 12px;
} That is, set the DIV with ID as content to PX in width, PX in height, center the text, green in background color, red in font, and 12px in font. Unwilling to do so, I pressed the F5 debugging key, and a surprising screen was displayed: This shows that the CSS application was successful, and the lovely Hello World dialog box alert was displayed. Successful! To sum up, many people have come up with the same idea as me. I want to use the simplest method to implement the CSS and JavaScript Functions on the Content Page. Many of them may also find the article I found, but when they encounter an error message on my master page, they give up. Maybe someone sticks to the second step, however, the CSS application effect may be abandoned even if it is not seen in the design view. In fact, you just need to stick to it and it will succeed! Yu Shiwei said, "If you think more than others, you can succeed !", It makes sense. Source: http://hi.baidu.com/flydragon1978/blog/item/e9d9b722d6f4f1f1d6cae2ed.html
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.