一、登入資料庫，在資料庫中建立表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實現使用者的註冊、登陸驗證、登陸 的內容就給大家介紹到這裡，希望對大家有所協助！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
