构建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)-组织架构 本节开始我们要实现工作流,此工作流可以和之前的所有章节脱离关系,也可以紧密合并. 我们当 ...
随机推荐
- SQL Server 无法连接到服务器。SQL Server 复制需要有实际的服务器名称才能连接到服务器。请指定实际的服务器名称。
异常处理汇总-数据库系列 http://www.cnblogs.com/dunitian/p/4522990.html SQL性能优化汇总篇:http://www.cnblogs.com/dunit ...
- 多个Img标签之间的间隙处理方法
1.多个标签写在一行 <img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/> ...
- $.type 怎么精确判断对象类型的 --（源码学习2）
目标: var a = [1,2,3]; console.log(typeof a); //->object console.log($.type(a)); //->ar ...
- iOS开发之再探多线程编程：Grand Central Dispatch详解
Swift3.0相关代码已在github上更新.之前关于iOS开发多线程的内容发布过一篇博客,其中介绍了NSThread.操作队列以及GCD,介绍的不够深入.今天就以GCD为主题来全面的总结一下GCD ...
- iOS开发之多种Cell高度自适应实现方案的UI流畅度分析
本篇博客的主题是关于UI操作流畅度优化的一篇博客,我们以TableView中填充多个根据内容自适应高度的Cell来作为本篇博客的使用场景.当然Cell高度的自适应网上的解决方案是铺天盖地呢,今天我们的 ...
- 使用cmake自动构建工程
公司引擎是用cmake根据目标平台来构建工程的,刚接触的时候深深体会到cmake的方便:如果目标平台是windows,它可以帮你自动构建出vs工程:如果是安卓,自动构建出eclipse工程,如果是IO ...
- ASP.NET WebApi OWIN 实现 OAuth 2.0
OAuth(开放授权)是一个开放标准,允许用户让第三方应用访问该用户在某一网站上存储的私密的资源(如照片,视频,联系人列表),而无需将用户名和密码提供给第三方应用. OAuth 允许用户提供一个令牌, ...
- Velocity笔记--使用Velocity获取动态Web项目名的问题
以前使用jsp开发的时候,可以通过request很轻松的获取到根项目名,现在换到使用velocity渲染视图,因为已经不依赖servlet,request等一些类的环境,而Web项目的根项目名又不是写 ...
- ZKWeb网页框架1.3正式发布
本次更新的内容有 更新引用包版本 Microsoft.AspNetCore.Hosting.Abstractions 1.1.0 Microsoft.AspNetCore.Http.Abstracti ...
- C# 用SoapUI调试WCF服务接口（WCF中包含用户名密码的验证）
问题描述: 一般调试wcf程序可以直接建一个单元测试,直接调接口. 但是,这次,我还要测试在接口内的代码中看接收到的用户名密码是否正确,所以,单一的直接调用接口方法行不通, 然后就想办法通过soapU ...