资讯专栏INFORMATION COLUMN

一步一步创建ASP.NET MVC5程序[Repository+Autofac+Automapper

王岩威 / 3343人阅读

摘要:我们新建页面时只需要基于这个母版页,就会自动继承母版页面的通用布局部分,比如头部导航菜单栏页面底部信息等等。那么现在就把本示例中的头部导航页脚区域作为共用区域提取出来,放到母版页中。但是请注意,一个母版页中只能有一个标记。

前言

朋友们,
大家好,我还是Rector,写ASP.NET MVC 5系列文章 [一步一步创建ASP.NET MVC5程序Repository+Autofac+Automapper+SqlSugar] 的那个家伙。

今天为大家带来本系列的第十篇文章。

本文知识要点

本文将要给大家分享的是页面统筹和规划方面的知识。

在上一篇文章发布后有朋友在评论中也反馈到了这个问题,即我们可以把每个页面中重复用到的布局代码放到统一的模板页面或者部分视图里面,以便代码的重用及维护。所以本文为大家分享的内容是:

母版页

部分视图

母版页概述

ASP.NET MVC中的母版页类似于传统Webform中的.master母版页面,它可以让我们在做WEB应用程序开发时的页面布局结构更加规范化、标准化,母版页将页面中相同的、通用的区域封装在一起。

我们新建页面时只需要基于这个母版页,就会自动继承母版页面的通用布局部分,比如头部导航、菜单栏、页面底部信息等等。

ASP.NET MVC 5 WEB应用程序开发,我们通常使用的视图引擎为:Razor,这个视图引擎的母版页面默认位于网站目录[/Views/Shared/_Layout.cshtml]中,在具体的视图页面中,我们如果需要使用这个母版页,需要设置这个页面的Layout,如:

@{
    Layout="~/Views/Shared/_Layout.cshtml";
}

以上代码就完成了对母版页面的引用,同时继承了母版页面的所有共用布局区域。
如果一个页面不需要使用母版页面的布局引用,则可以将Layout设置为null,如:

@{
    Layout=null;
}

接下来,我们就结合我们的系列教程,上一篇已经完成的首页以及文章详情页面,使用母版页面来提取、封装我们的母版页面,并最终将母版页应用到首页和文章详情页面。

提取母版页

在上文中已经为大家阐述了母版页的作用,在开始之前提取共用布局区域之前,我们先看一下当前页面的大致布局:

我们暂且将页面分成三个区域,分别是:导航区域页面内容区域 以及 网页页脚区域

那么现在就把本示例中的头部导航页脚区域作为共用区域提取出来,放到母版页中。

打开项目【TsBlog.Frontend】中的【/Views/Shared/_Layout.cshtml】文件,将这个.cshtml文件代码修改成以下的母版页代码:
_Layout.cshtml

在这个母版页中,我将共用的区域、资源以及动态页面内容区域都分别标记出来了。

其中,动态内容区域是用@RenderBody()来标记的。但是请注意,一个母版页中只能有一个@RenderBody()标记。一定要记住哦~~~
应用母版页

好了,母版页提取并封装整理好了,现在我们修改首页,来使用刚才创建的母版页,首页修改后的Razor页面代码如下:
home/index.cshtml

@model IEnumerable
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
    ViewBag.Title = "ASP.NET MVC 5 系列文章教程--首页";
}

小伙伴,你好

欢迎来到 Rector 的ASP.NET MVC 5 系列文章教程。在这里,Rector将和你一起一步一步创建一个集成Repository+Autofac+Automapper+SqlSugar的WEB应用程序。

你准备好了吗?

......

让我们开始ASP.NET MVC 5 应用程序的探索之旅吧!!!

文章列表(@(Model.Count())篇)

我们可以看到,在首页【home/index.cshtml】中,我们设置了Layout和标题ViewBag.Title

Layout = "~/Views/Shared/_Layout.cshtml";
ViewBag.Title = "ASP.NET MVC 5 系列文章教程--首页";

之前的样式文件引用、脚本文件引用等等都没有了,这样修改之后,现在首页内容将会动态地渲染到母版页面的@RenderBody()的 标记位置。

怎么样,使用母版页是不是让我们的代码可重用了,后期维护时,如果有很多页面需要修改导航信息,我们是不是只需要修改母版页就可以了呢?

但是,Rector在这里呢,还想把可以重用的代码再一次抽取,我们把导航这个部分的代码多带带再一次抽离出来。

应用部分视图

首先,在文件夹【~/Views/Shared/】下新建一个文件,命名为:_NavBar.cshtml
再将之前母版页面中的导航部分抽取出来,放到_NavBar.cshtml文件中:

然后修改母版页_Layout.cshtml为:

怎么样,母版页现在是不是更加整洁了呢?我们在后期维护导航的时候是不是也会更加容易了呢?有没有觉得Razor视图DIAO爆了。

写到这里,Rector还真想吐槽,吖的,为什么传统的Webform母版页功能怎么做得那么难用呢!!!

“好在,我们还有Razor。”软软站出来说。(我就站一旁看着,不说话)

好了,Rector把母版页和部分视图给大家作了一个初步的分享,接下来我们把文章详情页面也应用上母版页。
打开文件/Home/Post.cshtml,将页面代码修改成如下所示:

@model TsBlog.ViewModel.Post.PostViewModel
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
    ViewBag.Title = Model.Title;
}

Post id:@Model.Id

Post Title:@Model.Title

Post PublishedAt:@Model.PublishedAt

Post IsDeleted:@Model.IsDeleted

打完收工,本文关于Razor视图引擎的母版页和部分视图就为大家分享到这里,Rector在这里起一个抛砖引玉的作用,更多的关于母版页和部分视图请查阅更多详细的资料,以挥其更大的作用。

好了,如果你喜欢Rector,或者是喜欢本系列文章,请为我点个赞,以鼓励Rectro继续写出更好的文章,或者系列文章。

本期源码托管地址:请至文章首发地址获取《一步一步创建ASP.NET MVC5程序[Repository+Autofac+Automapper+SqlSugar](十)》

看完教程如果觉得还不过瘾的,想“勾对”的,欢迎加入码友网官方QQ群:483350228,如果你按照教程还原出来的程序运行有问题,请参照本期源码对应调整与修改遇到问题的,也欢迎加入QQ群。有什么,你懂的。。。^_^

谢谢你的耐心阅读,本系列未完待续,我们下期再见……

同时,也欢迎大家关注我们的.NET编程爱好者社区:https://2sharings.com 每天都有.NET的开发技术干货更新哦。

https://codedefault.com 一个.NET编程爱好者社区,专注.NET/C#开发,帮助你找到疑难问题的更优美、更高级的解决方案

本文首发自 码友网 《一步一步创建ASP.NET MVC5程序[Repository+Autofac+Automapper+SqlSugar](十)》

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/110492.html

相关文章

  • 步一创建ASP.NET MVC5程序[Repository+Autofac+Automapper

    摘要:开发人员需要作的事则是通过配置两个实体对象之间的一些映射关系。提供了一些简单配置,还有一些简单的映射测试。所以,再在解决方案目录下创建一个名为的项目,这个项目只存放关于视图实体的类文件。本文同步发表至码友网一步一步创建程序五 前言 Hi,大家好,我是Rector 时间飞逝,一个星期又过去了,今天还是星期五,Rector在码友网继续跟大家分享系列文本:一步一步创建ASP.NET MVC5...

    chengjianhua 评论0 收藏0
  • 步一创建ASP.NET MVC5程序[Repository+Autofac+Automapper

    摘要:前言大家好,我依旧是你们的老朋友,很高兴又在周五的时候准时和大家见面。如果遇到问题,欢迎加入码友网官方群本文来源码友网一步一步创建程序七 前言 大家好,我依旧是你们的老朋友Rector,很高兴又在周五的时候准时和大家见面。 Rector的系列文章【一步一步创建ASP.NET MVC5程序[Repository+Autofac+Automapper+SqlSugar]】从写作以来,已经出...

    ky0ncheng 评论0 收藏0
  • 步一创建ASP.NET MVC5程序[Repository+Autofac+Automapper

    摘要:前言上一篇一步一步创建程序三,我们完成了引用使用对类的改造并成功使用来查询到了数据,今天我们来创建一个新的服务层以及安装配置依赖注入框架组件等。项目创建成功后,删除自动生成的文件。本文同步发表至码友网一步一步创建程序四 前言 上一篇《一步一步创建ASP.NET MVC5程序[Repository+Autofac+Automapper+SqlSugar](三)》,我们完成了: * 引用S...

    yy13818512006 评论0 收藏0
  • 步一创建ASP.NET MVC5程序[Repository+Autofac+Automapper

    摘要:今天我们就引入一个国内开发者开发并维护的开源框架。本文同步发表至码友网一步一步创建程序三 前言 上一篇《一步一步创建ASP.NET MVC5程序[Repository+Autofac+Automapper+SqlSugar](二)》我们通过如下操作: 创建实体及工具类 创建Repository类 完善View层 修改控制器 创建视图 数据库连接 创建数据库和表 实现了简单的...

    vpants 评论0 收藏0
  • 步一创建ASP.NET MVC5程序[Repository+Autofac+Automapper

    摘要:在码友网又和大家见面啦上一篇一步一步创建程序五我们完成了是什么简述安装的配置的应用通过前面几篇文章的学习,本系列一步一步创建程序中主要涉及到的技术和组件已基本介绍到位了。本文来源码友网一步一步创建程序六 前言 大家好,我是Rector 又是星期五,很兴奋,很高兴,很high...啦啦啦。。。Rector在码友网又和大家见面啦!!!上一篇《一步一步创建ASP.NET MVC5程序[Rep...

    Sanchi 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<