使用 .NET C# MVC 4 Razor 创建自定义用户登录表单

Vygandas Pliasas

4.70/5 (85投票s)

2012年10月23日

CPOL

4分钟阅读

784890

29520

关于使用 MVC4、C# 和 Razor 创建自定义登录表单的文章

下载源代码 - 11.8 MB

介绍

大多数 Web 项目都需要处理用户，因此需要用户登录部分。在这篇文章中，我将介绍如何快速创建用户登录、注销功能并显示该状态。

这篇文章与任何特定的数据库无关，因此您可以使用任何您需要的数据库，例如 MSSQL、PostgreSQL、MySQL 等... 在这种情况下，我将展示 MSSQL 的示例。

达到目标所需的步骤

步骤 1. 创建一个项目。

在这些屏幕截图中，我正在创建 MVC4 项目，但本教程也应该适用于 MVC3。

然后选择您正在使用 Razor 引擎。如果您计划稍后在您的项目中使用测试，请选中创建测试。如果没有 - 请保持未选中状态。

步骤 2. 创建一个数据库

右键单击 App_Data -> 添加 -> 新建项目... ->Data -> SQL Server 数据库 -> 确定。

现在我们需要一个用户表。

右键单击表格并打开“新建查询”窗口。

现在将以下代码粘贴到该查询窗口中，然后单击执行（快捷方式 CTRL+SHIFT+E）

CREATE TABLE [dbo].[System_Users]
(
	[Id] INT NOT NULL IDENTITY ,
	[Username] NVARCHAR(50) NOT NULL,
	[Password] NVARCHAR(MAX) NOT NULL,
	[RegDate] DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
	[Email] NVARCHAR(50) NOT NULL,
	PRIMARY KEY ([Id])
)
GO
CREATE INDEX [IX_System_Users_Username] ON [dbo].[System_Users] ([Username])
GO
INSERT INTO [dbo].[System_Users]
	([Username], [Password], [Email])
VALUES
	('test', 'a94a8fe5ccb19ba61c4c0873d391e987982fbbd3', 'test@test.test')
GO

此代码已创建一个表，并插入了用户 test，密码为 test。密码使用 SHA1 进行编码。要生成您自己的密码 - 请使用在线转换器转换为 sha1，但在此示例中最好保持原样。

步骤 3. 创建一个 HomeController

好的。现在我们需要一个 home 控制器，它将是我们的第一个页面。

步骤 4. 创建 Home 视图。

右键单击方法名称 -> 创建视图。

将其命名为 Index（与方法名称相同），并选择使用布局。

步骤 5. 创建用户模型

用户模型用于处理用户信息和创建表单。

右键单击 Models -> 添加 -> 新建项目... -> 代码 -> 类；将其命名为 User.cs。

在 User 类代码中应该如下所示

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
 
namespace Creating_a_custom_user_login_form.Models
{
    public class User
    {
        [Required]
        [Display(Name = "User name")]
        public string UserName { get; set; }
 
        [Required]
        [DataType(DataType.Password)]
        [Display(Name = "Password")]
        public string Password { get; set; }
 
        [Display(Name = "Remember on this computer")]
        public bool RememberMe { get; set; }
        
        /// <summary>
        /// Checks if user with given password exists in the database
        /// </summary>
        /// <param name="_username">User name</param>
        /// <param name="_password">User password</param>
        /// <returns>True if user exist and password is correct</returns>
        public bool IsValid(string _username, string _password)
        {
            using (var cn = new SqlConnection(@"Data Source=(LocalDB)\v11.0;AttachDbFilename" + 
              @"='C:\Tutorials\1 - Creating a custom user login form\Creating " + 
              @"a custom user login form\App_Data\Database1.mdf';Integrated Security=True")) 
            {
                string _sql = @"SELECT [Username] FROM [dbo].[System_Users] " + 
                       @"WHERE [Username] = @u AND [Password] = @p";
                var cmd = new SqlCommand(_sql, cn);
                cmd.Parameters
                    .Add(new SqlParameter("@u", SqlDbType.NVarChar))
                    .Value = _username;
                cmd.Parameters
                    .Add(new SqlParameter("@p", SqlDbType.NVarChar))
                    .Value = Helpers.SHA1.Encode(_password);
                cn.Open();
                var reader = cmd.ExecuteReader();
                if (reader.HasRows)
                {
                    reader.Dispose();
                    cmd.Dispose();
                    return true;
                }
                else
                {
                    reader.Dispose();
                    cmd.Dispose();
                    return false;
                }
            }
        }
    }
}

可能需要在您的计算机上修改连接字符串。

var cn = new SqlConnection(@"Data Source=(LocalDB)\v11.0;AttachDbFilename='C:\Tutorials\1 - Creating a custom user login form\Creating a custom user login form\App_Data\Database1.mdf';Integrated Security=True")

可以在这里找到它：

注意：连接字符串必须放在 web.config 中！

步骤 6. 创建其他帮助程序

您可能已经注意到 Helpers.SHA1.Encode(_password); 在红线下划线。这是因为还没有这样的类和方法。

现在我们将向我们的解决方案中添加一个额外的共享项目并创建我们的帮助程序。

在解决方案资源管理器中，右键单击解决方案，然后选择添加 -> 新建项目... -> Windows -> 类库；将其命名为 Helpers。

在解决方案资源管理器中，右键单击 Helpers 项目并选择添加 -> 新建项目... -> 代码 -> 类；将其命名为 SHA1。

此类中的代码必须如下所示

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
 
namespace Helpers
{
    public class SHA1
    {
        public static string Encode(string value)
        {
            var hash = System.Security.Cryptography.SHA1.Create();
            var encoder = new System.Text.ASCIIEncoding();
            var combined = encoder.GetBytes(value ?? "");
            return BitConverter.ToString(hash.ComputeHash(combined)).ToLower().Replace("-", "");
        }
    }
}

现在我们需要将其引用到我们的主项目中。右键单击我们的网站 project，然后添加引用... -> 选择 Helpers（复选框）并点击确定。

步骤 7. 创建用户控制器

我们需要一个用户控制器来管理即将登录或注销的用户。像之前一样创建控制器，并将其命名为 UserController。我更喜欢将其命名为 User（而不是 Users），因为它代表一个用户。

这是应该出现在其中的代码。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Security;
 
namespace Creating_a_custom_user_login_form.Controllers
{
    public class UserController : Controller
    {
        //
        // GET: /User/
        public ActionResult Index()
        {
            return View();
        }
 
        [HttpGet]
        public ActionResult Login()
        {
            return View();
        }
 
        [HttpPost]
        public ActionResult Login(Models.User user)
        {
            if (ModelState.IsValid)
            {
                if (user.IsValid(user.UserName, user.Password))
                {
                    FormsAuthentication.SetAuthCookie(user.UserName, user.RememberMe);
                    return RedirectToAction("Index", "Home");
                }
                else
                {
                    ModelState.AddModelError("", "Login data is incorrect!");
                }
            }
            return View(user);
        }
        public ActionResult Logout()
        {
            FormsAuthentication.SignOut();
            return RedirectToAction("Index", "Home");
        }
    }
}

步骤 8. 创建登录视图

右键单击登录方法名称并创建视图。

像以前一样使用布局模板。

步骤 9. 制作登录表单

代码应该如下所示

@model Creating_a_custom_user_login_form.Models.User
@{
    ViewBag.Title = "Login";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@using (Html.BeginForm())
{
    @Html.ValidationSummary(true, "Login failed. Check your login details.");
    <div>
        <fieldset>
            <legend>Login</legend>
            <div class="editor-label">
                @Html.LabelFor(u => u.UserName)
            </div>
            <div class="editor-field">
                @Html.TextBoxFor(u => u.UserName)
                @Html.ValidationMessageFor(u => u.UserName)
            </div>
            <div class="editor-label">
                @Html.LabelFor(u => u.Password)
            </div>
            <div class="editor-field">
                @Html.PasswordFor(u => u.Password)
                @Html.ValidationMessageFor(u => u.Password)
            </div>
            <div class="editor-label">
                @Html.CheckBoxFor(u => u.RememberMe)
                @Html.LabelFor(u => u.RememberMe)
            </div>
            <input type="submit" value="Log In" />
        </fieldset>
    </div>
}

在这里我们创建我们的表单，添加标签和验证器。

步骤 10. 编辑 _Layout.cshtml 页面（添加登录按钮）

此文件位于 Views -> Shared 文件夹中。

我们将添加此代码，以便它可以让我们登录、注销并显示我们的姓名。

<div style="width: auto; background-color: #728ea7;">
    @if (Request.IsAuthenticated) {
        <strong>@Html.Encode(User.Identity.Name)</strong>
        @Html.ActionLink("Sign Out", "Logout", "User")
    }
    else {
        @Html.ActionLink("Register", "Register", "User")
        <span> | </span>
        @Html.ActionLink("Sign In", "Login", "User")
    }
</div>

它检查 (Request.IsAuthenticated) 用户是否已登录，然后显示其姓名。此外，它还显示“注册”按钮，但在这篇文章中我不会继续深入讨论。

整个 _Layout.cshtml 代码应该类似于这样

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <div style="width: auto; background-color: #728ea7;">
        @if (Request.IsAuthenticated) {
            <strong>@Html.Encode(User.Identity.Name)</strong>
            @Html.ActionLink("Sign Out", "Logout", "User")
        }
        else {
            @Html.ActionLink("Register", "Register", "User")
            <span> | </span>
            @Html.ActionLink("Sign In", "Login", "User")
        }
    </div>
 
    @RenderBody()
 
    @Scripts.Render("~/bundles/jquery")
    @RenderSection("scripts", required: false)
</body>
</html>

就是这样！

可以在此处下载源代码.

审核

那么我们在这里做了什么。我们创建了一个包含测试用户的表。数据已哈希，因此我们可以称之为安全。我们包含了一个带有辅助函数的外部项目。它可以用更多有用的东西填充，并与您在此处所做的方式相同的方式与其他项目共享。（我也喜欢这样分隔接口和业务逻辑）。

接下来，我们构建了两个控制器和视图。一个用于第一个页面，另一个用于用户登录。

我们编辑了我们的布局，以便我们可以一直看到一些信息和登录按钮（当我们使用该布局时）

我希望这篇文章能帮助您了解基本用法，并将在未来为您提供帮助。