6.4 实现首页

实现首页

 

1 新建一个Controller  AccountController.cs

 

 

成功创建后，会看见：

 

AccountController代码如下：

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using System.Web.Security;

using TeamManager.Models;

namespace TeamManager.Controllers

{

    public class AccountController : Controller

    {

        public ActionResult Login()

        {

            return View();

        }

        [HttpPost]

        public ActionResult Login(string uid, string pwd)

        {

            JsonResult result = new JsonResult();

            result.Data = new { success = 0 };

            if (string.IsNullOrEmpty(uid) || string.IsNullOrEmpty(pwd)) return result;

            if (!LoginService.Login(uid, pwd)) return result;

            result.Data = new { success = 1, url = "TeamInfo/List" };

            FormsAuthenticationTicket ticket = new FormsAuthenticationTicket(

                1, uid, DateTime.Now, DateTime.Now.AddDays(1), true, uid + "|" + pwd

                );

            string encryptedTicket = FormsAuthentication.Encrypt(ticket);

            HttpCookie cookie = new HttpCookie(FormsAuthentication.FormsCookieName, encryptedTicket);

            System.Web.HttpContext.Current.Response.SetCookie(cookie);

            return result;

        }

    }

}

 

 

2 添加对应的View页面

鼠标放在View()那，右键弹出菜单，点击'Add View...'

 

会自动新建对应的View文件

 

Login.cshtml代码如下：

@{

    ViewBag.Title = "Index";

}

@section style{

    <link href="~/Content/css/c01.css" type="text/css" rel="stylesheet" />

}

@section js{

    <script src="~/Content/js/login.js"></script>

}

<div class="login">

    <div id="login-err" class="login-error" style="display:none;">

    </div>

    <div class="login-input">

        <label for="uid">用户名</label>

        <input id="uid" type="text"/>

    </div>

    <div class="login-input">

        <label for="pwd">密码</label>

        <input id="pwd" type="password"/>

    </div>

    <div class="login-input">

        <label for="login">&nbsp;</label>

        <input id="login" value="登录" type="button"/>

    </div>

</div>

 

在Content目录下新建css和js文件

 

 /css/c00.css 模板的css式样

body {

    font-family: arial,sans-serif;

}

.content {

    width:960px;

    margin: 0 auto;

}

.header {

    text-align:left;

    width:100%;

    height:36px;

    line-height:36px;

    background: url(../img/bar1.png) repeat-x;

    font-size:22px;

    font-weight:800;

    color:white;

    padding-left:25px;

}

 

 /css/c01.css 登录页面的css式样

.login {

    width: 500px;

    padding:20px;

    margin:20px auto;

    border: 0px solid gray;

    color: #333;

    font-size: 13px;

}

.login .login-input {

    margin-bottom:10px;

}

.login .login-input label{

    text-align:right;

    width:130px;

    display:block;

    float:left;

    margin-right:10px;

}

.login .login-error {

    color: #c00;

    width:70%;

    margin: 0 auto;

    border: 1px solid #df9898;

    background: #ffe7e7 url(../img/icon-error.png) no-repeat 0.75em 0.75em;

    padding: .75em .75em .75em 2.5em;

    font-weight:bold;

    margin-bottom:10px;

}

 

 /js/login.js 用于设置登录操作

function ErrShow(msg)

{

    var err = $("#login-err");

    err.show();

    err.text(msg);

}

$("#login").click(function () {

    var uid = $.trim($("#uid").val());

    if ('' == uid) {

        ErrShow("请输入用户名");

        return false;

    }

    var pwd = $.trim($("#pwd").val());

    if ('' == pwd) {

        ErrShow("请输入密码");

        return false;

    }

    $.ajax({

        url: '/Account/Login',

        type: 'post',

        data: { uid: uid, pwd: pwd },

        success: function (result) {

            if ('1' != result.success) {

                ErrShow("登录失败，用户名或密码错误");

                return false;

            }

            window.location.href = result.url;

        }

    });

});

 

jquery-1.20.2.min.js下载地址

http://code.jquery.com/jquery-1.10.2.min.js

直接在浏览器中ctrl+s，另存为就能下载

 

 

 

3 把登录页面设为默认首页

更改RouteConfig.cs文件中的controller和action