.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,今天的博客就先写到这儿了,明天有时间再继续。晚安了。


扫描二维码关注我的公众号,共同学习,共同进步!