MVC3学习：利用mvc3+ajax实现登录

用到的工具或技术：vs2010,EF code first,JQuery ajax,mvc3。

第一步：准备数据库。

利用EF code first，先写实体类，然后根据实体类自动创建数据库；或者先创建数据库，再写实体类，都可以。如果实体比较多，可以先创建数据库后，利用POCO工具来自动生成实体类。

我这里只有一个登录用户表，非常简单，自己手动在Model写实体类：

namespace ajaxDemo.Models

{

    public class Users

    {

        [Key]

        public int Uid { get; set; }

        public string UserName { get; set; }

        public string PassWord { get; set; }

    }

}

View Code

using System.Data; //需要添加此命名空间

using System.Data.Entity; //需要添加此命名空间



namespace ajaxDemo.Models

{

    public class LoginContext:DbContext

    {

        public LoginContext()

            : base("name=login") //自定义数据库连接字符串

        {



        }

        public DbSet<Users> Users { get; set; }

    }

}

 

第二步：写控制器　

直接上代码

namespace ajax.Controllers

{

    public class LoginController : Controller

    {

       private LoginContext db = new LoginContext();

        public ActionResult login()

        {

            return View();

        }

        

        public ActionResult LogOn(string usn, string pwd)

        {

            if (Request.IsAjaxRequest())

            {

                int n = (from c in db.Users

                         where c.UserName == usn

                         && c.PassWord == pwd

                         select c).Count();

                if (n != 1)

                    return Content("-1");

                else

                    return Content(n.ToString());

            }

            return View();



 

        }



    }

}

login方法是用来生成视图，LogOn方法用来判断登录是否成功。注意：要用Request.IsAjaxRequest()来判断数据的传送方式，是否是利用ajax来传送数据。

第三步：创建视图

<h2>用户登录</h2>

<script type="text/javascript">

    $(function () {

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

            var username = $("#txtName").val();

            var password = $("#txtPwd").val();

            if (username == "")

            { alert("用户名不能为空"); $("#txtName").focus(); return false; }

            else if (password == "")

            { alert("密码不能为空"); $("#txtPwd").focus(); return false; }

            else {

                $.post("LogOn", { usn: username, pwd: password },

                function (data) 

                         {

                             if (data == "-1") alert("用户名或密码错误");

                             else window.location.href = "/Home/Index";

                          }

                       );

                return false;

            }



        });

    });

</script>

<fieldset>

<legend>登录框</legend>

@using (Html.BeginForm())

{

   <label>账号：</label>@Html.TextBox("txtName")

        <br />

   <label>密码：</label>@Html.Password("txtPwd")

        <br />

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

    }

</fieldset>

利用JQuery获取登录用户名和密码，然后POST给LogOn方法，注意：这里传递过去的参数名必须为usn和pwd，要和LogOn方法里面的参数名一致。