构建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)-组织架构 本节开始我们要实现工作流,此工作流可以和之前的所有章节脱离关系,也可以紧密合并. 我们当 ...
随机推荐
- 从直播编程到直播教育：LiveEdu.tv开启多元化的在线学习直播时代
2015年9月,一个叫Livecoding.tv的网站在互联网上引起了编程界的注意.缘于Pingwest品玩的一位编辑在上网时无意中发现了这个网站,并写了一篇文章<一个比直播睡觉更奇怪的网站:直 ...
- NiceMark——我的Markdown编辑器
NiceMark--我的Markdown编辑器 闲来无事,写了一个Markdown编辑器.基于electron,完全采用Web前段技术(Html,css,JavaScript)实现.代码已托管在Git ...
- Windows server 2012 添加中文语言包(英文转为中文)（离线）
Windows server 2012 添加中文语言包(英文转为中文)(离线) 相关资料: 公司环境:亚马孙aws虚拟机 英文版Windows2012 中文SQL Server2012安装包,需要安装 ...
- 一个粗心的Bug，JSON格式不规范导致AJAX错误
一.事件回放 今天工作时碰到了一个奇怪的问题,这个问题很早很早以前也碰到过,不过没想到过这么久了竟然又栽在这里. 当时正在联调一个项目,由于后端没有提供数据接口,于是我直接本地建立了一个 json ...
- [C#] 剖析 AssemblyInfo.cs - 了解常用的特性 Attribute
剖析 AssemblyInfo.cs - 了解常用的特性 Attribute [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5944391.html 序 ...
- git克隆项目到本地&&全局安装依赖项目&&安装依赖包&&启动服务
一.安装本地开发环境 1.安装本项目 在需要保存到本地的项目的文件夹,进入到文件夹里点击右键,bash here,出现下图: 2.安装依赖项目 3.安装依赖包(进入到命令行) # 安装依赖包 $ ...
- C++随笔：.NET CoreCLR之corleCLR核心探索之coreconsole（1）
一看这个标题,是不去取名有点绕呢?或者是,还有些问题?报告LZ...你的标题取得有问题,是个病句!↖(^ω^)↗!!!先不要急,其实我今天带给大家的就是CoreCLR中的coreclr.其中它是在名字 ...
- 用MongoDB分析合肥餐饮业
看了<从数据角度解析福州美食>后难免心痒,动了要分析合肥餐饮业的念头,因此特地写了Node.js爬虫爬取了合肥的大众点评数据.分析数据库我并没有采用MySQL而是用的MongoDB,是因为 ...
- mysql百万级分页优化
普通分页 数据分页在网页中十分多见,分页一般都是limit start,offset,然后根据页码page计算start , 这种分页在几十万的时候分页效率就会比较低了,MySQL需要从头开始一直往后 ...
- Linux基础介绍【第三篇】
更改SSH服务端远程登录的配置 windows服务端的默认远程管理端口是3389,管理员用户是administrator,普通用户是guest.Linux的管理用户是root,普通用户默认有很多个,远 ...