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.Userswhere c.UserName == usn&& c.PassWord == pwdselect c).Count();if (n != 1)return Content("-1");elsereturn 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>