MVC3学习:利用mvc3+ajax实现登录
2013-06-29 13:51
716 查看
用到的工具或技术:vs2010,EF code first,JQuery ajax,mvc3。
第一步:准备数据库。
利用EF code first,先写实体类,然后根据实体类自动创建数据库;或者先创建数据库,再写实体类,都可以。如果实体比较多,可以先创建数据库后,利用POCO工具来自动生成实体类。
我这里只有一个登录用户表,非常简单,自己手动在Model写实体类:
View Code
第二步:写控制器
直接上代码
login方法是用来生成视图,LogOn方法用来判断登录是否成功。注意:要用Request.IsAjaxRequest()来判断数据的传送方式,是否是利用ajax来传送数据。
第三步:创建视图
利用JQuery获取登录用户名和密码,然后POST给LogOn方法,注意:这里传递过去的参数名必须为usn和pwd,要和LogOn方法里面的参数名一致。
第一步:准备数据库。
利用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方法里面的参数名一致。
相关文章推荐
- MVC3学习第十二章 佟掌柜第一弹----利用MVC3实现用户的注册登录和了解MVC中的分部视图、用户控件
- MVC3学习:利用mvc3+ajax结合MVCPager实现分页
- 【Spring学习笔记-MVC-5】利用spring MVC框架,实现ajax异步请求以及json数据的返回
- MVC3学习:利用mvc3+ajax检测用户是否被注册
- MVC3学习第八章 葵花点穴手之指如疾风----MVC3下实现数据的批量删除和利用EF初始化我们的数据
- MVC3学习第十三章 佟掌柜第二弹——MVC3下利用陕北吴旗娃的分页控件实现数据分页
- 【CI学习笔记】利用jquery中的ajax,调用接口,实现登录
- MVC3学习第十四章 佟掌柜第三弹——MVC3下利用陕北吴旗娃的验证码控件实现验证码功能以及在mvc3下使用编辑器
- asp.net mvc利用 ajax实现输入自动完成
- 【MVC】会员注册/登录,普通验证,会员名是否注册Ajax验证以及会员邮件验证实现原理
- Android基础学习总结(十二)——利用Bmob实现用户账户体系(注册、登录、验证等)
- MVC3学习第九章 葵花点穴手之势如闪电----MVC3下实现用户信息的查询以及通过实体模型建立商品和类别的主外键关系
- 【知了堂学习笔记】利用js、ajax实现遍历行传参
- vue.js学习07之使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
- 系统学习MVC3搭建网站(4)--利用NuGet安装Ninject.MVC3实现依赖注入(DI)
- spring mvc+spring+mybatis+ajax实现登录验证
- sql server 关于表中只增标识问题 C# 实现自动化打开和关闭可执行文件(或 关闭停止与系统交互的可执行文件) ajaxfileupload插件上传图片功能,用MVC和aspx做后台各写了一个案例 将小写阿拉伯数字转换成大写的汉字, C# WinForm 中英文实现, 国际化实现的简单方法 ASP.NET Core 2 学习笔记(六)ASP.NET Core 2 学习笔记(三)
- ???SpringMVC_02 学习分层思想,利用分层实现telecom的登录模块
- .net mvc 利用cookie实现自动登录 退出后注销信息
- 【MVC】会员注册/登录,普通验证,会员名是否注册Ajax验证以及会员邮件验证实现原理