asp.net+mvc+easyui+sqlite 簡單用戶系統學習之旅（四）—— session傳遞登錄人信息顯示+用戶注銷

前面的學習，已經做好了簡單的登錄和主頁，涉及了三層軟件架構，mvc，easyui的layout、tree、tab、window，sqlite，動軟代碼自動生成。

下面完善一下登錄跳轉主頁后，在south-layout底部顯示登錄人，與登錄用戶名保持一致；再做一個注銷按鈕，利用到easyui的linkbutton/menubutton。

1. 在后台判斷是否登錄時，Account控制器中定義了一個session，將登錄人的信息保存在session["user"]中，

在（Home）Index中添加代碼，c#代碼用<% %>包圍

<% UserManager.Model.UserDB user = Session["user"] as UserManager.Model.UserDB; %>

將底部的登錄人的代碼改為：

<div data-options="region:'south',border:false" style="height:20px;background:#ccc;padding:1px">當前登錄人：<%=user.Name %></div>

顯示效果如下：

2. 在north-layout即頂部添加easyui的linkbutton，添加注銷功能

打開chm幫助文檔，或demo

為（Home）Index添加代碼：

<div data-options="region:'north',border:false" style="height:61px;background:#0660bb;">
        <img src="/Content/Images/logo.png" style="float:left"/>
        <div style="padding:10px;float:right;text-align:center">
            <a href="#" class="easyui-linkbutton" data-options="plain:true">Home</a>
            <a href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-edit'">注銷</a>
            <a href="#" class="easyui-menubutton" data-options="menu:'#mm2',iconCls:'icon-help'">Help</a>
            <a href="#" class="easyui-menubutton" data-options="menu:'#mm3'">About</a>
        </div>
    </div>

顯示結果如下：

接下來為注銷添加跳轉功能

3. 在注銷前，提示用戶是否確認注銷，利用easyui的messager

且確認注銷前要銷毀已創建的session

為（Home）Index的注銷linkbutton添加事件：

<a href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-edit'" onclick="LogoOff()">注銷</a>

LogoOff()函數寫在之前創建的Login.js中（所以記得為Home-Index添加login.js的樣式）

Login.js完整代碼如下（注意！在（Account/Index）和（Home/Index）里面都用到了Login.js里面的樣式，需要添加<script>樣式

<script src="../../Scripts/Common/Login.js" type="text/javascript"></script>

否則也無法顯示，在遇到錯誤時也要勇於調試反復查找問題）

function Login() {
    //alert("where");
    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("登錄");
                        window.location.href = "/Home/Index";
                    }
                });
    }
}


function LogoOff() {
    $.messager.confirm('注銷', '你確認要注銷嘛?', function (r) {
        if (r) {
            //alert('confirmed: ' + r);
            $.post("/Account/DoLoginOff",
                        function (data) {
                            if (data == "-1") {
                                $.messager.alert('Warning', '注銷失敗');
                            }
                            else {
                                alert('注銷成功');
                                window.location.href = "/Account/Index";
                            }
                        });
        }
    });
}

至此，登錄-跳轉主頁-點擊主頁內容顯示tab-注銷-返回登錄頁面，這個流程已經全部完成！大家需要的話也可以把代碼打包分享。