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

简介: 原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(3)-漂亮系统登陆界面 良好的登录页面是系统的唯一入口,良心说,我是很难做出漂亮的登录界面,所以有点违背本文的标题,因为我不是一个美工。

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

良好的登录页面是系统的唯一入口,良心说,我是很难做出漂亮的登录界面,所以有点违背本文的标题,因为我不是一个美工。汗..!

第二讲我已经发布了源码,我们添加一个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>
View Code

运行效果效果图:http://localhost:1332/account

其实素材好难找。大家有好的素材不妨共享给我一下,谢谢啦...ymnets@sina.com或者修改好的源码

目录
相关文章
|
3月前
|
开发框架 前端开发 JavaScript
ASP.NET MVC 教程
ASP.NET 是一个使用 HTML、CSS、JavaScript 和服务器脚本创建网页和网站的开发框架。
50 7
|
3月前
|
存储 开发框架 前端开发
ASP.NET MVC 迅速集成 SignalR
ASP.NET MVC 迅速集成 SignalR
79 0
|
4月前
|
开发框架 前端开发 .NET
ASP.NET MVC WebApi 接口返回 JOSN 日期格式化 date format
ASP.NET MVC WebApi 接口返回 JOSN 日期格式化 date format
57 0
|
4月前
|
开发框架 前端开发 安全
ASP.NET MVC 如何使用 Form Authentication?
ASP.NET MVC 如何使用 Form Authentication?
|
4月前
|
开发框架 .NET
Asp.Net Core 使用X.PagedList.Mvc.Core分页 & 搜索
Asp.Net Core 使用X.PagedList.Mvc.Core分页 & 搜索
148 0
|
7月前
|
开发框架 前端开发 .NET
ASP.NET CORE 3.1 MVC“指定的网络名不再可用\企图在不存在的网络连接上进行操作”的问题解决过程
ASP.NET CORE 3.1 MVC“指定的网络名不再可用\企图在不存在的网络连接上进行操作”的问题解决过程
212 0
|
7月前
|
开发框架 前端开发 JavaScript
JavaScript云LIS系统源码ASP.NET CORE 3.1 MVC + SQLserver + Redis医院实验室信息系统源码 医院云LIS系统源码
实验室信息系统(Laboratory Information System,缩写LIS)是一类用来处理实验室过程信息的软件,云LIS系统围绕临床,云LIS系统将与云HIS系统建立起高度的业务整合,以体现“以病人为中心”的设计理念,优化就诊流程,方便患者就医。
87 0
|
7月前
|
开发框架 前端开发 .NET
C# .NET面试系列六:ASP.NET MVC
<h2>ASP.NET MVC #### 1. MVC 中的 TempData\ViewBag\ViewData 区别? 在ASP.NET MVC中,TempData、ViewBag 和 ViewData 都是用于在控制器和视图之间传递数据的机制,但它们有一些区别。 <b>TempData:</b> 1、生命周期 ```c# TempData 的生命周期是短暂的,数据只在当前请求和下一次请求之间有效。一旦数据被读取,它就会被标记为已读,下一次请求时就会被清除。 ``` 2、用途 ```c# 主要用于在两个动作之间传递数据,例如在一个动作中设置 TempData,然后在重定向到另
364 5
|
存储 开发框架 前端开发
[回馈]ASP.NET Core MVC开发实战之商城系统(五)
经过一段时间的准备,新的一期【ASP.NET Core MVC开发实战之商城系统】已经开始,在之前的文章中,讲解了商城系统的整体功能设计,页面布局设计,环境搭建,系统配置,及首页【商品类型,banner条,友情链接,降价促销,新品爆款】,商品列表页面,商品详情等功能的开发,今天继续讲解购物车功能开发,仅供学习分享使用,如有不足之处,还请指正。
176 0
|
开发框架 前端开发 .NET
[回馈]ASP.NET Core MVC开发实战之商城系统(一)
[回馈]ASP.NET Core MVC开发实战之商城系统(一)
185 0