构建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)-组织架构 本节开始我们要实现工作流,此工作流可以和之前的所有章节脱离关系,也可以紧密合并. 我们当 ...
随机推荐
- webapi - 使用依赖注入
本篇将要和大家分享的是webapi中如何使用依赖注入,依赖注入这个东西在接口中常用,实际工作中也用的比较频繁,因此这里分享两种在api中依赖注入的方式Ninject和Unity:由于快过年这段时间打算 ...
- 在传统.NET Framework 上运行ASP.NET Core项目
新的项目我们想用ASP.NET Core来开发,但是苦于我们历史的遗产很多,比如<使用 JavaScriptService 在.NET Core 里实现DES加密算法>,我们要估计等到.N ...
- 谈谈如何使用Netty开发实现高性能的RPC服务器
RPC(Remote Procedure Call Protocol)远程过程调用协议,它是一种通过网络,从远程计算机程序上请求服务,而不必了解底层网络技术的协议.说的再直白一点,就是客户端在不必知道 ...
- BootStrap_02之全局样式及组件
1.BootStrap指定的四种屏幕尺寸: ①超大PC屏幕--lg(large):w>=1200px: ②中等PC屏幕--md(medium):1200px>w>=992px: ③P ...
- CSS Position 定位属性
本篇文章主要介绍元素的Position属性,此属性可以设置元素在页面的定位方式. 目录 1. 介绍 position:介绍position的值以及辅助属性. 2. position 定位方式:介绍po ...
- 初步了解nodejs
什么是Node.js? 很多初学者并没有真正地理解Node.js到底是什么.nodejs.org网站中的描述也没有多大帮助. 首先要清楚Node不是一个Web服务器,这十分重要.它本身并不能做任何事情 ...
- JAVA问题集锦Ⅰ
1.Java的日期添加: import java.util.Date ; date=new date();//取时间 Calendar calendar = new GregorianCalendar ...
- maven 中snapshot版本和release版本的区别
maven中的仓库分为两种,snapshot快照仓库和release发布仓库.snapshot快照仓库用于保存开发过程中的不稳定版本,release正式仓库则是用来保存稳定的发行版本.定义一个组件/模 ...
- 说说BPM数据表和日志表中几个状态字段的详细解释
有个客户说需要根据这些字段的值作为判断条件做一些定制化需求,所以需要知道这些字段的名词解释,以及里面存储的值具体代表什么意思 我只好为你们整理奉上这些了! Open Work Sheet 0 Sav ...
- VPN连接常见错误汇总
提示远程服务器没有响应. 这种情况有两种情况,一种是远程服务器出现故障.另一种是自己的电脑出现问题,具体原因我还没有找到,但是可以肯定的是注册表除了问题,一个终极的解决办法就是把注册表替换了.先将HK ...