MVC设计模式实战
前文我们介绍了MVC设计模式实现基本原理及组成,其基本组成主要包括控制器、视图、模板等部分。目前绝大多数Web端程序设计语言已经支持MVC设计模式,进行Web应用程序开发,本文主要以为例对MVC模式显示进行简单说明。【今日头条原创首发】。
开发工具
1、开发平台环境
本文选择MVC实现编程语言为C#程序设计语言,所使用的的应用架构为.NET集成开发环境。因此开发工具选择使用了微软公司开发的Visual Studio集成开发工具与环境。Microsoft Visual Studio Express是Visual Studio的轻量级版本,在应用开发方面硬件需求较低。本例使用版本为Microsoft Visual Studio Express 版本,软件运行起始页如下图所示:
Microsoft Visual Studio Express开发
2、MVC版本
MVC 是微软公司开发的Web应用程序框架Framework,用于实现基于MVC模式的Web应用程序开发,其最新版本为 Core MVC。本例使用Visual Studio Express版本为,安装MVC版本为MVC4。
mvc4
3、Razor布局页面
在进行Web应用程序开发过程中,对于不同页面共同部分,如页头、页脚等部分,为避免重复编码,一般使用页面母版或者布局页面形式对重复部分进行模板化设计。在 Web开发过程中也提供了类似模板的功能,即Razor布局页面。
Razor布局页面
Razor布局模式下,页面共有模板部分与内容部分是分离的,主要采用以下标记对内容与模板结合进行说明:
a.@RenderBody:视图内容需要在@RenderBody部分呈现出来。b.@RenderSection:在模板中定义节,视图对应部分内容在节标记处呈现。c.@RenderPage:模板链接呈现一个页面。
4、Pure前端框架
本例设计使用雅虎公司提供的轻量级前端响应式页面设计、布局框架进行进行页面开发。使用方法较为简单,只需要在MVC模式下的模板页面中引入对应CSS样式文件即可。引入方式描述如下图:
引入文件开发实例
开发实例
为演示下MVC开发过程及工作基本原理,本例使用Pure前端响应式框架技术进行前端页面布局设计,使用 MVC进行了Demo的设计与开发。Demo首页面实现效果如下所示:
首页面设计运行效果
在线考试作答页面运行实际效果如下图:
考试页面设计及运行效果
考试成绩显示页面运行效果如下图:
成绩显示页面设计及运行效果
本例设计实现主要由三个页面组成,分别为登录页面、在线考试页面、成绩显示页面。设计实现过程描述如下:
1、定义页面模板
本例三个页面具有共同部分进行抽取,构成页面模板,模板名称_IndexLayout.cshtml。模板定义描述如下:
页面模板定义
2、定义视图
本例实现效果主要页面包括三个不同页面,因此需要基于模板定义三个不同视图。在业务逻辑操作完成之后可使用视图进行输出显示。三个视图分别为exam.cshtml考试页面、Index.cshtml首页视图、GetScore.cshtml结果页面。考试页面视图定义描述如下:
考试页面视图
考试成绩显示页面视图定义如下所示:
考试成绩页面视图
在线考试首页面视图定义如下所示:
在线考试首页面视图
3、业务逻辑Model模型类定义
本案例业务逻辑是将前端获取的用户提交数据进行分析。为演示我们直接在业务逻辑实现方法内部定义答案数组,通过答案数组与获取的用户作答结果数组进行对比分析,计算成绩。该类定义描述如下:
业务逻辑模型类
4、定义控制器及方法
前端业务请求按照Home/Index格式进行求请发送,服务器端通过控制器接收用户请求,Home为控制器名称,Index为对应方法。本例使用默认HomeController控制器,对该控制器添加新方法,分别用于实现点击考试按钮响应及考核结束按钮响应。方法描述如下:
控制器方法定义
使用Pure++MVC进行网页设计与实现整体案例分析及实现效果描述如上所示,本案例提供完成参考代码,如有需要请关注之后私信索取。