上一節講到利用easyui的layout、tree、tab和datagrid創建用戶管理的頁面，注意利用到easyui的頁面一定要按順序添加jQuery和easyUI的.js和.css樣式，靈活查看easyui的幫助文檔和demo，修改data-options選項。
下面開始登錄頁面，用到easyui的window。
1. 先新建一個account，里面放登錄的頁面，添加相應的控制器和視圖：
（Account）Index的代碼：
<body> <div> <div id="w" class="easyui-window" title="登錄" data-options="iconCls:'icon-save', closable:false, minimizable:false, maximizable:false, draggable:false, resizable:false, collapsible:false" style="width:260px;height:160px;padding:10px;"> <table> <tr> <td>用戶：</td><td><input id="name" type="text"/></td> </tr> <tr> <td></td><td></td> </tr> <tr> <td>密碼：</td><td><input id="pwd" type="text"/></td> </tr> <tr> <td></td><td></td> </tr> <tr> <td></td><td><input type="button" onclick="" value="登錄"/></td> </tr> <tr> <td></td><td></td> </tr> </table> </div> </div> </body>
為了運行方便，直接跳轉到登錄頁面，可以修改下前面提到的Global.asax文件，把route改為Account-Index
運行效果：（運行的快捷鍵有兩種，直接按F5，也就是debug模式，修改文件時需要終止調試；另一種是按Ctrl+F5，release模式，可以直接修改文件，修改后在瀏覽器頁面刷新即可顯示新的效果）
在easyui-window的data-options中，我們添加了很多參數，固定了窗口的樣式，大小，不能拖拽等。如果不能成功顯示，注意查看一下你的窗口文件中是否添加了easyui的script樣式。
2. 構建數據庫
先在本地項目web文件下的bin文件夾下，新建一個名為sqlite.db的文件：
再打開sqlite，就是長這個樣子
新建數據庫
數據庫選中剛剛在本地新建的sqlite.db，別名這里命為usermanager，確定。
然后在數據庫列表左邊欄會出現usermanager，雙擊，展開表，右鍵，新建表
按圖示新建字段並保存
注意！！！
這里必須注意，新建的表名不能和項目名一樣，請修改為UserDB，和項目名同名會造成后來命名空間相同報錯。
此時UserManager表格已經建好，在左邊欄右鍵，選擇最后一項，查詢數據
現在新建的表是空白的，為表插入一條數據，即登錄的數據。
現在表格里已經有了插入的數據了
3. 利用動軟代碼生成器，完善解決方案的Data、Business、Model層
打開動軟
選擇新增數據庫服務器，類型選擇sqlite，下一步
數據庫文件選擇我們在本地建的sqlite.db文件，輸入本地地址
我的地址：D:\JennyJiang\MyProject\UserManager\UserManager.Web\bin\sqlite.db
然后點擊連接字符串，本地保存該字符串Data Source=D:\JennyJiang\MyProject\UserManager\UserManager.Web\bin\sqlite.db
確定。
動軟左邊欄會生成如圖所示的樣子，連接上項目的數據庫。
接着點擊新建項目，選擇簡單三層結構，下一步
生成好后，動軟會自動打開生成的項目。
4. 下面替換動軟生成的項目文件到我們建好的項目中
① 替換UserManager.Model
刪除.Model自帶的Class1.cs，將動軟代碼中的UserManager.Model中的UserManager.cs復制粘貼過來，然后對本地的UserManager.Model右鍵生成，確保無錯。
②替換UserManager.Data
同樣，復制UserManager.DAL中的UserManager.cs復制粘貼過來，有錯誤一個一個修改，修改命名空間為UserManager.Data，然后引用System.Data.SQLite.dll
復制動軟生成的DBUtility到本地文件夾，在解決方案中添加該項目
然后，在UserManager.Data的引用中引用項目，添加DBUtility和UserManager.Model
然后，為.Data生成，報錯：DBUtility.DbHelperSQLite文件中，確實System.Data.SQLite,為DBUtility工程引用添加System.Data.SQLite.dll（這個dll在動軟的Lib文件夾下已經存在），還要引用MySql.Data.dll
重新生成，但model報錯了，但明明已經引用了model項目，感覺是項目名和數據庫名相同，造成的，返回重新構造新的數據庫，名為UserDB。
把動軟生成的代碼全部刪除后，又重新為sqlite.db創建名為UserDB的表，然后動軟代碼生成，沒有再報錯了。
③替換UserManager.Business
復制粘貼動軟生成的BLL文件夾下的UserDB.cs，然后添加引用Maticsoft.Common.dll（動軟的Lib下也有，或者去網上下載），再添加Model和Data項目引用（注意！！！添加項目引用之前，必須為該項目生成，無錯之后再添加引用）
至此，動軟代碼添加完畢，三層架構也已經完善。接下來的登錄校驗可以判斷與數據庫的內容是否相同。
5. 獲取數據庫里的內容，用於登錄
在（Account）Index中獲取db的數據，再在后台判斷邏輯。這里在Scripts文件夾里新建.js文件，先新建Common文件夾，里面新建Login.js文件。
Login.js里的代碼：
function Login() {
var name = $("#name").val();
var pwd = $("#pwd").val();
//前台邏輯判斷
if (name == '' || pwd == '') {
$("#showInfo").html("用戶名或密碼為空");
}
else {
//后台邏輯判斷
$.post("Account/DoLogin", { name: name, pwd: pwd },
function (data) {
//alert("Data Loaded: " + data);
if (data == "-1") {
$("#showInfo").html("用戶名或密碼為空");
}
else if (data == "-2") {
$("#showInfo").html("用戶名或密碼錯誤");
}
else {
$("#showInfo").html("登錄");
}
});
}
}
同時需要修改（Account）Index頁面，為登錄button添加事件：
<body> <div> <div id="w" class="easyui-window" title="登錄" data-options="iconCls:'icon-save', closable:false, minimizable:false, maximizable:false, draggable:false, resizable:false, collapsible:false" style="width:260px;height:160px;padding:10px;"> <table> <tr> <td>用戶：</td><td><input id="name" type="text"/></td> </tr> <tr> <td></td><td></td> </tr> <tr> <td>密碼：</td><td><input id="pwd" type="text"/></td> </tr> <tr> <td></td><td></td> </tr> <tr> <td></td><td><input type="button" onclick="Login()" value="登錄"/></td> </tr> <tr> <td></td><td><label id="showInfo"></label></td> </tr> </table> </div> </div> </body>
修改Account控制器代碼：
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace UserManager.Web.Controllers { public class AccountController : Controller { // // GET: /Account/ public ActionResult Index() { return View(); } UserManager.Business.UserDB users = new UserManager.Business.UserDB(); public ActionResult DoLogin() { int res = 0; string name = Request.Form["name"]; string pwd = Request.Form["pwd"]; //后台邏輯判斷 if (string.IsNullOrEmpty(name) || string.IsNullOrEmpty(pwd)) { res = -1; } else { //獲取數據庫內容 //List<UserManager.Model.UserDB> userList = new user List<UserManager.Model.UserDB> userList = users.GetModelList("name='" + name + "'and pwd='" + pwd + "'"); if (userList.Count == 0) { res = -2; } else { Session["user"] = userList[0]; } } return Content(res.ToString()); } } }
同時，由於數據庫，需要Web.config文件：
在<configuration>內添加：
<appSettings>
<!-- 連接字符串是否加密 -->
<add key="ConStringEncrypt" value="false"/>
<!-- 數據庫連接字符串,（如果采用加密方式，上面一項要設置為true；加密工具，可在官方下載，
如果使用明文這樣server=127.0.0.1;database=.....,上面則設置為false。 -->
<add key="ConnectionString" value="Data Source=D:\JennyJiang\MyProject\UserManager\UserManager.Web\bin\sqlite.db"/>
<!--其它模塊連接字符串，可以不斷增加以便同一個項目支持連接多個數據庫。如果沒有，可以刪除該行-->
<add key="ConnectionString2" value="server=127.0.0.1;database=codematic2;uid=sa;pwd=1"/>
</appSettings>
其中“ConnectionString”的value為動軟中生成的連接字符串。
最后，運行結果：
6. 為登錄跳轉到主頁
在Login.js文件登錄成功判斷邏輯后面添加：
else { $("#showInfo").html("登錄"); window.location.href = "/Home/Index"; }
輸入管理員用戶和密碼（即在構建數據庫表時插入的信息），即可跳轉到（Home）Index。