[Translation] Use topic in Asp.net 2.0

Introduction
A topic is used to define visual styles for Web pages. A Topic consists of a series of elements: skins, CSS, images, and other resources. The subject can be applied to programs, pages, or server controls.
You can create a topic by adding the app_themes folder to the solution. You can also add the skin file to achieve the goal.

Application topic
Apply a topic on a page
A topic is a property of the page class. We can set it in different ways. Once a topic is set, all the controls on the page will be displayed according to the style defined in the topic. <% PAGE Language = "C #" theme = "mytheme" %>

Apply a topic throughout the program
We can set program-level topics in Web. confi. <Configuration>
<System. Web>
<Pages theme = "mytheme"/>
</System. Web>
</Configuration>

Apply a topic to all programs on a server
We can use machine. config to specify the topics of all programs. <Pages buffer = "true" enablesessionstate = "true"
Enableviewstate = "true" enableviewstatemac = "true"
Autoeventwireup = "true" validaterequest = "true"
Enablepersonalization = "false" theme = "mytheme">
</Pages>

Remove topic
Remove a topic from a server control

Whether the topic is set to the program or page level, we can set the style of the control. <Asp: textbox id = "txttest" runat = "server" backcolor = "white" forecolor = "black" enabletheming = "false"/>

Remove a topic from a page <% PAGE Language = "C #" enabletheming = "false"

However, we can apply themes to specific server controls on the page. <Asp: textbox id = "txttest" runat = "server" enabletheming = "true" theme = "mytheme"/>

Topic and style sheet topic

You can also directly include a style sheet topic and set the topic to a style sheet topic.

<% PAGE Language = "C #" stylesheettheme = "mytheme" %>

A style sheet applies a topic to a page in the same way as a topic. the difference is that when the page contains a special server control property that is partially set, when we use the topic property, those properties will be overwritten by the topic. however, if we use the style sheet attribute to set the topic, the local attribute of the server control will not be overwritten.
Create a topic
We can create multiple themes. The elements in the theme folder can be:

A skin file
CSS file
Image

Create a skin
Skin allows us to modify the attributes of server controls that apply themes on any Asp.net page. themes can work with CSS or images. we can create a theme with a single skin, and the skin extension will always be. skin.

<Asp: Label runat = "server" forecolor = "red" font-names = "verdana" font-size = "X-small"/> <asp: textbox runat = "server forecolor =" red"
Font-names = "verdana" font-size = "X-small" borderstyle = "solid" borderwidth = "1px" bordercolor = "yellow" font-bold = "true"/>

As shown above, we need to define the style of the server control in the skin file.

Include the CSS file in the topic
We only use the skin file to provide a style for server space security. However, the Asp.net page consists of HTML controls, HTML or test. to implement their styles, you need to use CSS files in the theme folder. click the theme folder and select Add new item to create the CSS file. when we use both skin and CSS, skin has a higher priority.

Define multiple Skin options
In skin, we can create multiple styles of the same server control. We use the skinid attribute to differentiate different definitions.

<Asp: textbox runat = "server" forecolor = "blue"
Font-names = "verdana" font-size = "X-small" borderstyle = "solid" borderwidth = "1px"
Bordercolor = "red"
Font-bold = "true"/>
<Asp: textbox runat = "server" forecolor = "red"
Font-names = "verdana" font-size = "X-small" borderstyle = "dotted"
Borderwidth = "5px" bordercolor = "blue"
Font-bold = "false" skinid = "txtdotted"/>
<Asp: textbox runat = "server"
Forecolor = "yellow" font-names = "Arial" font-size = "X-large" borderstyle = "Dashed"
Borderwidth = "1px" bordercolor = "red"
Font-bold = "false" skinid = "txtdashed"/>

In the code above, the first Textbox Control does not have skinid, indicating that it will be used for the default style of textbox.

<% PAGE Language = "C #" theme = "mytheme" %>
<HTML>
<Body>
<Form ID = "frmthemetest" runat = "server">
<P>
<Asp: textbox id = "txtthemetest1"
Runat = "server"> textbox1 </ASP: textbox>
<P>
<Asp: textbox id = "txtthemetest2"
Runat = "server" skinid = "txtdotted"> textbox1 </ASP: textbox>
<P>
<Asp: textbox id = "txtthemetest3"
Runat = "server" skinid = "txtdashed"> textbox1 </ASP: textbox>
</Body>
</Html>

 
Enable the program to automatically use the topic
In the code above, the style is defined in the design phase, but we can allow the program to automatically use the topic.

Automatically assign the topic of the page

<SCRIPT runat = "server">
Protected void page_preinit (Object sender,
System. eventargs E)
{
Page. theme = request. querystring ["appliedtheme"];
}
</SCRIPT>

Automatically dispatch the skin of the control

<SCRIPT runat = "server">
Protected void page_preinit (Object sender,
System. eventargs E)
{
Txtthemetest. skinid = "txtdashed"
}
</SCRIPT>

Pictures in the topic
The topic allows us to mix actual images into the style definition. Many controls use images to present better visual effects. We need to create an image folder in the topic folder.

<Asp: Image id = "image1" runat = "server" imageurl = "images/testimage.jpg"/>

When the above Code arrives at the client, the browser automatically reads the requested image from the app_themes/mytheme/images folder (when mytheme is the selected topic)

Summary
The topic is a strong feature of Asp.net 2.0. the topic allows us to define the representation of the control only once, and can be applied throughout the program. this improvement improves the maintainability of the site and avoids unnecessary code replication for shared styles. created by jecray