How to add css and javascript to the content page when using the master page

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

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 );
}
}

In this way, on the specific page, we can add CSS reference using the following code:

Protected void Page_Load (object sender, EventArgs e)
{
ControlHelper. AddStyleSheet (this. Page, "css/projectPage.css ");
}
The benefits of this solution can be changed dynamically when the program is running, but what should we do to handle javascript Functions? 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 third solution is to add a content control to



During the day, I thought this method would not work and almost gave up. When I go home at night, I want to find a better solution, but all the articles are basically the first two. 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. Go to the design view on the Content Page and see the following interface:
This is a bit cooler, 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 to say, 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 figure was displayed:


This shows that the css application is successful, and the alert dialog box of the cute hello world test is 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, if the css application effect is not displayed in the design view, the system may give up. 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.

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.