一、引言
刚刚学习接触ASP.NET的开发,为了熟悉vs的环境,练习之前学的bootsrap 的使用,制作了简单的登录页面。过于简单,不喜勿喷哈,具体的样子如图所示。
当登录成功时:
当登录失败时:
二、实现
其实具体的实现过程还是比较容易的,首先需要在项目中导入,bootstrap的相关包:
然后新建一个.aspx的登录页面写入
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="Login.Login" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>登录页面</title> <script src="js/bootstrap.min.js"></script> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="container"> <div class="row" > <h1 class="text-center">登录页面</h1> </div> <hr /> <div class="row" > <form class="form-horizontal" runat="server" role="form"> <div class="form-group"> <label for="username" class="col-sm-2 col-sm-offset-2 control-label">用户名:</label> <div class="col-sm-5"> <asp:TextBox ID="Username" runat="server" CssClass="form-control" placeholder="请输入用户名"></asp:TextBox> </div> </div> <div class="form-group"> <label for="password" class="col-sm-2 col-sm-offset-2 control-label">密码:</label> <div class="col-sm-5"> <asp:TextBox ID="Password" type="password" runat="server" CssClass="form-control" placeholder="请输入密码"></asp:TextBox> </div> </div> <asp:Button ID="Submit" runat="server" CssClass="btn btn-default btn-lg col-sm-offset-3 col-sm-6" Text="登录" OnClick="Button_Login" /> </form> </div> <div class="row"> <asp:Label ID="hint" runat="server" Text="" Font-Size="21px" CssClass="col-sm-12 text-center text-success"></asp:Label> </div> </div> </body> </html>
再打开其中.cs的页面,这里写
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; namespace Login { public partial class Login : System.Web.UI.Page { //提前设置的用户名 private String user_name = "admin"; //提前设置的用户密码 private String user_password = "12345"; protected void Page_Load(object sender, EventArgs e) { } /** * * 登录提交按钮逻辑 * * */ protected void Button_Login(object sender, EventArgs e) { if (Username.Text == user_name && Password.Text == user_password) { hint.Text = "登录成功,欢迎" + user_name + "用户!"; hint.ForeColor = System.Drawing.Color.Green; } else { hint.Text = "登录失败!"; hint.ForeColor = System.Drawing.Color.Red; } } } }
这样一个简单的登录页面就完成了
资源文件在:http://download.csdn.net/download/dhywjx/10278998