找回密码
 会员注册
查看: 205|回复: 0

简单使用bootstrap制作ASP.NET的登录页面

[复制链接]

250

主题

1

回帖

819

积分

管理员

积分
819
发表于 2024-2-29 08:16:22 | 显示全部楼层 |阅读模式

一、引言

    刚刚学习接触ASP.NET的开发,为了熟悉vs的环境,练习之前学的bootsrap 的使用,制作了简单的登录页面。过于简单,不喜勿喷哈,具体的样子如图所示。


当登录成功时:


当登录失败时:



二、实现

其实具体的实现过程还是比较容易的,首先需要在项目中导入,bootstrap的相关包:

然后新建一个.aspx的登录页面写入

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="Login.Login" %>
  2. <!DOCTYPE html>
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head runat="server">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  7. <title>登录页面</title>
  8. <script src="js/bootstrap.min.js"></script>
  9. <link href="css/bootstrap.min.css" rel="stylesheet">
  10. </head>
  11. <body>
  12. <div class="container">
  13. <div class="row" >
  14. <h1 class="text-center">登录页面</h1>
  15. </div>
  16. <hr />
  17. <div class="row" >
  18. <form class="form-horizontal" runat="server" role="form">
  19. <div class="form-group">
  20. <label for="username" class="col-sm-2 col-sm-offset-2 control-label">用户名:</label>
  21. <div class="col-sm-5">
  22. <asp:TextBox ID="Username" runat="server" CssClass="form-control" placeholder="请输入用户名"></asp:TextBox>
  23. </div>
  24. </div>
  25. <div class="form-group">
  26. <label for="password" class="col-sm-2 col-sm-offset-2 control-label">密码:</label>
  27. <div class="col-sm-5">
  28. <asp:TextBox ID="Password" type="password" runat="server" CssClass="form-control" placeholder="请输入密码"></asp:TextBox>
  29. </div>
  30. </div>
  31. <asp:Button ID="Submit" runat="server" CssClass="btn btn-default btn-lg col-sm-offset-3 col-sm-6" Text="登录" OnClick="Button_Login" />
  32. </form>
  33. </div>
  34. <div class="row">
  35. <asp:Label ID="hint" runat="server" Text="" Font-Size="21px" CssClass="col-sm-12 text-center text-success"></asp:Label>
  36. </div>
  37. </div>
  38. </body>
  39. </html>
复制代码

再打开其中.cs的页面,这里写

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.UI;
  6. using System.Web.UI.WebControls;
  7. namespace Login
  8. {
  9. public partial class Login : System.Web.UI.Page
  10. {
  11. //提前设置的用户名
  12. private String user_name = "admin";
  13. //提前设置的用户密码
  14. private String user_password = "12345";
  15. protected void Page_Load(object sender, EventArgs e)
  16. {
  17. }
  18. /**
  19. *
  20. * 登录提交按钮逻辑
  21. *
  22. * */
  23. protected void Button_Login(object sender, EventArgs e)
  24. {
  25. if (Username.Text == user_name &&
  26. Password.Text == user_password)
  27. {
  28. hint.Text = "登录成功,欢迎" + user_name + "用户!";
  29. hint.ForeColor = System.Drawing.Color.Green;
  30. }
  31. else
  32. {
  33. hint.Text = "登录失败!";
  34. hint.ForeColor = System.Drawing.Color.Red;
  35. }
  36. }
  37. }
  38. }
复制代码

这样一个简单的登录页面就完成了

资源文件在:http://download.csdn.net/download/dhywjx/10278998


来源:https://blog.csdn.net/dhywjx/article/details/79507142
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?会员注册

×
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 会员注册

本版积分规则

QQ|手机版|心飞设计-版权所有:微度网络信息技术服务中心 ( 鲁ICP备17032091号-12 )|网站地图

GMT+8, 2024-12-27 00:26 , Processed in 0.552828 second(s), 27 queries .

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表