添加自定义登录页面 - (第二讲)
视频讲解如下:
工程源码下载:GPS定位系统系列教程源码下载
登录页面框架选择
登录页面可以自行在网上下载现成的框架,当然,你也可以自己写一个,为了方便,博主这里直接采用当前博客的精简后的登录框架。
1、前端页面演示
我们需要添加的登录页面代码如下,其中包括登录和注册两个功能,用户主要在注册之后,才能进行登录。
运行效果如下:
2、ASP.NET CORE中嵌入登录页面
2.1、添加MVC支持
在ASP.NET CORE WEB默认的框架中,前端的网页是放在Pages目录下的,这个目录我们不能要,需要将整个目录删除。
然后新增一个Views和Controllers目录。
Views目录用来放置我们自定义的web页面。
Views目录下的Login目录用来放置我们前面那个登录页面。
Controllers目录用来放置我们的MVC控制器。
目录结构如下:
然后修改Program.cs文件,添加MVC控制器支持。
app.MapControllerRoute(
name: "default",
pattern: "{controller=Login}/{action=Index}");
官方代码参考:
https://docs.microsoft.com/zh-cn/aspnet/core/tutorials/first-mvc-app/adding-controller?view=aspnetcore-6.0&tabs=visual-studio
2.2、添加登录页面控制器
固定文件名格式“***Controller.cs”否则控制器将无法被识别
注意:控制器的前缀名称必须和cshtml的名称一致,即:cshtml的名称 +“Controller”
添加完控制器后,我们直接运行,我们其实可以看到三个访问路径提示
/Views/Login/Index.cshtml
/Views/Shared/Index.cshtml
/Pages/Shared/Index.cshtml
其中:Views开头的是我们自定义的目录,Pages开头的是系统自带的目录,我们后面需要做的是,将我们的登录页面按“Index.cshtml”文件名的形式添加到目录“/Views/Login/”中,这样控制器就能找到我们的登录页面了。
2.3、添加登录页面
添加“Index.cshtml”视图文件。
选择空视图,然后添加
直接添加
然后将我们前面调试好的登录页面 Index.html 代码拷贝到 Index.cshtml 文件中,全部替换掉。还要把系统自带的"wwwroot\css\*.css"和"wwwroot\js\*.js"全部删除,并将我们自己的css和js文件全部扔进去。
最后再次启动我们的工程,我们的登录页面就这样嵌入完成了。