MVC與ajax【轉】

時間  2019-11-10
標籤 mvc ajax 欄目 Ajax 简体版
原文   原文鏈接

首先咱們要實現用戶的註冊功能。進入visual studio 點擊文件->新建->項目->選擇ASP.NET Web應用程序(.NET Framework)->選擇的模板爲MVC。建立成功的項目應該是這樣的css

　　　　

 

　　這個時候在View文件夾下面Home文件夾有三個系統默認建立的三個.cshtml的網頁文件，對於咱們來講咱們是不須要的因此能夠把它刪除掉，而後View文件夾下面還有個share文件夾下的東西也是咱們不須要的一塊兒刪除掉，最後把View文件夾下的_ViewStart.cshtml也刪除了，咱們都是不須要的。html

　　咱們在controller文件夾下右鍵新建控制器，取名爲LoginController。成功後的頁面應該是這樣的sql

　　

　　給你們講一下，這裏的Index()咱們用mvc裏面的話來講是action，返回值是ActionResult，即返回一個網頁。新建的Index()是沒有對應網頁和他想呼應的，咱們點擊Index()選中後右鍵添加視圖（視圖名最好和action的名字是同樣的！），這個時候咱們會進入這樣的頁面：數據庫

　　

　　這個頁面的位置是在View文件夾下Login文件夾中的，這個時候你能夠選擇在這上面寫網頁😄，固然也能夠選擇把你寫好的網頁Ctrl+C Ctrl+V 過來。我想讓你們學會怎麼完成這個功能，界面美化就看本身喜愛了吧。請你們看我下面的截圖：mvc

 

　　我寫的網頁須要引入css樣式，而我已經把css樣式複製進了個人項目裏面css文件夾了，這個時候還須要：右鍵css文件夾點擊添加現有項，找到文件路徑將兩個css文件添加進項目裏面。引入樣式表的時候，路徑前面必定要加~ 假如須要引入圖片方法和引入樣式表殊途同歸app

<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處理之後彈出註冊成功，咱們看看是否真的成功吧：

　　

　　通過查詢發現數據已經插入數據庫了。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程