如何使用angular修改asp.net核心WebAPI的asp.net身份UI [英] How to modify asp.net Identity UI for asp.net core WebAPI with angular

问题描述

几天前，我开始学习.net core，首先，我创建了一个带有内置的angular 8模板的.netcore项目.

I started learning .net core a few days ago and as a start, I created a .netcore project with an inbuilt angular 8 templates.

它具有成角度的内置几个页面，例如计数器和获取数据等，但是所有与身份相关的页面(登录，注册等)都是从后端以纯HTML格式出现的.因此，我主要关注的是在该页面中进行一些UI更改".

It has a couple of pages built in angular, like counter and fetches data, etc, but all the Identity-related pages (login, registration, etc) are coming as a plain HTML from the backend. So "my main Concern is making some UI changes in that page".

我发现身份已添加到类库中，因此在后端代码中不可见.为了对其进行更改，我需要先通过脚手架将其重新生成，然后再将其添加到代码中.这将覆盖之前的库代码，并且可以根据要求进行修改.

I found out that the identity has been added to the class library and hence not visible in the backend code. and In order to make changes to it, I will need to first add it to the code by regenerating it through scaffolding. this will override the previous library code and can be modified as per requirement.

所以我选择添加新的脚手架项目->身份.并在第一次尝试中选择覆盖所有文件"，仅在第二次尝试中选择"account \ login"和"account \ register"，而dbcontext则选择applicationdbcontext.但不幸的是，这两个都不对我有用.

So I selected add new scaffolded item --> identity. and selected "override all files" in first attempt and "account\login" and "account\register" only in the second attempt, and applicationdbcontext for dbcontext. but unfortunately neither worked for me.

当我尝试构建代码时，出现此错误

When I try to build the code I get this error

Error   CS0246  The type or namespace name 'IWebHostEnvironment' could not be found (are you missing a using directive or an assembly reference?)   

C:\Users\MyUserName\source\repos\MyProjectName\obj\Debug\netcoreapp3.0\Razor\Pages\Shared\_Layout.cshtml.g.cs   448

我真的不知道.g.cs扩展名是什么，该页面上没有import语句，还有一些我从未见过的怪异代码.页面本身也没有显示任何错误/红色标记.

I don't really know what .g.cs extension is, there is no import statement on that page and some weird code that I have never seen before. the page itself also doe's not shown any error/red marking.

我基本上想在这里实现两件事，

I basically want to achieve two things here,

1)完全使用.net核心应用程序作为API，我想在angular本身中为所有与登录相关的东西构建UI，而不是从后端获取HTML.

1) using .net core app completely as an API, I want to build UI for all the login related stuff in angular itself rather than getting as an HTML from the back-end.

2)在用户登录表单中添加更多字段.并且由于这是代码优先的方法，因此最终会在用户DBSet中进行更改(在这种情况下，我不知道该怎么做).

2) adding a few more fields in the user login form. and since it is code first approach then ultimately making changes in users DBSet (which I don't know how to do in this case).

我没有添加任何代码示例，因为它是一种直接的问题.要重现该问题，只需在.net core 3.0中创建一个项目并采用一个有角度的8个模板即可.现在尝试在登录或注册页面上进行与UI相关的任何更改.

I have not added any code sample as it is a kind of straight forward problem/question. to reproduce the issue just create a project in .net core 3.0 and take an angular 8 templates. now try to make any UI related change on login or register page.

推荐答案

令人讨厌的是，默认项目的布局中不需要的这部分内容就住在那里.
尝试删除该导入，并且具有脚手架UI的默认应用将正常运行.

It's annoying that this piece which isn't necessary in the layout for a default project lives there.
Try to drop that import and that default app with scaffolded UI will work OK.

我的意图是为登录"页面添加一些样式，这有点无聊.

My intention was to add some styles for the Login page which is a bit boring.

我做了什么?
+使用Angular和Authentication(Individual User Accounts)模板创建了一个ASP.NET Core Web应用程序(来自Visual Studio 2019).
+添加新的脚手架项目->身份
+遵循ScaffoldingReadme.txt文件中的步骤(某些步骤已经在正确的位置插入了代码段，不需要进行任何添加)
+从_Layout.cshtml页上删除@inject IWebHostEnvironment Environment和Microsoft.AspNetCore.Hosting行；
+准备查看结果:)

What have I done?
+ created an ASP.NET Core web application with Angular and Authentication (Individual User Accounts) template (from Visual Studio 2019).
+ Add New Scaffolded Item -> Identity
+ Followed the steps from ScaffoldingReadme.txt file (some steps have already snippets in the correct place and does not require any additions)
+ Remove the line @inject IWebHostEnvironment Environment and Microsoft.AspNetCore.Hosting from the _Layout.cshtml page;
+ READY to see the RESULT :)

这篇关于如何使用angular修改asp.net核心WebAPI的asp.net身份UI的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！