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加密方式供大家使用，大家可以自行百度一下。共同進步！！！