vs2015 dynamicweb7-8 主题样式换肤的使用

项目根目录新建文件夹App_Themes，其下新建2个文件夹，分别为Blue，Green，

然后对两个文件夹，各自新增 .skin .css文件。

blue中

skinfile1.skin

<asp:TextBox runat="server" BackColor="#99ccff" ForeColor="#6666ff" />
<asp:TextBox runat="server" SkinID="txtYellow" BackColor="LightYellow" />
<asp:Button runat="server" BackColor="#99ccff" ForeColor="#6666ff" BorderColor="#000066" BorderStyle="Solid" BorderWidth="1px" />

stylesheet1.css

body {
    background-color:#ecf0ff;
}

#top {
    background:url("") center center no-repeat;
    background-color:lightblue;
}

#left {
    background:url("") center center no-repeat;
    background-color:lightblue;
}

#footer {
    background-color:lightblue;
}

Green中

skinfile2.skin

<asp:TextBox runat="server" BackColor="#ccffcc" ForeColor="666699" />
<asp:TextBox runat="server" SkinId="txtYellow" BackColor="yellow" />
<asp:Button runat="server" BackColor="#ccffcc" ForeColor="666699" BorderColor="#336600" BorderStyle="Solid" BorderWidth="1px" />

stylesheet2.css

body {
    background-color:#eafcfe;
}

#top {
    background:url("") center center no-repeat;
    background-color:green;
}

#left {
    background:url("") center center no-repeat;
    background-color:green;
}

#footer {
    background-color:green;
}

创建母版页

masterpage.master

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="MasterPage1.master.cs" Inherits="dynamicweb7_8.MasterPage1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        #top {
            width:100%;
            height:150px;
            border:1px solid #cccccc;
        }
        #mid {
            width100%;
            min-height:560px;
            border:1px solid #cccccc;
        }
        #mid #left {
            width:180px;
            height:560px;
            float:left;
            border:1px solid #cccccc;
        }
        #mid #main {
            min-width:800px;
            height:auto;
            float:left;
        }
        #footer {
            width:100%;
            height:80px;
            border:1px solid #cccccc;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div id="top">
            <center><h4>Banner</h4></center>
        </div>
        <div id="mid">
            <div id="left">
                <ul>
                    <li><a href="WebForm1.aspx">首页</a></li>
                    <li><a href="WebForm1.aspx">首页</a></li>
                    <li><a href="WebForm1.aspx">首页</a></li>
                    <li><a href="WebForm1.aspx">首页</a></li>
                </ul>
            </div>
            <div id="main">
                <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

                </asp:ContentPlaceHolder>
            </div>
        </div>
        <div id="footer">
            <center><h4>footer</h4></center>
        </div>
    </form>
</body>
</html>

创建内容页

扫描二维码关注公众号，回复： 13118747 查看本文章

webform1.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="dynamicweb7_8.WebForm1" MasterPageFile="~/MasterPage1.Master" %>
<asp:Content ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div>
        选择风格：
        <asp:DropDownList ID="ddlTheme" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddlTheme_SelectedIndexChanged">
            <asp:ListItem Value="Blue">蓝色海洋</asp:ListItem>
            <asp:ListItem Value="Green">绿色春天</asp:ListItem>
        </asp:DropDownList>
    </div>
    <table style="border:1px solid #cccccc;background-color:white;width:300px;height:200px;text-align:center;">
        <tr>
            <td>
                用户名：
            </td>
            <td>
                <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td>
                密码：
            </td>
            <td>
                <asp:TextBox ID="TextBox2" runat="server" TextMode="Password"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <asp:Button ID="Button1" runat="server" Text="登录" />
            </td>
        </tr>
        <tr>
            <td colspan="2">
                单独指定主题：<asp:TextBox ID="TextBox3" runat="server" SkinID="txtYellow"></asp:TextBox>
            </td>
        </tr>
    </table>
</asp:Content>

webform1.aspx.cs

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

namespace dynamicweb7_8
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                if (Session["theme"] != null)
                {
                    ddlTheme.SelectedValue = Session["theme"].ToString();
                    Session["theme"] = null;
                }
            }

        }

        protected void ddlTheme_SelectedIndexChanged(object sender, EventArgs e)
        {
            Session["theme"] = ddlTheme.SelectedValue;
            Response.Redirect(Request.Path.ToString());
        }

        protected void Page_PreInit(object sender, EventArgs e)
        {
            //每个页面都这样操作，就是整体换肤
            if (Session["theme"] != null)
            {
                Page.Theme = Session["theme"].ToString();
            }
        }
    }
}

web.config

<?xml version="1.0" encoding="utf-8"?>

<!--
  有关如何配置 ASP.NET 应用程序的详细信息，请访问
  http://go.microsoft.com/fwlink/?LinkId=169433
  -->

<configuration>
    <system.web>
      <compilation debug="true" targetFramework="4.5" />
      <httpRuntime targetFramework="4.5" />
      <pages theme="Blue"></pages>
    </system.web>

</configuration>

vs2015 dynamicweb7-8 主题样式换肤的使用

猜你喜欢