构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（3）-漂亮系统登陆界面
前言
本文于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;"> </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>
运行效果效果图
其实早在本系列的52节，我已经全新改版了EasyUI的面貌，所谓萝卜青菜各有所爱，虽然包装边了，里头还是味道还是一样的
构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（3）-漂亮系统登陆界面的更多相关文章
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（1）-前言与目录（持续更新中...）
转自:http://www.cnblogs.com/ymnets/p/3424309.html 曾几何时我想写一个系列的文章,但是由于工作很忙,一直没有时间更新博客.博客园园龄都1年了,却一直都是空空 ...
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（48）-工作流设计-起草新申请
原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(48)-工作流设计-起草新申请 系列目录 创建新表单之后,我们就可以起草申请了,申请按照严格的表单步骤和分 ...
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（47）-工作流设计-补充
原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(47)-工作流设计-补充 系列目录 补充一下,有人要表单的代码,这个用代码生成器生成表Flow_Form表 ...
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（46）-工作流设计-设计分支
原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(46)-工作流设计-设计分支 系列目录 步骤设置完毕之后,就要设置好流转了,比如财务申请大于50000元( ...
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（45）-工作流设计-设计步骤
原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(45)-工作流设计-设计步骤 系列目录 步骤设计很重要,特别是规则的选择. 我这里分为几个规则 1.按自行 ...
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（44）-工作流设计-设计表单
原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(44)-工作流设计-设计表单 系列目录 设计表单是比较复杂的一步,完成一个表单的设计其实很漫长,主要分为四 ...
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（43）-工作流设计-字段分类设计
原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(43)-工作流设计-字段分类设计 系列目录 建立好42节的表之后,每个字段英文表示都是有意义的说明.先建立 ...
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（42）-工作流设计01
原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(42)-工作流设计01 工作流在实际应用中还是比较广泛,网络中存在很多工作流的图形化插件,可以做到拉拽的工 ...
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（40）-精准在线人数统计实现-【过滤器+Cache】
原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(40)-精准在线人数统计实现-[过滤器+Cache] 系列目录 上次的探讨没有任何结果,我浏览了大量的文章 ...
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（41）-组织架构
原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(41)-组织架构 本节开始我们要实现工作流,此工作流可以和之前的所有章节脱离关系,也可以紧密合并. 我们当 ...
随机推荐
- 03.SQLServer性能优化之---存储优化系列
汇总篇:http://www.cnblogs.com/dunitian/p/4822808.html#tsql 概 述:http://www.cnblogs.com/dunitian/p/60413 ...
- redux-amrc：用更少的代码发起异步 action
很多人说 Redux 代码多,开发效率低.其实 Redux 是可以灵活使用以及拓展的,经过充分定制的 Redux 其实写不了几行代码.今天先介绍一个很好用的 Redux 拓展-- redux-amrc ...
- $.extend()的实现源码 --（源码学习1）
目标: $.extend({ add:function(a,b){ return a + b; } }) console.log($.a ...
- CentOS 7配置LNMP开发环境及配置文件管理
安装并配置MySQL 5.6 从CentOS从7.x开始默认使用MariaDB.MariaDB完全兼容MySQL,包括API和命令行.但是很多时候我们还是会想要安装MySQL,所以不能直接通过yum命 ...
- Xamarin+Prism开发详解五：页面布局基础知识
说实在的研究Xamarin到现在,自己就没设计出一款好的UI,基本都在研究后台逻辑之类的!作为Xamarin爱好者,一些简单的页面布局知识还是必备的. 布局常见标签: StackLayout Abso ...
- 使用ubuntu作为web开发环境的一些感受
从ms-dos,win95,win98,winMe,winXp,vista,win7,win10我都有使用的经历,我使用时间最长的应属winxp,其次是win7,说实话,我觉得这两个系统是微软做的最好 ...
- CentOS下mysql数据库常用命令总结
mysql数据库使用总结 本文主要记录一些mysql日常使用的命令,供以后查询. 1.更改root密码 mysqladmin -uroot password 'yourpassword' 2.远程登陆 ...
- 内存映射文件MemoryMappedFile使用
参考资料: http://blog.csdn.net/bitfan/article/details/4438458 所谓内存映射文件,其实就是在内存中开辟出一块存放数据的专用区域,这区域往往与硬盘上特 ...
- enote笔记法使用范例（2）——指针（1）智能指针
要知道什么是智能指针,首先了解什么称为 “资源分配即初始化” what RAII:RAII—Resource Acquisition Is Initialization,即“资源分配即初始化” 在&l ...
- java中if和switch哪个效率快
首先要看一个问题,if 语句适用范围比较广,只要是 boolean 表达式都可以用 if 判断:而 switch 只能对基本类型进行数值比较.两者的可比性就仅限在两个基本类型比较的范围内.说到基本类型 ...