.net core创建区域(Areas)的使用
熟悉MVC的人都知道从MVC4开始引入了区域的机制,区域的创建可以协助你在架构较大的项目中,让独立性较高的部分功能作为一个单独的子MVC系统,降低网站与网站之间的耦合度,也可以通过area切割,让多个开发人员开发同一个项目时,减少冲突。
在.net Core 中创建项目时,我们发现很多快捷的方式都无法使用了,通过控制器右键添加视图,转到视图页等特性都没有了,包括添加区域,自动进行区域配置也都无法使用,导致我们必须自己手动创建区域以及配置,这样的好处就是可以帮助我们加深对MVC开发模式的理解。
下面我们结合这个项目学习怎么添加区域,在这个博客系统中,分为前台和后台,后台主要是自己进行博客的添加编辑删除等功能,前台主要作为博客内容的展示,所以这两个端口我们可以看作是独立既相互存在的,所以可以使用区域的方式进行创建了。
首先添加区域文件夹Areas,并在里面创建Admin(后台)文件夹,再在里面创建Controllers(控制器)和Views(视图)文件夹,如图:
继续再添加一个HomeController控制器以及对应的视图,作为后台首页,如图所示:
注意在添加控制器的时候,要添加AreaAttribute属性,[Area("Admin")]AreaName名称要和文件夹名称相同,如图:
添加完成后需要在StartUp.cs中添加路由配置,
routes.MapRoute("areaRoute", "{area:exists}/{controller}/{action=Index}/{id?}"); 如图:
配置完成后,测试是否成功:
OK,配置是成功的,这样区域也就创建成功了,就可以顺利的进行后面的开发了。
后台页面展示,(注:后台是从牛腩老师那儿搜刮的,包括博客的开发也是借鉴牛腩老师的教程学习的,写博客的目的是为以后的开发和学习提供帮助,仅此而已。)后台登陆页以及主页分别如下:
登陆页:
后台首页:
简单划分页面,首先登陆页Login.html单独一个页面,后台主页分为三部分:Top,Left,WelCome,根据这个划分在控制器和视图中分别创建如下页面:
html页面以及相应的样式和js库目录结构如下:
将css和js以及Images和页面拷贝到我们的项目中,在wwwroot下创建adminstyle文件夹来放置后台的样式。将页面中引用的js以及样式等修改相对的路径,如图:
运行效果如下:
完美的迁到了项目中了。下面继续重复的步骤,后台首页迁入到系统中,步骤是一样的。在添加完成后,需要修改的几个地方,在博客列表的内容中我们使用一个模块化的前端框架layui。大家可以去官网下载layui官网,我也放到了项目源文件内,
下载完的目录,我们将它的上层目录layui直接拷贝到wwwroot下,
我们先看下刚刚拷贝好的后台的首页内容:
大概是我们想要的样子了,现在该如何引用我们的layui,我们将layui的样式引用到后台欢迎页,当然很简单,直接将css样式拖到页面上就可以了,另外这个后台欢迎页的这些内容我们使用layui中的区块样式,如图:
在welcome页面中,
当我们查看welcome页面源代码时,我们发现可以发现只有以下的内容:
而当我们查看在创建项目时默认的项目,源代码不是这样的,每一个子页面,都含有自己的头文件,是一个完整的网页,如下图:
熟悉MVC的小伙伴们都清楚,那是因为使用模板页,我们可以给项目指定一个模板页,并且程序一加载时,引用模板页的页面会加载模板的内容,如何创建这个模板页,
结构如图所示,在视图文件夹下创建Shared文件夹,里面的_Layout.cshtml就是这个模板页,即作为整个项目的标准布局文件,外层的_ViewStart.cshtml就是指定程序一运行时就会加载这个标准的布局,里面的代码如图所示:
在这里面引用了layui.css和layui.js库,我们知道@RenderBody() 这个是必不可少的,它实际上是一个占位符,以表示这里要显示其他子页面的内容,与webform中的占位符应该是一个用处,再看下_ViewStart.cshtml中的内容,很简单:
就一句代码,即指定加载的标准布局文件的路径。好到这里我们在运行我们的项目,
但是此时,其他页面却加载不出来了
看到生成的源代码就知道怎么回事了,它引用了模板页又带有自己的文件头,这样肯定是不对的,那么我们要指定这几个页面不需要引用_Layout.cshtml,一样很简单,只需要将模板也指定为空就可以了@ { Layout = null; }完美的运行了:
下面我们将我们的博客页面稍作修改,将没用的内容去掉,如下:
相应功能菜单的路径已经指定好了,我们先布局博客内容页,简单的放置一个表格:
下面再来添加一个添加按钮以及编辑删除,同样我们使用layui里面的样式,如图
ok,今天的博客就先写到这儿了,明天有时间再继续。晚安了。
扫描二维码关注我的公众号,共同学习,共同进步!
.net core创建区域(Areas)的使用相关推荐
- 03-dotnet core创建区域[Areas]及后台搭建
熟悉MVC的人都知道从MVC4开始引入了区域的机制,区域的创建可以协助你在架构较大的项目中,让独立性较高的部分功能作为一个单独的子MVC系统,降低网站与网站之间的耦合度,也可以通过area切割,让多个 ...
- ASP .NET Core Web MVC系列教程:使用ASP .NET Core创建MVC Web应用程序
本系列教程翻译自微软官方教程,官方教程地址:Get started with ASP.NET Core MVC | Microsoft Docs 本系列教程介绍了构建MVC Web应用程序的基础知识. ...
- ASP.NET Core Web Razor Pages系列教程一:使用ASP.NET Core 创建一个Razor Pages网络应用程序
系列文章目录:系列教程:使用ASP.NET Core创建Razor Pages Web应用程序 - zhangpeterx的博客 系列教程代码的GitHub地址:ASP .Net Core Razor ...
- ASP.NET Core Web Razor Pages系列教程:使用ASP.NET Core创建Razor Pages Web应用程序
ASP .Net Core Razor Pages MySQL Tutorial 本系列教程翻译自微软官方教程,官方教程地址:Tutorial: Create a Razor Pages web ap ...
- 使用.NET Core创建Windows服务 - 使用.NET Core工作器方式
原文:Creating Windows Services In .NET Core – Part 3 – The ".NET Core Worker" Way 作者:Dotnet ...
- 使用.NET Core创建Windows服务(二) - 使用Topshelf方式
原文:Creating Windows Services In .NET Core – Part 2 – The "Topshelf" Way 作者:Dotnet Core Tut ...
- 使用视图组件为ASP.NET Core创建侧面菜单
本文是关于为ASP.NET Core创建动态菜单系统. 在开发新的Web应用程序时,我们想要添加一个基于当前路由和参数动态生成的菜单组件. 我最初研究了ASP.NET Core中partials的概念 ...
- Allegro创建区域规则
以一个EMMC为例,当IC的的焊盘间距,满足不了使用的线宽,同时在物理规则里面,Neck模式的线宽仍旧无法满足走线,此时可以通过创建区域规则,来进行走线: 1.在物理规则的下拉栏中,Region点开, ...
- ABP Asp.net core 创建一个http get 请求
ABP Asp.net core 创建一个http get 请求,携带token Post man 先调用一下试试,是通的 public async Task SendRequestAsync(){ ...
最新文章
- mac地址信息查询站点
- 算法----合并两个有序链表
- python小白逆袭大神课程心得_Python小白逆袭大神学习心得
- xz命令--Linux命令应用大词典729个命令解读
- java 自定义正则表达式_java中正则表达式实例详解
- CV:基于face库利用cv2调用摄像头(或视频)根据人脸图片实现找人(先指定要识别已知人脸的文件夹转为numpy_array+输入新图片遍历已有numpy_array)
- 如何只下载一个github项目的某一特定文件夹或文件
- 巴菲特:人生赢家,都是稳中求生,稳中求胜
- 潮流配色+定制音效 OPPO Enco X蓝调版真无线降噪耳机解析
- maven安装以及常用配置,idea如何配置maven
- jquery mysql jsp_jsp+jquery+mysql实现的一个简单的学生管理系统
- linux目录蓝色,前言linux系统默认目录颜色是蓝色的,在黑背景下看不清楚,可以通过以下2种方法修改ls查看的颜色。方法:1、拷贝/etc/DIR_COLORS文件为...
- linux软件有什么特点是什么,Linux系统,Win7系统,DOX系统各有什么特点?哪个系统好点?...
- AD09报错解决方法
- 计算机组成原理——RAID 硬盘阵列
- 工控蜜罐 Conpot 的进阶玩法
- .net 3des 解密
- 动态规划之钢条切割问题——Rod-cutting problem
- 贵有恒,何必三更起五更眠;最无益,只怕一日曝十日寒
- excel表格内容拆分_3个动图,教你学会如何让excel表格自动拆分,学会它,小白变大神...