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

时间: 2024-10-07 04:35:46

03-dotnet core创建区域[Areas]及后台搭建的相关文章

创建区域Areas,添加TagHelper

创建区域Areas,添加TagHelper 目录索引 [无私分享:ASP.NET CORE 项目实战]目录索引 简介 在Asp.net Core VS2015中,我们发现还有很多不太简便的地方,比如右击添加视图,转到试图页等功能图不见了,虽然我们可以通过工具栏的自定义命令,把这两个右击菜单添加上,但是貌似是灰色的不能用. 其实,这样也好,通过手动创建,更让我们深刻的理解MVC以及路由之间的关系,很多人认为底层的东西是高大上的,比如一提到汇编,很多人感觉牛的不行不行的,其实术业有专攻,做程序的感觉

【无私分享:ASP.NET CORE 项目实战(第九章)】创建区域Areas,添加TagHelper

目录索引 [无私分享:ASP.NET CORE 项目实战]目录索引 简介 在Asp.net Core VS2015中,我们发现还有很多不太简便的地方,比如右击添加视图,转到试图页等功能图不见了,虽然我们可以通过工具栏的自定义命令,把这两个右击菜单添加上,但是貌似是灰色的不能用. 其实,这样也好,通过手动创建,更让我们深刻的理解MVC以及路由之间的关系,很多人认为底层的东西是高大上的,比如一提到汇编,很多人感觉牛的不行不行的,其实术业有专攻,做程序的感觉搞核电的很牛,搞核电的同样也感觉做程序的很牛

[转]【无私分享:ASP.NET CORE 项目实战(第九章)】创建区域Areas,添加TagHelper

本文转自:http://www.cnblogs.com/zhangxiaolei521/p/5808417.html 目录索引 [无私分享:ASP.NET CORE 项目实战]目录索引 简介 在Asp.net Core VS2015中,我们发现还有很多不太简便的地方,比如右击添加视图,转到试图页等功能图不见了,虽然我们可以通过工具栏的自定义命令,把这两个右击菜单添加上,但是貌似是灰色的不能用. 其实,这样也好,通过手动创建,更让我们深刻的理解MVC以及路由之间的关系,很多人认为底层的东西是高大上

Docker 部署Dotnet Core MVC项目

1.dotnet core创建项目 dotnet new mvc -o myweb cd myweb 然后就是业务代码的编辑,增删改查乱七八糟的需求上的东西吧,总之就是一顿coding.... dotnet publish -o ./release 项目就发布到 release文件夹了 然后为docker创建一个创建镜像的文件 也叫dockerfile  不懂的可以看下官方api 内容如下: donetcore.dockerfile FROM microsoft/dotnet RUN mkdir

Asp.net Core 创建 Areas[区域]

在Asp.net Core VS2015中,我们发现还有很多不太简便的地方,比如右击添加视图,转到试图页等功能图不见了,虽然我们可以通过工具栏的自定义命令,把这两个右击菜单添加上,但是貌似是灰色的不能用. 其实,这样也好,通过手动创建,更让我们深刻的理解MVC以及路由之间的关系,很多人认为底层的东西是高大上的,比如一提到汇编,很多人感觉牛的不行不行的,其实术业有专攻,做程序的感觉搞核电的很牛,搞核电的同样也感觉做程序的很牛,但是通过手动的创建MVC以及路由,除了让我们深刻的理解MVC之外,也在一

ASP.NET Core开发-MVC 使用dotnet 命令创建Controller和View

使用dotnet 命令在ASP.NET Core MVC 中创建Controller和View,之前讲解过使用yo 来创建Controller和View. 下面来了解dotnet 命令来创建Controller和View,功能更加强大,更加完整. 结合VS Code 使你能跨平台更好更快速的开发 ASP.NET Core MVC. 也就可以在 Linux 和Mac 中更好的开发ASP.NET Core 应用程序. 创建ASP.NET Core应用程序 dotnet new -t web dotn

Core开发-MVC 使用dotnet 命令创建Controller和View

NET Core开发-MVC 使用dotnet 命令创建Controller和View 使用dotnet 命令在ASP.NET Core MVC 中创建Controller和View,之前讲解过使用yo 来创建Controller和View. 下面来了解dotnet 命令来创建Controller和View,功能更加强大,更加完整. 结合VS Code 使你能跨平台更好更快速的开发 ASP.NET Core MVC. 也就可以在 Linux 和Mac 中更好的开发ASP.NET Core 应用程

03、手工创建Asp.Net Core 2.0 web应用程序(探索最小架构)

一.创建一个干净的控制台程序 这里我们使用的开发工具是VS2017 项目只有一个Program.cs类. 二.让控制台程序可以响应Web请求 1.让控制台程序成为Web宿主,需要引用WebHost包 Microsoft.AspNetCore.Hosting 2.我们不想用IIS作为服务器,可以使用Kestrel作为Web服务器 Microsoft.AspNetCore.Server.Kestrel 3.使用Nuget应必要包之后的项目结构 4.指定Web服务器,并启动WebHost 在Main方

【Step By Step】将Dotnet Core部署到Docker上

本教程的前提是,你已经在Linux服务器上已经成功的安装了Docker,我会大概介绍在此过程中用到的Docker命令,并不会介绍所有的Docker命令(因为我也不会). 一.在Docker中运行Dotnet Core Hello World 微软官方提供了已经集成好Dotnet Core运行所需环境的Docker Image,我们可以直接使用命令: docker run -it microsoft/dotnet:latest 其中 -i :表示以后台模式开始Docker Container -t