[RESOLVED]change background pattern and color based on user choice

hi all,

please see link below:

http://gooshidan.ir/index.php?route=common/home

as you can see, there’s a button in top left of the page.
by clicking it user can see some colors and patterns.
as soon as user select one pattern, she can see that pattern in background without page refresh
then by clicking on apply button, the pattern will be fixed in all pages

how can do it in asp.net?

thanks a lot!

There are likely a few things going on here : 

  • The initial changes are simply handled through Javascript or jQuery. When you select a particular color from the set of colors, a Javascript call is made to set the current background to the color that was selected.
  • As far as persisting the changes, the site is likely creating some form of temporary storage like a Cookie that contains the users preferences. When the page is initially loaded, the cookie (or other type of value) is read and the appropriate background
    is set within the code behind.

Changing the Color through the Client-Side

The first part of this can easily be demonstrated through a simple jQuery example. We will use a drop-down list populated with a few different colors and allow the user to select one and then apply that particular color to the site :

<head>
<!-- Example jQuery Reference -->
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!-- Example jQuery Script to handle your event -->
<script type='text/javascript'>
  $(function(){
       // When a color is chosen, set it as the background for this page
       $("#color").change(function(){
          // Set the background to that color
          $("body").css('background', $(this).val());
       });
  });
</script>
</head>
<body>
  <!-- A Drop down list with a collection of colors -->
  <select id='color'>
    <!-- Notice the value properties will be the actual background values to use (e.g colors or URL values) -->
    <option value='initial'>Normal</option>
    <option value='red'>Red</option>
    <option value='yellow'>Yellow</option>
    <option value='blue'>Blue</option>
  </select>
</body>

You can see a simple working example of this here.

The Second Part : Maintaining the Color

We will slightly alter the previous example in order to maintain the color of the site as follows. We can change the previous example to a more ASP.NET friendly example using a DropDownList Control with several colors and we will add a Button to "Apply"
the color :

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ColorPersistance.aspx.cs" Inherits="WebMethodExample.ColorPersistance" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Color Persistance</title>
    <!-- Example jQuery Reference -->
    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
    <!-- Example jQuery Script to handle your event -->
    <script type='text/javascript'>
        $(function () {
            // When a color is chosen, set it as the background for this page
            $("#<%= Color.ClientID %>").change(function () {
                // Set the background to that color
                $("body").css('background', $(this).val());
            });
        });
    </script>
</head>
<body id="body" runat="server">
    <form id="form1" runat="server">
        <!-- A Drop down list with a collection of colors -->
        <asp:DropDownList ID="Color" runat="server">
            <asp:ListItem Value="initial">Normal</asp:ListItem>
            <asp:ListItem Value="red">Red</asp:ListItem>
            <asp:ListItem Value="yellow">Yellow</asp:ListItem>
            <asp:ListItem Value="blue">Blue</asp:ListItem>
            <asp:ListItem Value="url('http://www.webdesign.org/img_articles/1078/bg1.jpg')">Pattern</asp:ListItem>
        </asp:DropDownList>

        <!-- A Button to apply the pattern -->
        <asp:Button ID="ApplyPattern" runat="server" Text="Apply" OnClick="ApplyPattern_Click" />
    </form>
</body>
</html>

Now this should work as expected, however we will just need to add a bit more code to store the current pattern within the cookie and apply it if it exists when the page is loaded. So just go into your code-behind and look into the ApplyPattern_Click event
:

protected void ApplyPattern_Click(object sender, EventArgs e)
{
            // A color was selected, so create a Cookie that will persist the value
            HttpCookie colorCookie = new HttpCookie("Color", Color.SelectedValue);
            // Add the cookie to the Response
            Response.SetCookie(colorCookie);

            // Navigate back to the current page (to trigger the cookie read from an initial page load)
            Response.Redirect(Request.Path);
}

And finally set a few properties to use the Cookie value when your page is loaded :

protected void Page_Load(object sender, EventArgs e)
{
            // When the page loads, check if the Cookie exists, if so set the DropDown choice and the background
            if(!IsPostBack && Request.Cookies.Get("Color") != null)
            {
                // The cookie was found, get the value
                var color = Request.Cookies.Get("Color").Value;

                // Select the appropriate Dropdown item
                Color.SelectedIndex = Color.Items.IndexOf(Color.Items.FindByValue(color));

                // Set the background
                body.Style["background"] = color;
            }
}

A complete example can be seen below :

ColorPersistance.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ColorPersistance.aspx.cs" Inherits="ColorPersistanceExample.ColorPersistance" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Color Persistance</title>
    <!-- Example jQuery Reference -->
    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
    <!-- Example jQuery Script to handle your event -->
    <script type='text/javascript'>
        $(function () {
            // When a color is chosen, set it as the background for this page
            $("#<%= Color.ClientID %>").change(function () {
                // Set the background to that color
                $("body").css('background', $(this).val());
            });
        });
    </script>
</head>
<body id="body" runat="server">
    <form id="form1" runat="server">
        <!-- A Drop down list with a collection of colors -->
        <asp:DropDownList ID="Color" runat="server">
            <asp:ListItem Value="initial">Normal</asp:ListItem>
            <asp:ListItem Value="red">Red</asp:ListItem>
            <asp:ListItem Value="yellow">Yellow</asp:ListItem>
            <asp:ListItem Value="blue">Blue</asp:ListItem>
            <asp:ListItem Value="url('http://www.webdesign.org/img_articles/1078/bg1.jpg')">Pattern</asp:ListItem>
        </asp:DropDownList>

        <!-- A Button to apply the pattern -->
        <asp:Button ID="ApplyPattern" runat="server" Text="Apply" OnClick="ApplyPattern_Click" />
    </form>
</body>
</html>

ColorPersistance.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace ColorPersistanceExample
{
    public partial class ColorPersistance : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            // When the page is being rendered, check if the Cookie exists, if so set the DropDown choice and the background
            if (!IsPostBack && Request.Cookies.Get("Color") != null)
            {
                // The cookie was found, get the value
                var color = Request.Cookies.Get("Color").Value;

                // Select the appropriate Dropdown item
                Color.SelectedIndex = Color.Items.IndexOf(Color.Items.FindByValue(color));

                // Set the background
                body.Style["background"] = color;
            }
        }

        protected void ApplyPattern_Click(object sender, EventArgs e)
        {
            // A color was selected, so create a Cookie that will persist the value
            HttpCookie colorCookie = new HttpCookie("Color", Color.SelectedValue);

            // Add the cookie to the Response
            Response.SetCookie(colorCookie);

            // Explicitly reset the page
            Response.Redirect(Request.Path);
        }
    }
}

Leave a Reply