构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(3)-漂亮系统登陆界面

时间:2021-01-04 19:16:32

系列目录

前言

本文于2016-10修改

这次的代码是基于上一节的代码集成的,素材都在第二节里头

本次添加登录页面的控制器即可

实现

添加Account的Index视图:

@{

    Layout = null;

}
<!DOCTYPE html>
<html>
<head>
<title>系统登录</title>
<script src="/Scripts/jquery.min.js" type="text/javascript"></script>
@Styles.Render("~/Content/themes/blue/css")
<link href="~/Content/Site.css" rel="stylesheet" />
<style type="text/css">
body
{
letter-spacing: 1px;
color: #444;
} #LoginTb
{
font-size: 14px;
} #LoginTb
{
font-size: 12px;
} #LoginTb input
{
width: 190px;
height: 24px;
line-height: 24px;
}
</style>
<script type="text/javascript">
$(function () {
$("#LoginSys").click(function () {
LoginSys();
});
$("#UserName").keydown(function (e) {
var curkey = e.which;
if (curkey == 13) {
LoginSys();
return false;
}
});
$("#Password").keydown(function (e) {
var curkey = e.which;
if (curkey == 13) {
LoginSys();
return false;
}
});
$("#ValidateCode").keydown(function (e) {
var curkey = e.which;
if (curkey == 13) {
LoginSys();
return false;
}
}); }); function LoginSys() {
$("#mes").html("");
$("#UserName").removeClass("input-validation-error");
$("#Password").removeClass("input-validation-error");
$("#ValidateCode").removeClass("input-validation-error");
if ($.trim($("#UserName").val()) == "") {
$("#UserName").addClass("input-validation-error").focus();
$("#mes").html("用户名不能为空!");
return;
}
if ($.trim($("#Password").val()) == "") {
$("#Password").addClass("input-validation-error").focus();
$("#mes").html("密码不能为空!");
return;
}
if ($.trim($("#ValidateCode").val()) == "") {
$("#ValidateCode").addClass("input-validation-error").focus();
$("#mes").html("验证码不能为空!");
return;
}
$("#Loading").show(); alert(1);
return false;
} </script>
</head>
<body> <div>
<div class="define-head" style="height: 67px;">
<div class="define-logo">
<div id="LoginTopLine">YmNets.cnblogs.com</div>
<div id="LoginBotoomLine">MVC4+EF5.0+EasyUI</div>
</div> </div>
</div>
<div style="margin: 0 auto; margin-top: 100px; width: 800px;">
<table style="width: 800px; margin: 0 auto;">
<tr>
<td><img src="/Content/Images/account.jpg"></td>
<td style="width: 310px;"> <table id="LoginTb" style="margin-top: 10px; background: #fff; width: 100%; height: 230px; border: 1px #ccc solid;">
<tr>
<td colspan="2" style="font-size: 18px; font-weight: bold; padding: 5px 20px;">欢迎登录
</td> </tr>
<tr>
<td style="width: 80px; text-align: right">用户名:
</td>
<td>
<input id="UserName" name="UserName" type="text" />
</td>
</tr>
<tr>
<td style="width: 80px; text-align: right;">密 码:
</td>
<td>
<input id="Password" name="Password" type="password" />
</td>
</tr> <tr>
<td style="width: 80px; text-align: right">验证码:
</td>
<td> </td>
</tr> <tr> <td colspan="2">
<table style="width: 100%;">
<tr>
<td style="width:40px;">&nbsp;</td>
<td>
<div id="mes" class="field-validation-error">
</div>
<div id="Loading" style="display: none" class='panel-loading'><font color='#000'>加载中...</font></div>
</td>
<td style="width: 100px;"><a id="LoginSys" href="javascript:void(0)" class="easyui-linkbutton l-btn"><span class="l-btn-left"><span class="l-btn-text icon-ok" style="padding-left: 20px;">登录</span></span></a>
</td>
</tr> </table> </td>
</tr> </table>
</td>
</tr>
</table> </div>
<div style="background:#f1f1f1; height:40px; width:100%; text-align:center; line-height:40px;border-top:1px #ccc solid;bottom:0; position:absolute">
Copyright ymnet2010-2013
</div>
</body>
</html>

运行效果效果图

构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(3)-漂亮系统登陆界面

其实早在本系列的52节,我已经全新改版了EasyUI的面貌,所谓萝卜青菜各有所爱,虽然包装边了,里头还是味道还是一样的