In this article we are going to learn how to change themes dynamically in asp.net at runtime using the dropdownlist. Based on the user selection of themes in dropdownlist that particular selected theme is applied.
This article is going to cover
Step 1:
1.Open visual studio select new asp.net empty website.
2.Right click on solution explorer and add new item web form(Default.aspx).
3.Place 4 labels, 2 textboxes, one dropdownlist and one button control.
Step 2:
1.The design should look like below design.
3.Theme1 folder will be added, right click and name as default.
4.In the same way add 4 more folders of themes with names skyblue,orange,pink and red.
5.With this step your project should contain the below folder structure.
Step 3:
Default.aspx page should contain the below markup:
<body style="height: 195px; width: 555px">
<form id="form1" runat="server"><div align="center">
<asp:Label ID="Label4" runat="server" Text="Changing themes dynamically "></asp:Label>
</div>
<fieldset style="height: 149px; width: 525px">
<legend>
Login Page
</legend>
<table class="auto-style1">
<tr>
<td>
<asp:Label ID="Label1" runat="server" Text="Name"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label2" runat="server" Text="Email"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td class="auto-style2" colspan="2">
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
</td>
</tr>
<tr>
<td class="auto-style2" colspan="2" align="center">
<asp:Label ID="Label3" runat="server" Text="Select Theme"></asp:Label>
<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged" Height="23px" Width="88px">
<asp:ListItem>select</asp:ListItem>
<asp:ListItem>skyblue</asp:ListItem>
<asp:ListItem>orange</asp:ListItem>
<asp:ListItem>pink</asp:ListItem>
<asp:ListItem>red</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
</table>
</fieldset>
</form>
</body>Step 4:
Adding themes to folders
In asp.net themes can be applied to one or more pages with different choices of user like adding images, changing style of fonts, background color, by adding style sheet it made easy to apply all those attributes as a theme for asp.net pages.
1.Click on default theme folder and add new item, add stylesheet. Dont write anything in stylesheet.
2.Click on orange theme folder and add new item, add stylesheet, open the stylesheet and write below lines in it.
body
{
background-position: center;
background-color: orange;
}3.Click on skyblue theme folder and add new item, add stylesheet, open the stylesheet and write below lines in it.
body
{
background-position: center;
background-color: lightskyblue;
}Step 5:
Adding skins to folders
In asp.net skins are used to change the look and feel of asp.net controls like textbox,label,button etc.,
1.Right click pink folder and select add new item, add skin file.
2.Open skin file and write below markup.
<asp:Label runat="server" ForeColor="Pink" Font-Size="12pt" BackColor="White"/> <asp:TextBox runat="server" ForeColor="black" BackColor="Pink" Font-Size="12pt"/> <asp:Button runat="server" ForeColor="brown" BackColor="Pink" Font-Size="12pt"/>
3.Right click on red folder and select add new item, add skin file.
4.Open skin file and write below markup.
<asp:Label runat="server" ForeColor="Red" Font-Size="12pt" BackColor="White"/> <asp:TextBox runat="server" ForeColor="black" BackColor="Red" Font-Size="12pt"/> <asp:Button runat="server" ForeColor="brown" BackColor="Red" Font-Size="12pt"/>
Step 6:
Changing theme dynamically
Based on the user selection of themes from dropdownlist the theme should be changed.
In asp.net themes can be applied in the pre_init event.
Default.cs file should contain the following code.
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Page_PreInit(object sender, EventArgs e)
{
if (Session["theme"] == null)
{
Theme = "default"; //for the first time Session["theme"] does not contain any value.
}
else
{
Theme = Session["theme"].ToString(); //with in the dropdown we set name of theme in session variable, this is set when user selects his choice of theme from dropdownlist.
}
}
protected void Button1_Click(object sender, EventArgs e)
{
//AddtoDB();
}
protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
Session["theme"] = DropDownList1.SelectedItem.Value;
Server.Transfer(Request.FilePath);
}
}Step 7:
1.Set Default.aspx as startup project and press contrl+F5.
2.When the webpage is loaded first time with default theme the output will be like below.
3.When user selects orange theme from the dropdownlist, the output will be like below.
4.Now the below ouput shows how skin file has altered the asp.net controls.
Hope by reading this article one can create there own themes by adding skins and themes in asp.net.
Thanks for reading the article.
