ASP.NET CORE MVC 5 中带有会话的登录表单

落日映苍穹つ 2023-10-01 20:04 81阅读 0赞

#### **创建 ASP.NET Core MVC 5 项目** ####

在 Visual Studio 上，从“开始”中选择“**创建新项目”**

![0abefadbd5bda0db12efe15b5fe1c078.png][]

选择**ASP.NET Core Web 应用程序**

![c304d6170bb473105ac07f7c2f3e637b.png][]

输入**项目名称**并选择新项目的**位置**

![27490a6e3e658bff16a733fdc51facbf.png][]

选择**ASP.NET Core 5.0 版本**并选择**ASP.NET Core Empty Template**。点击创建按钮完成

![7b1160687bbf0ea174fe9e0447037a99.png][]

#### **添加配置** ####

打开**Startup.cs**文件并添加新配置，如下所示：

using Microsoft.AspNetCore.Builder;
    using Microsoft.AspNetCore.Hosting;
    using Microsoft.Extensions.DependencyInjection;
    using Microsoft.Extensions.Hosting;
    
    namespace LearnASPNETCoreMVC5
    {
        public class Startup
        {
            public void ConfigureServices(IServiceCollection services)
            {
                services.AddControllersWithViews();
    
                services.AddSession();
            }
    
            public void Configure(IApplicationBuilder app, IHostingEnvironment env)
            {
                if (env.IsDevelopment())
                {
                    app.UseDeveloperExceptionPage();
                }
    
                app.UseSession();
    
                app.UseStaticFiles();
    
                app.UseRouting();
    
                app.UseEndpoints(endpoints =>
                {
                    endpoints.MapControllerRoute(
                        name: "default",
                        pattern: "{controller=Demo}/{action=Index}/{id?}");
                });
    
            }
        }
    }

#### **创建控制器** ####

创建名为**Controllers**的新文件夹。在此文件夹中，创建名为**AccountController.cs**的新控制器，如下所示：

using Microsoft.AspNetCore.Http;
    using Microsoft.AspNetCore.Mvc;
    
    namespace LearnASPNETCoreMVC5.Controllers
    {
        [Route("account")]
        public class AccountController : Controller
        {
            [Route("")]
            [Route("index")]
            [Route("~/")]
            public IActionResult Index()
            {
                return View();
            }
    
            [Route("login")]
            [HttpPost]
            public IActionResult Login(string username, string password)
            {
                if (username != null && password != null && username.Equals("acc1") && password.Equals("123"))
                {
                    HttpContext.Session.SetString("username", username);
                    return View("Success");
                }
                else
                {
                    ViewBag.error = "Invalid Account";
                    return View("Index");
                }
            }
    
            [Route("logout")]
            [HttpGet]
            public IActionResult Logout()
            {
                HttpContext.Session.Remove("username");
                return RedirectToAction("Index");
            }
        }
    }

#### **创建视图** ####

创建名为**Views**的新文件夹。在此文件夹中，创建名为**Account**的新文件夹并添加新视图，如下所示：

**索引视图**

在**Account**文件夹中，创建名为**Index.cshtml**的新视图，如下所示：

<html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>Index</title>
    </head>
    <body>
    
        <h3>Login Page</h3>
        @ViewBag.error
        <form method="post" asp-controller="account" asp-action="login">
            <table border="0" cellpadding="2" cellspacing="2">
                <tr>
                    <td>Username</td>
                    <td><input type="text" name="username"></td>
                </tr>
                <tr>
                    <td>Password</td>
                    <td><input type="password" name="password"></td>
                </tr>
                <tr>
                    <td> </td>
                    <td><input type="submit" value="Login"></td>
                </tr>
            </table>
        </form>
    
    </body>
    </html>

**成功观**

在**Account**文件夹中，创建名为**Success.cshtml**的新视图，如下所示：

@using Microsoft.AspNetCore.Http;
    
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>Success</title>
    </head>
    <body>
    
        <h3>Success Page</h3>
        Welcome @Context.Session.GetString("username")
        <br>
        <a asp-controller="account" asp-action="logout">Logout</a>
    
    </body>
    </html>

#### **创建 Razor 视图导入** ####

选择**Views**文件夹并右键单击选择**Add\\New Item** Menu

![581f37952451467e2c9df095fef7c5c7.png][]

选择左侧的**Web\\ASP.NET**。选择**Razor View Imports**项目并单击**Add**按钮完成

![29a3ed4acda13bada711882a1b377521.png][]

在**\_ViewImports.cshtml**文件和**TagHelpers**库中，如下所示：

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

#### **ASP.NET Core MVC 5 项目的结构** ####

![330432a89380f6b933c715fef7f3f10d.png][]

#### **运行应用程序** ####

使用以下 url在**帐户**控制器中访问**索引**操作： **http://localhost:48982/Account/Index**

**输出**

![a0385bfcaf8024d7fee167fb7a72f5e4.png][]

使用无效帐户进行测试是**用户名：aa**和**密码：123**

**输出**

![227a4175d40a5ac667c45a9d363479f8.png][]

![718ab75a08c374a04975ecc648191a60.png][]

使用有效帐户进行测试是**username: acc1**和**password: 123**。

**输出**

![9d47b2057258a1f1700ad4159c67fafa.png][]

![37339ac000fb880694a83eec63aae988.png][]

单击成功页面中的**注销**链接以删除会话并再次打开登录页面

**输出**

![a0385bfcaf8024d7fee167fb7a72f5e4.png][]

[0abefadbd5bda0db12efe15b5fe1c078.png]: https://img-blog.csdnimg.cn/img_convert/0abefadbd5bda0db12efe15b5fe1c078.png
[c304d6170bb473105ac07f7c2f3e637b.png]: https://img-blog.csdnimg.cn/img_convert/c304d6170bb473105ac07f7c2f3e637b.png
[27490a6e3e658bff16a733fdc51facbf.png]: https://img-blog.csdnimg.cn/img_convert/27490a6e3e658bff16a733fdc51facbf.png
[7b1160687bbf0ea174fe9e0447037a99.png]: https://img-blog.csdnimg.cn/img_convert/7b1160687bbf0ea174fe9e0447037a99.png
[581f37952451467e2c9df095fef7c5c7.png]: https://img-blog.csdnimg.cn/img_convert/581f37952451467e2c9df095fef7c5c7.png
[29a3ed4acda13bada711882a1b377521.png]: https://img-blog.csdnimg.cn/img_convert/29a3ed4acda13bada711882a1b377521.png
[330432a89380f6b933c715fef7f3f10d.png]: https://img-blog.csdnimg.cn/img_convert/330432a89380f6b933c715fef7f3f10d.png
[a0385bfcaf8024d7fee167fb7a72f5e4.png]: https://img-blog.csdnimg.cn/img_convert/a0385bfcaf8024d7fee167fb7a72f5e4.png
[227a4175d40a5ac667c45a9d363479f8.png]: https://img-blog.csdnimg.cn/img_convert/227a4175d40a5ac667c45a9d363479f8.png
[718ab75a08c374a04975ecc648191a60.png]: https://img-blog.csdnimg.cn/img_convert/718ab75a08c374a04975ecc648191a60.png
[9d47b2057258a1f1700ad4159c67fafa.png]: https://img-blog.csdnimg.cn/img_convert/9d47b2057258a1f1700ad4159c67fafa.png
[37339ac000fb880694a83eec63aae988.png]: https://img-blog.csdnimg.cn/img_convert/37339ac000fb880694a83eec63aae988.png