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-注销-返回登录页面，这个流程已经全部完成！大家需要的话也可以把代码打包分享。