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

原文地址：https://www.cnblogs.com/Oliva/p/9745585.html

时间： 2024-10-13 01:00:26

ASP.NET MVC 实现带论坛功能的网站第一步——-实现用户注册.

ASP.NET MVC 实现带论坛功能的网站第一步——-实现用户注册.的相关文章

ASP.NET MVC 实现带论坛功能的网站第一步——实现用户注册

微信开发】【Asp.net MVC】-- 微信分享功能

Asp.Net MVC页面静态化功能实现二：用递归算法来实现

通过ASP.NET MVC框架 + 原生JavaScript + Ajax + SQL SERVER 实现一个简单的有论坛功能的网站（有通过iis发布的例子）

[转] ASP.NET MVC 模型绑定的功能和问题

ASP.NET Core 实现带认证功能的Web代理服务器

【微信开发】【Asp.net MVC】-- 微信分享功能

ASP.NET MVC实现剪切板功能

asp.net MVC 模拟实现与源码分析-第一节

ASP.NET MVC 实现带论坛功能的网站 第一步——-实现用户注册.

ASP.NET MVC 实现带论坛功能的网站 第一步——-实现用户注册.的相关文章

ASP.NET MVC 实现带论坛功能的网站第一步——-实现用户注册.

ASP.NET MVC 实现带论坛功能的网站第一步——-实现用户注册.的相关文章