前言

本文于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;">&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>
运行效果效果图
构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（3）-漂亮系统登陆界面
其实早在本系列的52节，我已经全新改版了EasyUI的面貌，所谓萝卜青菜各有所爱，虽然包装边了，里头还是味道还是一样的
秒客网

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

前言

实现

相关文章
