.net mvc 登录用户名显示首页

.NET MVC 登录用户名显示首页

引言

在 Web 应用程序中，用户登录是一个常见的功能。一旦用户成功登录，我们通常会在页面的顶部显示其用户名，以便用户知道他们当前登录的身份。在本文中，我们将使用 .NET MVC 创建一个简单的用户登录功能，并且在用户成功登录后，将其用户名显示在首页上。

准备工作

在开始之前，我们需要确保以下几点：

1. 安装 Visual Studio 或者其他支持 .NET MVC 的集成开发环境（IDE）。
2. 了解 .NET MVC 的基本概念和工作原理。
3. 确保在本地计算机上安装了 .NET Framework。

第一步 - 创建一个新的 .NET MVC 项目

首先，我们需要创建一个新的 .NET MVC 项目。按照以下步骤进行操作：

1. 打开 Visual Studio。
2. 选择 "创建新项目"。
3. 选择 "ASP.NET Web Application"。
4. 输入项目名称，并选择保存位置。
5. 在 "模板" 下选择 ".NET Framework"。
6. 选择 "MVC" 模板，并勾选 "Web API"。
7. 点击 "创建"。

第二步 - 创建用户模型和数据库

在这一步中，我们将创建一个用户模型和数据库，并将用户信息存储在数据库中。

1. 在 Visual Studio 中，右键点击 "Models" 文件夹，并选择 "添加" -> "类"。
2. 输入类名 "User" 并点击 "添加"。
3. 在 User 类中，添加以下属性：

public class User
{
    public int Id { get; set; }
    public string Username { get; set; }
    public string Password { get; set; }
}

4. 在 Visual Studio 中，右键点击 "Controllers" 文件夹，并选择 "添加" -> "类"。
5. 输入类名 "UserController" 并点击 "添加"。
6. 在 UserController 类中，添加以下方法：

public class UserController : Controller
{
    private List<User> _users = new List<User>
    {
        new User { Id = 1, Username = "admin", Password = "admin" },
        new User { Id = 2, Username = "user1", Password = "pass1" },
        new User { Id = 3, Username = "user2", Password = "pass2" }
    };

    [HttpGet]
    public ActionResult Login()
    {
        return View();
    }

    [HttpPost]
    public ActionResult Login(string username, string password)
    {
        var user = _users.FirstOrDefault(u => u.Username == username && u.Password == password);

        if (user != null)
        {
            Session["UserId"] = user.Id;
            Session["Username"] = user.Username;

            return RedirectToAction("Index", "Home");
        }

        ViewBag.ErrorMessage = "Invalid username or password";
        return View();
    }
}

7. 在 Visual Studio 中，右键点击 "Views" 文件夹，并选择 "添加" -> "文件夹"。
8. 输入文件夹名 "User" 并点击 "添加"。
9. 在 "User" 文件夹中，右键点击并选择 "添加" -> "视图"。
10. 输入视图名 "Login" 并点击 "添加"。
11. 在 Login.cshtml 视图文件中，添加以下代码：

@using (Html.BeginForm("Login", "User", FormMethod.Post))
{
    <div>
        <label for="username">Username:</label>
        <input type="text" id="username" name="username" />
    </div>
    <div>
        <label for="password">Password:</label>
        <input type="password" id="password" name="password" />
    </div>
    <button type="submit">Login</button>
}

@if (!string.IsNullOrEmpty(ViewBag.ErrorMessage))
{
    <div>@ViewBag.ErrorMessage</div>
}

12. 在 Visual Studio 中，右键点击 "Views" 文件夹，并选择 "添加" -> "文件夹"。
13. 输入文件夹名 "Home" 并点击 "添加"。
14. 在 HomeController 类中，添加以下方法：

public class HomeController : Controller
{
    [HttpGet]
    public ActionResult Index()
    {
        var userId = Session["UserId"];
        var username = Session["Username"];

        if (userId != null && username != null)
        {
            ViewBag.Username = username;
        }

        return View();
    }
}

15. 在 "Home" 文件夹中，右键点击并选择 "添加" -> "视图"。
16. 输入视图名 "Index" 并点击 "添加"。
17. 在 Index.cshtml 视图文件