In ASP. before the emergence of NET 2.0, It was a heavy task to provide the theme change function for the website, you must change the corresponding pictures, fonts, webpage styles, and other small elements on the page.CodeIn addition to writing, standard management of resources is required. In the early stages of website preparation, if you do not have some experience, it is difficult to fully consider the detailed classification and placement of resource files. This eventually leads to a large number of migration and changes during the website revision process, which may cause file loss.
All these concerns have been well resolved in ASP. NET 2.0. First, you can implement complex functions through simple code writing. Second, Asp. NET 2.0 provides a clear directory structure when dealing with theme issues, so that the hierarchical relationship between resource files is very clear, while easy to find and manage, it also provides good scalability.
Next let's use a demo to learn about the new features of ASP. NET 2.0.
1. Create a topic Folder:
In the ApplicationProgramRight-click the root directory of, and click the theme folder option under add folder. An empty folder named app_themes will appear in the root directory, all resource files related to topics are stored in this folder.
In this example, select different colors to differentiate themes. You need to create two folders named by color in the theme folder (app_themes.
Operation Method: Right-click the app_themes folder and move the mouse to the Add folder option. It is found that there is only one type of theme folder added to the topic folder (app_themes:
Create two theme folders named bluetheme and porpletheme respectively.
Apply the theme bluetheme to the page:
| <%@Page comment AGE ="C #"Stylesheettheme="Bluetheme"%> |
3. Add the skin file to each topic separately:
The skin file actually contains the format settings applied to the topic. A topic can contain one or more skin files. This does not matter, because when a topic is applied to a page, ASP. NET Framework combines multiple skin files under a topic and treats these files as a skin file.
You can name the skin file as needed. In the file, you can set one or more properties in the control by declaring an instance of a control, in this way, the skin file is used to specify the control appearance. (Note: not all attributes can be set. Most attributes can be set as appearance attributes ).
In this example, a new control. Skin file is created in the theme bluetheme, and some attributes of the three controls are set in the file.
<ASP:Textbox
Backcolor= "# C4d4e0"
Forecolor= "# 0b Prefix = "ST1"?> 12c 6"
Runat= "Server" />
<ASP:Label
Forecolor= "# 0b 12c 6"
Runat= "Server" />
<ASP:Button
Backcolor= "# C4d4e0"
Forecolor= "# 0b 12c 6"
Runat= "Server" /> |
The page code is as follows:
| <Body> <Form ID = "form1" runat = "server"> <Table width = "100%" cellpadding = "0" cellspacing = "0" border = "0"> <Tr> <TD Height = "23px" colspan = "2"> </TD> </Tr> <Tr> <TD align = "center" Height = "50px"> <Asp: Label id = "label1" runat = "server" text = "enter your name:"> </ASP: Label> </TD> <TD> <Asp: textbox id = "textbox2" runat = "server"> </ASP: textbox> </TD> </Tr> <Tr> <TD align = "center" Height = "50px"> <Asp: Label id = "label2" runat = "server" text = "Enter your nickname:"> </ASP: Label> </TD> <TD> <Asp: textbox id = "textbox1" runat = "server"> </ASP: textbox> </TD> </Tr> <Tr> <TD align = "center" Height = "50px"> <Asp: button id = "button1" runat = "server" text = "OK"/> </TD> <TD> <Asp: button id = "button2" runat = "server" text = "cancel"/> </TD> </Tr> <Tr> <TD Height = "23px" colspan = "2"> </TD> </Tr> <Tr> <TD colspan = "2"> <br/> </TD> </Tr> </Table> </Form> </Body> |
The page effect is as follows:
4. Use the CSS file for more detailed settings:
For a set of skin settings, we not only need to set the controls in the web page, but also should make any modifications to any display element in the web page, at this time, we can achieve this by controlling the CSS style sheet file.
In this example, the new file default.css is created in the theme bluetheme. In this file, the body, table, and TD elements in the page are set.
| Body {Margin: 0; padding: 0; overflow: hidden ;} . Tablestyle . Tdstyle |
After some Page code is changed and the CSS style is called, the effect is as follows:
5. Dynamic topic switching:
Add a drop-down box in default. aspx on the foreground page to select a topic.
| <Tr> <TD colspan = "2"> <Br/> you can select the page subject here: <Asp: dropdownlist id = "choosetheme" runat = "server" autopostback = "true"> <Asp: listitem value = "bluetheme"> select a color </ASP: listitem> <Asp: listitem value = "bluetheme"> blue </ASP: listitem> <Asp: listitem value = "porpletheme"> purple </ASP: listitem> </ASP: dropdownlist> <Br/> </TD> </Tr> |
In the background page default. aspx. CS, add code to replace the newly selected topic every time you refresh the page.
| Protected void page_preinit (Object sender, system. eventargs E) { Page. theme = request ["choosetheme"]; } |
Click the option in the drop-down box to change the topic after refreshing the page. For example, switch the blue topic to a purple topic. The effect is as follows:
The above is the theme feature added in ASP. NET 2.0. With this feature, we can not only quickly apply a variety of appearances to the entire web application. You can also easily expand and maintain your website.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
