一个用客户端控件写好的登录界面
代码如下
<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>后台登录-X-admin2.0</title><meta name="renderer" content="webkit|ie-comp|ie-stand"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" /><meta http-equiv="Cache-Control" content="no-siteapp" /><link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /><link rel="stylesheet" href="./css/font.css"><link rel="stylesheet" href="./css/xadmin.css"><script type="text/javascript" src="/jquery/3.2.1/jquery.min.js"></script><script src="./lib/layui/layui.js" charset="utf-8"></script><script type="text/javascript" src="./js/xadmin.js"></script></head><body class="login-bg"><div class="login"><div class="message">x-admin2.0-管理登录</div><div id="darkbannerwrap"></div><form method="post" class="layui-form" ><input name="username" placeholder="用户名" type="text" lay-verify="required" class="layui-input" ><hr class="hr15"><input name="password" lay-verify="required" placeholder="密码" type="password" class="layui-input"><hr class="hr15"><input value="登录" lay-submit lay-filter="login" style="width:100%;" type="submit"><hr class="hr20" ></form></div></body></html>
修改
要将其改成连接服务器判断登录是否成功
我们需要先把原有的css样式都连接上
然后改三个地方
form表单
改前的
<form method="post" class="layui-form" >
改后的(添加 action="" runat="server")提交到本页面
<form method="post" class="layui-form" action="" runat="server">
提交控件换成button
改前的
<input value="登录" lay-submit lay-filter="login" style="width:100%;" type="submit">
改后的
<asp:Button ID="Button1" runat="server" Text="登录" lay-submit lay-filter="login" style="width:100%;" onclick="Button1_Click"/>
动态代码获取登录信息
替换之后的页面
样式完全一样,但是现在是服务器端实现登录