一、引言
刚刚学习接触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 来源:https://blog.csdn.net/dhywjx/article/details/79507142 免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作! |