This article will show you how you can how you can change
the page background dynamically on the bases of role. In this article I will
show you how you can change the background image of the page on selection of
role from dropdown list. In this I have placed the dropdown list on masterpage
of the project.
Some of my previous articles are as follows: GridView
Export to Word Document (.doc/.docx) in Asp.Net Using C#.Net, GridView
- Delete Selected Row Record From DataBase On Button Click in Asp.net Using
C#.Net, Ajax
Login Form In Asp.Net Using C#.Net and VB.Net Without PostBack.
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="PageBackground.SiteMaster"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en">
<head runat="server">
<title> Dynamically
Change Page/Master Page background Image in Asp.Net Using C#
</title>
<link href="~/Styles/Site.css" rel="stylesheet"
type="text/css"
/>
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
<body style="background-image:
url(<%= backgroundImage %>)">
<form runat="server">
<div class="page">
<div class="header">
<div class="title">
<h1>
My ASP.NET Application
</h1>
</div>
<div class="loginDisplay">
<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True"
onselectedindexchanged="DropDownList1_SelectedIndexChanged">
<asp:ListItem Value="1">Admin</asp:ListItem>
<asp:ListItem Value="2">User</asp:ListItem>
</asp:DropDownList>
</div>
<div class="clear hideSkiplink">
</div>
</div>
<div>
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</div>
<div class="clear">
</div>
</div>
<div class="footer">
</div>
</form>
</body>
</html>
|
Now just check the body tag of the above code. In this tag I
have added background-image with a public variable whose value we change on the
dropdown list index change.
<body style="background-image:
url(<%= backgroundImage %>)">
|
So here is the code of master page.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
namespace PageBackground
{
public partial class SiteMaster : System.Web.UI.MasterPage
{
public
string backgroundImage = "";
protected
void Page_Load(object
sender, EventArgs e)
{
}
protected
void DropDownList1_SelectedIndexChanged(object sender, EventArgs
e)
{
if
(DropDownList1.SelectedValue == "1")
{
backgroundImage = "image/Chrysanthemum.jpg";
}
else
{
backgroundImage = "image/Desert.jpg";
}
}
}
}
|
Now run the application to check the output.
OUTPUT 1
OUTPUT 2
DOWNLOAD
About the Author
this way of doing it makes 5 warnings to appear. a better way is making a method in master code (Cs file) and calling this method from childs.
ReplyDelete