標籤：
良好的登入頁面是系統的唯一入口，良心說，我是很難做出漂亮的登入介面，所以有點違背本文的標題，因為我不是一個美工。汗..!
第二講我已經發布了源碼,我們添加一個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>
運行效果：http://localhost:1332/account
構建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的後台管理系統（3）-漂亮系統登陸介面
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
