ASP.NET MVC 實現帶論壇功能的網站 第一步——-實現用戶註冊.
首先我們要實現用戶的註冊功能。進入visual studio 點擊文件->新建->項目->選擇ASP.NET Web應用程序(.NET Framework)->選擇的模板為MVC。創建成功的項目應該是這樣的
這個時候在View文件夾下面Home文件夾有三個系統默認創建的三個.cshtml的網頁文件,對於我們來說我們是不需要的所以可以把它刪除掉,然後View文件夾下面還有個share文件夾下的東西也是我們不需要的一起刪除掉,最後把View文件夾下的_ViewStart.cshtml也刪除了,我們都是不需要的。
我們在controller文件夾下右鍵新建控制器,取名為LoginController。成功後的頁面應該是這樣的
給大家講一下,這裏的Index()我們用mvc裏面的話來說是action,返回值是ActionResult,即返回一個網頁。新建的Index()是沒有對應網頁和他想呼應的,我們點擊Index()選中後右鍵添加視圖(視圖名最好和action的名字是一樣的!),這個時候我們會進入這樣的頁面:
這個頁面的位置是在View文件夾下Login文件夾中的,這個時候你可以選擇在這上面寫網頁??,當然也可以選擇把你寫好的網頁Ctrl+C Ctrl+V 過來。我想讓大家學會怎麽完成這個功能,界面美化就看自己喜好了吧。請大家看我下面的截圖:
我寫的網頁需要引入css樣式,而我已經把css樣式復制進了我的項目裏面css文件夾了,這個時候還需要:右鍵css文件夾點擊添加現有項,找到文件路徑將兩個css文件添加進項目裏面。引入樣式表的時候,路徑前面一定要加~ 假如需要引入圖片方法和引入樣式表異曲同工
<link type="text/css" rel="stylesheet" href="~/css/registerLayour.css" />
這個時候我們點擊瀏覽看看網頁是否成功運行:(當你新添加一個視圖的時候view文件夾下就會有一個_ViewStart.cshtml的文件你需要把它刪除免得影響你的布局)
這個時候頁面的準備工作也就完成了,到了該我們寫功能的時候了。我們都知道把這些數據提交給服務端可以用form表單來提交,把所有這些input框放入form表單中即可。但是我們在註冊的時候需要進行很多的判別工作,例如:有沒有空項,有沒有要求輸入數字的地方你輸入文字,亦或是這個用戶名是否有人已經註冊了等等... 這個時候如果我們用form表單,服務端也會給我們反饋信息,但是我們用什麽來處理這些反饋信息又是一件麻煩的事情。所以我們提交註冊信息的時候不用form表單,而使用Ajax。
我將以我寫的網頁為例子,請大家看下面源碼,是我input的命名之類的:
<div class="menuRegister"> <div class="divBox"> <input type="text" name="userName" placeholder="用戶名" class="inputCss" id="userName"> </div> <div class="divBox"> <input type="password" name="passWord" placeholder="密碼" class="inputCss" id="passWord"> </div> <div class="divBox"> <input type="password" name="passWordAgain" placeholder="確認密碼" class="inputCss" id="passWordAain"> </div> <div class="divBox"> <input type="text" name="sex" placeholder="性別" class="inputCss" id="sex"> </div> <div class="divBox"> <input type="number" name="age" placeholder="年齡" class="inputCss" id="age"> </div> <div class="divBox"> <input type="number" name="tel" placeholder="11位聯系電話" class="inputCss" id="tel"> </div> <div class="divBox"> <input type="number" name="qq" placeholder="qq" class="inputCss" id="qq"> </div> <div class="divBox"> <input type="button" name="sendForm" value="註冊" class="inputForm" id="sendForm" #nclick="sendFormContent()"> </div> </div>
最後一個註冊按鈕有一個onclick點擊事件sendFormContent(),這個事件位於我所創建的名為js的文件夾下register.js的文件中,請大家看詳細代碼:
function sendFormContent() { var xmlhttp; if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest; } else { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } userName = document.getElementById(‘userName‘).value; passWord = document.getElementById(‘passWord‘).value; passWordAain = document.getElementById(‘passWordAain‘).value; sex = document.getElementById(‘sex‘).value; age = document.getElementById(‘age‘).value; tel = document.getElementById(‘tel‘).value; qq = document.getElementById(‘qq‘).value; if (userName == null || userName == ‘‘) { alert(‘用戶名不能為空!‘); return 0; } if (userName.length > 12) { alert(‘用戶名最好位英文,且不超過12個長度!‘); return 0; } if (passWord.length < 6) { alert(‘密碼至少6位!‘); return 0; } if (passWord == null || passWord == ‘‘) { alert(‘密碼不能為空!‘); return 0; } if (passWordAain != passWord) { alert(‘兩次密碼不一致!‘); return 0; } if (sex == null || sex == ‘‘) { alert(‘性別不能為空!‘); return 0; } if (sex != ‘男‘ && sex != ‘女‘) { alert(‘性別請輸入男或女!‘); return 0; } if (age == null || age == ‘‘) { alert(‘年齡不能為空!‘); return 0; } if (tel == null || tel == ‘‘) { alert(‘電話不能為空!‘); return 0; } if (age < 0 || age > 120) { alert(‘請輸入合理的年齡!‘); return 0; } if (tel < 9999999999 || tel > 99999999999) { alert(‘請輸入11位電話號碼‘); return 0; } xmlhttp.onreadystatechange = function () { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { if (xmlhttp.responseText == ‘T‘) { alert(‘註冊成功!‘); document.getElementById(‘userName‘).value = ‘‘; document.getElementById(‘passWord‘).value = ‘‘; document.getElementById(‘passWordAain‘).value = ‘‘; document.getElementById(‘sex‘).value = ‘‘; document.getElementById(‘age‘).value = ‘‘; document.getElementById(‘tel‘).value = ‘‘; document.getElementById(‘qq‘).value = ‘‘; } if (xmlhttp.responseText == ‘F‘) { alert(‘註冊失敗!‘); } if (xmlhttp.responseText == ‘EF‘) { alert(‘此用戶名以註冊,請重新選擇用戶名!‘); } } } data = "userName=" + userName; data += "&passWord=" + passWord; data += "&sex=" + sex; data += "&age=" + age; data += "&tel=" + tel; data += "&qq=" + qq; xmlhttp.open(‘POST‘, ‘isRegister‘); xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xmlhttp.send(data); }
從上面的代碼我們看出,我將要把用戶註冊的數據提交到名為isRegister的action中,我們需要到LoginController下寫一個isRegister()的方法來處理傳入數據, 從上面的xmlhttp.responseText的返回信息判斷 我們寫的isRegister這個方法將會返回三類字符串:“T”, "F", "EF"。"T"表示處理類正確把註冊信息插入數據庫, “F”表示期間有錯誤插入失敗, “EF”表示這個用戶名已經有人註冊了。
依照這個思路,我們在model的文件夾下面創建一個名為userInfor的類,類裏面存放和註冊信息對應的屬性
我使用和數據庫連接的方式是使用using System.Data; using System.Data.SqlClient;下提供的一些方法(在mvc下不推薦這樣使用,因為比較繁瑣....),在mvc下推薦使用 entity framework這個框架,會有數據庫對應的模型,我之前為了快速完成功能,所以就使用了自己用的比較順手的連接數據庫的方法,而沒有使用EF這個框架...後面考慮細節優化之類的會改的,你們怎麽使用都是可以的只要是完成了數據庫的增刪改查就是ok的(性能我們先不考慮哈哈,數據量太少了)。
請在在model層下面建一個SQLHelpers.cs這個類用來寫一個連接數據庫的幫助類,代碼如下:
using System; using System.Collections.Generic; using System.Configuration; using System.Data; using System.Data.SqlClient; using System.Linq; using System.Web; namespace 實現註冊.Models { public class SQLHelpers { public SqlConnection sqlConn { get; set; } public SQLHelpers(string strConnectionStringName) { string strConn = ConfigurationManager.ConnectionStrings[strConnectionStringName].ConnectionString; sqlConn = new SqlConnection(strConn); } public void OpenDB() { if (sqlConn.State == ConnectionState.Closed) { sqlConn.Open(); } } public void CloseDB() { if (sqlConn.State != ConnectionState.Closed) { sqlConn.Close(); } } } }
然後再在這個Web.config文件下<configuration></configuration>節點中加一個配置信息<connectionStrings><add name="sqlConstring" connectionString="server=.;user id=sa; password=【你本地數據庫密碼】; database=【你要連接的數據庫】;"></add></connectionStrings>。
這裏我們創建一個名為Lazy的數據庫創建一個名為userInfor的表
--*******創建數據庫*******-- IF exists (SELECT * FROM sys.databases WHERE name = ‘Lazy‘) DROP DATABASE Lazy GO CREATE DATABASE Lazy GO --*******使用數據庫*******-- USE Lazy GO --*******創建用戶個人信息表*******-- IF EXISTS(SELECT * FROM SYSOBJECTS WHERE name = ‘user_infor‘) DROP TABLE user_infor GO CREATE TABLE user_infor ( userName NVARCHAR(12) primary key, pwd NVARCHAR(50), sex NVARCHAR(2), age NVARCHAR(3), tel NVARCHAR(12), qq NVARCHAR(10) )
萬事俱備就差在LoginController中寫action了:
using System; using System.Collections.Generic; using System.Data; using System.Data.SqlClient; using System.Linq; using System.Web; using System.Web.Mvc; using 實現註冊.Models; namespace 實現註冊.Controllers { public class LoginController : Controller { // GET: Login public ActionResult Index() { return View(); } [HttpPost] public string isRegister(userInfor user) { SQLHelpers sql = new SQLHelpers("sqlConstring"); try { sql.OpenDB(); //要執行的數據庫語句 //兩個存放存儲過程的string string isExistNamePro = "P_IsExitId"; //將要執行的存儲過程與要連接的數據庫綁定 SqlCommand cmd = new SqlCommand(isExistNamePro, sql.sqlConn); //說明cmd的類型是存儲過程 cmd.CommandType = CommandType.StoredProcedure; //P_IsExitId存儲過程需要一個userName作為參數,用SqlParameter定義傳入的參數名稱(要和存儲過程傳入參數名一致),類型,類型長度 SqlParameter paraValue = new SqlParameter("@userName", SqlDbType.NVarChar, 12); //給這個傳入參數賦值 paraValue.Value = user.userName.Trim(); //把SqlParameter對象添加到cmd.Parameters對象後面 cmd.Parameters.Add(paraValue); //聲明一個SqlDataReader並且執行與cmd綁定的sql存儲過程 SqlDataReader sdr = cmd.ExecuteReader(); //讓SqlDataReader前進到下一條記錄 sdr.Read(); //如果有值即查詢出有結果則表示有此記錄 if (sdr.HasRows) { //此用戶名以有人註冊 sql.CloseDB(); cmd.Dispose(); sdr.Close(); return "EF"; } //沒有註冊就註冊此用戶名 sql.CloseDB(); cmd.Dispose(); sdr.Close(); sql.OpenDB(); string cmdText = "INSERT INTO user_infor(userName, pwd, sex, age, tel, qq) VALUES(‘" + user.userName.Trim() + "‘, ‘" + user.passWord.Trim() + "‘, ‘" + user.sex.Trim() + "‘, ‘" + user.age.Trim() + "‘, ‘" + user.tel.Trim() + "‘, ‘" + user.qq.Trim() + "‘)"; //將要發送的數據庫語句和要連接的數據庫綁定 cmd = new SqlCommand(cmdText, sql.sqlConn); //cmd.ExecuteNonQuery() 數據庫執行發送的sql語句 if (cmd.ExecuteNonQuery() == 1) { //如果受影響的行數為1代表插入成功返回T sql.CloseDB(); return "T"; } //不成功就返回F sql.CloseDB(); return "F"; } catch { sql.CloseDB(); return "F"; } } } }
存儲過程代碼如下:
--*******添加驗證有沒有Id的存儲過程*******-- IF EXISTS(SELECT name FROM SYSOBJECTS WHERE name = ‘P_IsExitId‘ AND TYPE = ‘P‘) DROP PROC P_IsExitId GO CREATE PROC P_IsExitId @userName NVARCHAR(12) AS SELECT userName FROM user_infor WHERE userName = @userName GO
讓我們看看是否成功吧,我們先看數據庫有上面數據:
那我們創建一個bokeyuan的用戶看看能否成功吧:
點擊註冊:
通過Ajax處理以後彈出註冊成功,我們看看是否真的成功吧:
經過查詢發現數據已經插入數據庫了。
看似完成一個註冊功能很簡單,其實工作也是較繁瑣的。我給大家簡單的提了思路和方法,大家可以自行嘗試,在真正完成的過程中肯定沒有那麽順利,假如碰到了上面問題,或者需要註冊部分的源碼都歡迎給我留言,我看到了會一一回復的。在此也要感謝:最美老師韓老師~ 最帥老師廖老師~
ps:數據庫密碼因為我圖方便直接明文儲存,其實有很多加密方式,在c#中也提供了操作簡單的md5加密方式供大家使用,大家可以自行百度一下。共同進步!!!
ASP.NET MVC 實現帶論壇功能的網站 第一步——-實現用戶註冊.