mvc C# JavaScript LigerUI oracle实现用户的注册、登陆验证、登陆
一、登录数据库,在数据库中创建表User00,并且插入数据。
表的字段分别为:
Id(编号)、Name(姓名)、Grid(级别)、Score(积分)、Password(密码)、Age(年龄)、Code(邀请码)。(其中编号是自动编号)
部分命令如下:
select * from User00; /*查询User00*/ insert into User00 values('one','优',10000,'123',24); /*插入一行数据*/ update User00 set Grid='优' where Id=001; /*更新已存在数据*/ delete from User00; /*删除表里所有数据*/ alter table User00 rename Code to Code; /*更改字段名*/ update User00 set Code =null; /*删除某一列所有数据*/ alter table User00 add Age number; /* user00中插入一列*/ alter table User00 modify Age varchar2(4); /*更改某字段类型*/ delete from User00 where Score is null; /*删除密码为空的所有行*/
二、新建mvc项目kaohe00,添加一个控制器Home。
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using Model; using log4net; using System.Reflection; //using Bll; namespace kaohe00.Models { public class HomeController : Controller { // //数据库 数据库的 private static Bll.Test00 test00 = new Bll.Test00("Data Source=YWW;User Id=Test00;Password=Test00;"); //连接数据库 // GET: /Home/ public ActionResult Index() //显示主页的动作方法 { return View(); } public JsonResult ShowInfo() //把数据库里的表的数据发送到前台的方法 { var list = test00.GetList(); // return Json(new { Rows = list, Total = list.Count }, JsonRequestBehavior.AllowGet); } public ActionResult Register() //注册的动作方法 { return View(); } } }
三、为Home的Index添加一个视图,显示主页的信息,将数据库的表User00的数据放到主页视图的表格中。
1、主页视图代码:
@{ ViewBag.Title = "Index"; } <script src="~/Content/jquery/jquery-1.9.0.min.js"></script> <script src="~/Content/script/common.js"></script> <script src="~/Content/ligerui/ligerui.all.js"></script> <link href="~/Content/ligerui/skins/Aqua/css/ligerui-all.css" rel="stylesheet" /> <head> <title>我的主页</title> </head> <div id="maingrid"></div> <script type="text/javascript"> $(function () { $("#maingrid").ligerGrid({ columns: [ { display: '编号', name: 'Id',heigth:100,width:250 }, { display: '姓名', name: 'Name', heigth: 100, width: 250 }, { display: '积分', name: 'Score', heigth: 100, width: 250 }, { display: '密码', name: 'Password', heigth: 100, width: 250 }, { display: '级别', name: 'Grid', heigth: 100, width: 250 }, { display: '邀请码', name: 'Code', heigth: 100, width: 250 } ], url: "/Home/ShowInfo", //调用显示自己信息的动作方法 }); }); </script>
2、主页视图界面:
四、实现登录功能
1、添加一个Login控制器。
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace kaohe00.Controllers { public class LoginController : Controller { // // GET: /Login/ //数据库 private static Bll.Test00 test00 = new Bll.Test00("Data Source=YWW;User Id=Test00;Password=Test00;"); //连接数据库 public ActionResult Index() { return View(); } public JsonResult LoginTest(string Id ,string Password) //登录验证动作方法 { var succ = test00.LoginTest(Id, Password); return Json(new { Succ = succ }); } } }
2.1、为Login的Index添加一个视图
视图代码:
@{ ViewBag.Title = "Index"; } <script src="~/Content/jquery/jquery-1.9.0.min.js"></script> <script src="~/Content/script/common.js"></script> <script src="~/Content/ligerui/ligerui.all.js"></script> <link href="~/Content/ligerui/skins/Aqua/css/ligerui-all.css" rel="stylesheet" /> <head> <title>登录</title> </head> <div id="login"> <div id="Lform"></div> </div> <script type="text/javascript"> $(function () { $("#Lform").ligerForm({ fields: [ { display: "编号", name: "Id", newline: false, type: "text", }, { display: "密码", name: "Password", newline: true, type: "password", } ], }); $.ligerDialog.open({ target: $("#login"), title: "登录", allowClose: false, buttons: [ { text: '登录', onclick: function (item, dialog) { var form = liger.get("Lform"); var data = form.getData(); if(data.Id==""||data.Password=="") { alert("用户名或密码不能为空"); return false; } $.post("/Login/LoginTest", data, function (result) { //alert(result.Succ); if(result.Succ == true) { window.document.location.href = "/Home/Index"; } else { alert("登录失败"); return false; } }); } }, { text: '注册', onclick: function (item, dialog) { window.document.location.href = "/Register/Index"; } }, ] }); }); </script>
2.2、登录视图的界面:
五、实现注册功能
1、添加一个注册控制器Register
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using Model; using log4net; using System.Reflection; namespace kaohe00.Controllers { public class RegisterController : Controller { //数据库 private static Bll.Test00 test00 = new Bll.Test00("Data Source=YWW;User Id=Test00;Password=Test00;"); // // GET: /Register/ public ActionResult Index() { return View(); } public JsonResult Register(User00 user00) { var succ=test00.AddNew(user00)>0?1:0; return Json(new { Succ = succ }, JsonRequestBehavior.AllowGet); } } }
2.1、为注册控制器Register的index添加一个视图
@{ ViewBag.Title = "Index"; } <script src="~/Content/jquery/jquery-1.9.0.min.js"></script> <script src="~/Content/script/common.js"></script> <script src="~/Content/ligerui/ligerui.all.js"></script> <link href="~/Content/ligerui/skins/Aqua/css/ligerui-all.css" rel="stylesheet" /> <script src="scripts/jquery.validate.js" type="text/javascript"></script> <head> <title>注册页面</title> </head> <div id="reform"></div> <div id="rebutton"><input style="margin-left:100px" type="button" value="注册" onclick="register()"></div> <script type="text/javascript"> function register() { // alert("test"); var form = liger.get("reform"); // alert(form.name.getData); var data = form.getData(); if (data.Name == "" || data.Password == ""||data.Grid == "") { alert("请完整填写必填信息"); return false; } //alert("test"); $.post("/Register/Register", data, function (data) { alert("注册成功"); window.document.location.href = "/Home/Index"; }); } $(function () { $("#reform").ligerForm({ inputWidth: 170, labelWidth: 90, space: 40, fields: [ { display: "姓名 ", name: "Name", newline: true, type: "text",validate:{required:true}}, { display: "密码", name: "Password", newline: true, type: "password", type: "text", validate: { required: true } }, { display: "年龄", name: "Age", newline: true, type: "text" }, { display: "会员级别", name: "Grid", newline: true, type: "text", type: "text", validate: { required: true } }, { display: "邀请码", name: "Code", newline: true, type: "text" } ], }); }); </script>
2.2注册视图的界面
六、为数据库的表建立Model模型实体类,建立一个类文件命名为User00.
using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace Model { /// <summary> /// </summary> public class User00 { public int Id { get; set; } public string Name { get; set; } public string Grid { get; set; } public int Score { get; set; } public string Password { get; set; } public int Age { get; set; } public int Code { get; set; } } }
七、前文出现的Bll命名空间和类Test00等一些代码是引用了另外的库。
1、目录
2、其中文件Test00的代码:
using Blocks.Data; using Blocks.Data.CustomType; using Blocks.Data.DbProviders.Oracle; using kaohe00.Mappings; using Model; using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace Bll { public class Test00 { /// <summary> /// 数据库 /// </summary> private Database oracle = null; public Test00(string connectionString) { this.oracle = new Database(new OracleDbProvider(connectionString)); this.oracle.Mappings(typeof(User00Mapping).Assembly); } public List<User00> GetList() //定义GetList函数,其功能:获得一个类型是User00类的列表相当于数组 { var list = this.oracle.Select<User00>().ToList(); return list; } public int AddNew(User00 user00) { return this.oracle.Insert(user00); } public bool LoginTest(string Id,string Password) //函数功能:判断前台穿的值是否在数据库中的 { // var search = this.oracle.Select<User00>(); // var list = search.Where(t => t.Id == int.Parse(Id)) && t.Password == Password; var search = this.oracle.Select<User00>().Where(t => t.Id == int.Parse(Id) && t.Password == Password); var list = search.ToList(); //list相当于数组 if (list.Count > 0) //??!! { //var user = list.First(); return true; } else { return false; } } } }
3、其中的kaohe00.Mappings文件里的User00Mapping.cs的文件的代码:
using Blocks.Data.Mapping; using Model; using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace kaohe00.Mappings { public class User00Mapping : ClassMap<User00> { public User00Mapping() { Map(t => t.Id).AutoNumber(); Map(t => t.Name); } } }
八、设置路径: defaults: new { controller = "Login", action = "Index", id = UrlParameter.Optional },使其先执行Login。
九、查看效果:
1、点击登录后密码错误的情况:
或者
2、输入正确的编号密码,进入主页视图界面
3、点击注册后进入注册视图界面
4、在注册界面输入内容,注册失败和成功的情况:
或者
注册成功后点击确定,进入主页视图界面
可以看到主页视图界面新添加的信息
好了,关于mvc C# JavaScript LigerUI oracle实现用户的注册、登陆验证、登陆 的内容就给大家介绍到这里,希望对大家有所帮助!
相关文章
使用PHP+JavaScript将HTML页面转换为图片的实例分享
这篇文章主要介绍了使用PHP+JavaScript将HTML元素转换为图片的实例分享,文后结果的截图只能体现出替换的字体,也不能说将静态页面转为图片可以加快加载,只是这种做法比较interesting XD需要的朋友可以参考下...2016-04-19- 在昨天的《Javascript权威指南》学习笔记之十:ECMAScript 5 增强的对象模型一文中,对于一段代码的调试出现了一个奇怪现象,现将源代码贴在下面: 复制代码 代码如下: <script type="text/javascript"> function Person(){}...2014-05-31
- 最近做一个小项目不可避免的需要前端脚本与后台进行交互。由于是在asp.net中实现,故问题演化成asp.net中jiavascript与后台c#如何进行交互。...2020-06-25
- 复制代码 代码如下: //element:需要添加新样式的元素,value:新的样式 function addClass(element, value ){ if (!element.className){ element.className = value; }else { newClassName = element.className; newClas...2014-05-31
- 在javascritp中,不一定只有对象方法的上下文中才有this, 全局函数调用和其他的几种不同的上下文中也有this指代。 它可以是全局对象、当前对象或者任意对象,这完全取决于函数的调用方式。JavaScript 中函数的调用有以下...2015-03-15
- 事件触发器从字面意思上可以很好的理解,就是用来触发事件的,但是有些没有用过的朋友可能就会迷惑了,事件不是通常都由用户在页面上的实际操作来触发的吗?这个观点不完全正确,因为有些事件必须由程序来实现,如自定义事件,jQue...2014-06-07
- 首先,我想到的是另建一个结果数组,用来存储原始数组中不重复的数据。遍历原始数组依次跟结果数组中的元素进行比较,检测是否重复。于是乎,我写出了如下代码A: Array.prototype.clearRepetitionA = function(){ var resul...2015-11-08
- 有一道js面试题,题目是这样的:下列代码的执行结果是什么,为什么? 复制代码 代码如下: var i, j, k; for (i=0, j=0; i<10, j<6; i++, j++) { k = i+j; } document.write(k); 答案是显示10,这道题主要考察JavaScript的逗...2015-03-15
- 这篇文章主要介绍了Javascript类型转换的规则实例解析,涉及到javascript类型转换相关知识,对本文感兴趣的朋友一起学习吧...2016-02-27
- 这篇文章主要介绍了JavaScript预解析,对象的的相关资料,小编觉得这篇文章写的还不错,需要的朋友可以参考下,希望能够给你带来帮助...2021-11-10
- 通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素。 HTML DOM (文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。 HTML DOM 模型被构造为对象的树: 通过可编程的对象模型,Java...2015-10-23
- 1、ActiveX向Javascript传参 复制代码 代码如下: <script language="javascript" for="objectname" event="fun1(arg)"> fun2(arg); </script> objectname为ActiveX控件名,通过<object>标签里的id属性设定,如下; 复制...2014-06-07
- Window有navigator对象让我们得知浏览器的全部信息.我们可以利用一系列的API函数得知浏览器的信息.JavaScript代码如下:function message(){ txt = "<p>浏览器代码名: " + navigator.appCodeName + "</p>";txt+= "<p>...2015-11-24
JavaScript学习笔记整理_setTimeout的应用
下面小编就为大家带来一篇JavaScript学习笔记整理_setTimeout的应用。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-10-03- 这篇文章主要为大家介绍了JavaScript设计模式中的装饰者模式,对JavaScript设计模式感兴趣的小伙伴们可以参考一下...2016-01-21
- 虽然ES6都还没真正发布,但已经有用ES6重写的程序了,各种关于ES789的提议已经开始了,这你敢信。潮流不是我等大众所能追赶的。潮流虽然太快,但我们不停下学习的步伐,就不会被潮流丢下的,下面来领略下ES6中新特性,一堵新生代JS...2015-11-24
- 神马是“解释器模式”?先翻开《GOF》看看Definition:给定一个语言,定义它的文法的一种表示,并定义一个解释器,这个解释器使用该表示来解释语言中的句子。在开篇之前还是要科普几个概念: 抽象语法树: 解释器模式并未解释如...2014-06-07
JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍
下面小编就为大家带来一篇JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-05-20- ---恢复内容开始---1.location.href.....(1)self.loction.href="http://www.cnblogs.com/url" window.location.href="http://www.cnblogs.com/url" 以上两个用法相同均为在当前页面打开URL页面 (2)this.locati...2015-10-30
- tab切换在网页中很常见,故最近总结了4种实现方法。 首先,写出tab的框架,加上最简单的样式,代码如下: <!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style> *{ pa...2015-11-08