ASP.NET 实现主题切换实例

10 篇文章 0 订阅

   通常我们经常看到网页,一些软件提供换肤功能,各种主题间切换。ASP.NET 2.0 中可以用Theme和skin以及CSS轻松实现这个功能。

  •    首先简单介绍一下三种技术:主题(Theme)技术,面板(skin)技术,级联样式表(css)

    主题(Theme)以及面板(skin)技术这两个技术允许开发人员或设计人员自行定义网页的样式设置以及套用的样式支持,每个主题中可以包含数个面板档,这些面板档决定了控件要输出时套用的样式,开发人员则可以利用主题来决定不同的外观要使用的样式。

    级联样式表(css)它是用来进行网页风格设计的,对网页中的元素的属性进行设置,每个主题中可以包含多个css和skin文件。两种设置的组合构成一种皮肤。

    css主要设置网页元素的属性,控制网页外观,网页元素位置,外观以及创建特殊效果的能力。。

    skin主要是设置网页中使用的控件的一些属性。

  •            ASP.NET 2.0中如何在Visual Studio中实现主题的设置

    添加主题文件

   


    添加新建项中的外观文件(.skin)文件和样式表(.css文件)

   

   


    设置在.skin文件中设置我们所需要的控件的属性。(通俗讲就是总动套用格式或者自己设定自己喜欢的控件样式,保存为模版,作为一个皮肤)下面以Gridview为例:

    为了简便起见我们在页面上添加一个Gridview控件,自动套用格式,打开源码把控件的源码剪切到.skin文件中。(去掉控件的ID,注意如果网页中有两个存在两个相同的控件,设置skinId,通俗讲每个控件准备多种衣服)。其他控件操作相同。

     代码展示:

    

    利用css样式设置元素属性代码展示

   

  •     到这里一个主题,一种皮肤已经设置好了(可以类似设置多种主题,所谓的皮肤),如何预先设置好的皮肤应用到网页当中去?

    通过设置网页上的theme属性,选择主题,运行即可。操作如下

   

  •    到这里简单的主题皮肤的设置就基本完成了,通常我们根据自己的喜好实现换肤,下面看一下我们如何实现主题间的切换:

   原理很简单:通过按钮的Click时间切换网页的方式,实现换肤,也就是同一个网页使用不同的主题表现出来,通过网页地址的切换来实现此功能。

   代码如下:

  

  •    主题间的切换就算完成了,不过值得我们注意的有几下几点:

   1.每个外观文件中的控件结构(控件种类和每种控件的数量保持一致)尽量保持一致,尤其是SkinId的控件(SkinId要保持相同)。

   2.每个样式表文件中的元素结构尽量保持一致。

   3.可以通过设置控件的EnableTheming属性来控制某个控件是否需要应用设置。

  

  • 7
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 13
    评论
好的,下面是一个简单的ASP.NET登陆实例。 首先,在ASP.NET中,我们可以使用ASP.NET身份验证来实现用户身份验证。在此之前,我们需要在Web.config文件中配置身份验证相关的设置。下面是一个简单的Web.config文件示例: ``` <configuration> <system.web> <authentication mode="Forms"> <forms loginUrl="Login.aspx" defaultUrl="Default.aspx" /> </authentication> </system.web> </configuration> ``` 上述代码中,我们将身份验证模式设置为Forms,并指定了登录页面和默认页面的地址。 接下来,我们需要创建一个登录页面(Login.aspx),用户将在此页面输入用户名和密码。下面是一个简单的登录页面示例: ``` <%@ Page Language="C#" %> <!DOCTYPE html> <html> <head> <title>Login Page</title> </head> <body> <form id="form1" runat="server"> <div> <h2>Login</h2> <hr /> <asp:Label runat="server" ID="lblMessage"></asp:Label> <br /> <asp:TextBox runat="server" ID="txtUsername" placeholder="Username"></asp:TextBox> <br /> <asp:TextBox runat="server" ID="txtPassword" TextMode="Password" placeholder="Password"></asp:TextBox> <br /> <asp:Button runat="server" ID="btnLogin" Text="Login" OnClick="btnLogin_Click" /> </div> </form> </body> </html> ``` 在上述代码中,我们使用了ASP.NET的Web表单,添加了一个标签和两个文本框,用于输入用户名和密码。此外,还添加了一个按钮,用于提交表单并执行身份验证。 接下来,我们需要在代码后端添加身份验证逻辑。在ASP.NET中,我们可以使用FormsAuthentication类来实现身份验证。下面是一个简单的登录逻辑示例: ``` protected void btnLogin_Click(object sender, EventArgs e) { string username = txtUsername.Text; string password = txtPassword.Text; // 这里需要根据具体的用户信息存储方式进行查询,这里仅作示例 if (username == "admin" && password == "123456") { FormsAuthentication.RedirectFromLoginPage(username, false); } else { lblMessage.Text = "Invalid username or password"; } } ``` 在上述代码中,我们首先获取了用户输入的用户名和密码。接着,我们可以根据具体的用户信息存储方式进行查询,这里仅作示例,直接判断用户名和密码是否正确。如果正确,我们使用FormsAuthentication类的RedirectFromLoginPage方法将用户重定向到默认页面,并将用户名传递给默认页面。如果用户名和密码不正确,则显示一条错误消息。 最后,我们需要在默认页面(Default.aspx)中添加代码来获取当前用户的用户名。下面是一个简单的默认页面示例: ``` <%@ Page Language="C#" %> <!DOCTYPE html> <html> <head> <title>Default Page</title> </head> <body> <h2>Welcome, <%: User.Identity.Name %></h2> <hr /> <p>This is the default page.</p> <br /> <asp:Button runat="server" ID="btnLogout" Text="Logout" OnClick="btnLogout_Click" /> </body> </html> ``` 在上述代码中,我们使用了ASP.NET的User对象来获取当前用户的身份信息,包括用户名。我们还添加了一个按钮,用于注销当前用户。在代码后端,我们可以使用FormsAuthentication类的SignOut方法来实现注销功能。下面是一个简单的注销逻辑示例: ``` protected void btnLogout_Click(object sender, EventArgs e) { FormsAuthentication.SignOut(); Response.Redirect("Login.aspx"); } ``` 在上述代码中,我们使用FormsAuthentication类的SignOut方法来注销当前用户,并将用户重定向到登录页面。 这就是一个简单的ASP.NET登陆实例。请注意,这只是一个示例,实际应用中需要根据具体的需求进行修改和完善。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 13
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值