<%--
Default skin template. The following skins are provided as examples only.
1. Named control skin. The SkinId should be uniquely defined because
duplicate SkinId's per control type are not allowed in the same theme.
<asp:GridView runat="server" SkinId="gridviewSkin" BackColor="White" >
<AlternatingRowStyle BackColor="Blue" />
</asp:GridView>
2. Default skin. The SkinId is not defined. Only one default
control skin per control type is allowed in the same theme.
<asp:Image runat="server" ImageUrl="~/images/image1.jpg" />
In the same way create the MyRedSkin skin file in the
Red Theme Folder.
Now let us add one web page and name the same as
StyleSheetDemo.aspx. In the page we add one label control, name it as label1 and
one textbox control name it as TextBox1.
The page will look like Figure 3.
Figure 3 - The Style Sheet Demo Page for the Theme
Now we will add some code in the MyBlueSkin skin file
which we created earlier.
The code will be as follows:
<
asp:Label
runat="server"
backcolor="blue"
forecolor="red"
font-size="xx-large"
font-names="arial"
/>
<asp:TextBox
runat="server"
backcolor="cyan"
forecolor="blue"
font-size="xx-large"
font-names="arial"
/>
Now double-click the web.config file and put a section
as follows:
<?
xml
version="1.0"?>
<configuration>
<appSettings/>
<connectionStrings/>
<system.web>
<compilation
debug="false"
strict="false"
explicit="true"
/>
<pages
theme
="Blue
Theme"
/>
<authentication
mode="Windows"
/>
</system.web>
</configuration>
Now save the web.config and put a little code in
Page_Load Method of the StyleSheetDemo.aspx
Protected
Sub
Page_Load(ByVal
sender As
Object,
ByVal
e As
System.EventArgs)
Handles
Me.Load
If
Not
Page.IsPostBack Then
Label1.Text =
"Theme demo"
TextBox1.Text
= "My Blue Theme"
End
If
End
Sub
Now run the page by right clicking it and selecting
View in Browser. The page will be like Figure 4:
Figure 4 - The Themed Web Page
Now in the same way add a skin file in the Red Theme
folder and name it as MyRedSkin.skin. Then add the following code in the skin
file.
<
asp:Label
runat="server"
backcolor="red"
forecolor="blue"
font-size="small"
font-names="arial"
/>
<asp:TextBox
runat="server"
backcolor="blue"
forecolor="white"
font-size="small"
font-names="arial"
/>
Change the web.config file as follows:
<
configuration>
<appSettings/>
<connectionStrings/>
<system.web>
<compilation
debug="false"
strict="false"
explicit="true"
/>
<pages
theme
="Red
Theme"
/>
<authentication
mode="Windows"
/>
Now run the page in the browser and will find the
similar result as in Figure 5.
Figure 5 - Results of web.config change
With the profile you can allow the user to select the
themes.
We will create another demo web site to see the same.
Open Visual Studio 2005 or Visual Web developer 2005
Express and select Open Web Site. Click the new folder Icon and type in
ProfileandThemes (see Figure 6) and then click Open. This will create an empty
web site, where we can put anything as we wish.
Figure 6 - Creating a new folder for a Web site.
Now we will put a web.config into the we site by
right-click the web folder and then selecting Add New Items. In the dialog box
(see Figure 7) select Web Configuration File and click add.
Figure 7 - The Add New Item Dialog
Delete the content of the web.config file to match up
what is displayed in Figure 8.
Figure 8 - The web.config file
Now put the following code between <system.web> </system.web>
<
anonymousIdentification
enabled
="true"
/>
<profile>
<properties>
<add
name="UserName"
defaultValue="MyUserName"
allowAnonymous
="true"/>
</properties>
</profile>
Now create a web page and name it as ProfileTheme.aspx
Set the page as shown in Figure 9.
Figure 9 - Creating a page with a label and theme.
Now add another page and name it as Settings.aspx In
the source view mode of the ProfileTheme.aspx, type in the following code just
after the label control.
<
strong>Welcome</strong>
<asp:Label
ID="Label1"
runat="server"
Text="Label"
Width="208px"
Font-Bold="True"></asp:Label>
<a
href="Settings.aspx">Settings.aspx</a>
This create as hyperlink for the settings page in the
profilethemes page.
Now put some controls in the settings page. The page
should look like Figure 10:
Figure 10 - Settings.aspx page with textbox and Save
button.
Now we need to put some code. Double click the Button
and in the click event write the following code:
Protected
Sub
Button1_Click(ByVal
sender As
Object,
ByVal
e As
System.EventArgs)
Profile.UserName = TextBox1.Text
Response.Redirect(
"ProfileTheme.aspx")
End
Sub
Mdify the ProfileTheme.aspx page and add a textbox
control there. And add a little bit of code in the page load event:
Protected
Sub
Page_Load(ByVal
sender As
Object,
ByVal
e As
System.EventArgs)
If
Not
Page.IsPostBack Then
Label1.Text =
Profile.UserName
TextBox1.Text =
"Themes with Profiles"
End
If
End
Sub
Now create the two themes in the same way we discussed
earlier. This because in this demo I am going to use the same themes. Now in the
web.config file add the following property:
<
profile>
<properties>
<add
name="UserName"
defaultValue="MyUserName"
allowAnonymous
="true"/>
<add
name
="MyThemes"
defaultValue
="Blue
Theme"
allowAnonymous
="true"
/>
</properties>
</profile>
And we will make some more changes in the Settings page
now, to allow the user to select a theme. Add a dropdowncombo and Enter the
theme names in the items box. The page should look like Figure 11:
Figure 11 - Page now with DropDownCombo control added.
Add the following code in the Page load event of the
settings page:
Protected
Sub
Page_Load(ByVal
sender As
Object,
ByVal
e As
System.EventArgs)
If
Not
Page.IsPostBack Then
DropDownList1.Items.FindByValue(Profile.MyThemes).Selected =
True
End
If
End
Sub
And also modify the Click Event of the Save button.
Protected
Sub
Button1_Click(ByVal
sender As
Object,
ByVal
e As
System.EventArgs)
Profile.UserName = TextBox1.Text
Profile.MyThemes = DropDownList1.SelectedValue
Response.Redirect("ProfileTheme.aspx")
End
Sub
In the ProfileThemes.aspx page add the following code:
Protected
Sub
Page_PreInit(ByVal
sender As
Object,
ByVal
e As
System.EventArgs)
Page.Theme = Profile.MyThemes
End
Sub
Now run the application. This will create a SQL SERVER
database file automatically and will store all the information regarding a User
Profile.
So whenever the user log on to the website, he will
find his settings intact (see Figure 12).
Figure 12 - Final page
In this demo I have used lot of modifications in the
source and code. This could have been avoided. But If you follow all the steps
and at any point of time try to test the application you can do that. I have
also included some overview about the profiles to make you understand how the
user settings area stored.