Question

我正在开发具有身份登录名的.NET核心应用程序，该应用程序在/ Identity / Account / Login页面中提供了 Bootstrap表单。

我已经在wwwroot / lib文件夹中导入了 Materialize CSS文件，并且还希望通过实现CSS来更改“登录”页面的设计。

问题是/ Identity / Account / Login页面在项目结构中不存在。那我该如何解决这个问题呢？

Answer 1

一种方法是转到scaffold the login page，它将添加到您的项目结构中。这样您就可以进行所需的任何更改。您将必须执行以下操作（通过我提供的链接）：

在 Solution Explorer 中，右键单击项目> 添加> 新脚手架项目。

从添加支架对话框的左窗格中，选择身份> 添加。

在 ADD身份对话框中，选择所需的选项（在您的情况下为Login）。

选择现有的布局页面，否则布局文件将被错误的标记覆盖。当现有的 _Layout.cshtml   文件被选中，未被覆盖。




例如~/Pages/Shared/_Layout.cshtml用于Razor Pages   ~/Views/Shared/_Layout.cshtml用于MVC项目


要使用现有数据上下文，请至少选择一个要覆盖的文件。您必须至少选择一个文件才能添加数据上下文。

选择数据上下文类。

选择添加。



要创建新的用户上下文并可能为Identity创建自定义用户类：

选择+按钮以创建新的数据上下文类。

选择添加。




注意：如果要创建新的用户上下文，则不必选择   一个要覆盖的文件。

另一种方法是查看Login page source code并查看HTML元素的ID和类。然后，您可以编写自己的CSS（比默认CSS更具体）来覆盖默认CSS。

Answer 2

您看到的默认Identity页面是由项目中的该dll在幕后生成的：

Microsoft.AspNetCore.Identity.UI.Views.V3.dll

-位于此处-

Dependencies >> SDK >> Microsoft.AspNetCore.App(2.2.0)。

按照@Marko Papic的分步说明生成Identity页面（或分页），您要使用材料css覆盖这些页面。这些（现在是可查看的页面）中包含Identity类，方法，属性等的所有逻辑和命名引用，您需要构建自己的自定义页面。

此外，您无需遵循默认的Areas/Identity/Pages/Account...文件位置或剃刀语法。如果愿意，可以创建自己的MVC版本，也可以创建任何自己喜欢的文件结构/表示形式的vue.js。

我将项目保留在覆盖所有Identity UI页的那一侧（复选框Override all files作为方便参考，可在其中提供我需要的内容。< / p>

@Marko Papic为您提供了一个很好的答案，我建议您选择他的答案作为正确的答案。

Answer 3

从Asp.net Core 2.1开始，身份UI代码不包含在项目结构中。
您可以在StartUp文件->方法ConfigureServices

中看到这一行代码

services.AddDefaultIdentity<IdentityUser>()
            .AddDefaultUI(UIFramework.Bootstrap4)

如果要自定义UI，则必须通过2种方式生成以下代码：
1.使用Visual Studio：右键单击项目->添加->新脚手架项目->身份->并选择要生成的内容。
2.使用CLI：从项目目录运行此命令行

dotnet aspnet-codegenerator identity -dc WebApplication.Data.ApplicationDbContext

在.NET Core中更新身份登录页面的默认前端设计

3 个答案: