Web程序设计 html网页制作案例 _生活百科

文章插图
ASP.NET MVC设计实例
前文我们介绍了MVC设计模式实现基本原理及组成，其基本组成主要包括控制器、视图、模板等部分。目前绝大多数Web端程序设计语言已经支持MVC设计模式，进行Web应用程序开发，本文主要以ASP.NET为例对MVC模式显示进行简单说明。
开发工具1、开发平台环境
本文选择MVC实现编程语言为C#程序设计语言，所使用的的应用架构为.NET集成开发环境。因此开发工具选择使用了微软公司开发的Visual Studio集成开发工具与环境。Microsoft Visual Studio Express是Visual Studio的轻量级版本，在ASP.NET应用开发方面硬件需求较低。本例使用版本为Microsoft Visual Studio Express 2012版本，软件运行起始页如下图所示：

文章插图
Microsoft Visual Studio Express开发工具
2、MVC版本
ASP.NET MVC 是微软公司开发的Web应用程序框架Framework，用于实现基于MVC模式的Web应用程序开发，其最新版本为ASP.NET Core MVC 。本例使用Visual Studio Express版本为2012，安装MVC版本为MVC4 。

文章插图
asp.net mvc4
3、Razor布局页面
在进行Web应用程序开发过程中，对于不同页面共同部分，如页头、页脚等部分，为避免重复编码，一般使用页面母版或者布局页面形式对重复部分进行模板化设计。在ASP.NET Web开发过程中也提供了类似模板的功能，即Razor布局页面。

文章插图
Razor布局页面
Razor布局模式下，页面共有模板部分与内容部分是分离的，主要采用以下标记对内容与模板结合进行说明：
a.@RenderBody（）：视图内容需要在@RenderBody（）部分呈现出来。b.@RenderSection（）：在模板中定义节，视图对应部分内容在节标记处呈现。c.@RenderPage（）：模板链接呈现一个页面。
4、Pure前端框架
本例设计使用雅虎公司提供的轻量级前端响应式页面设计、布局框架进行进行页面开发。使用方法较为简单，只需要在MVC模式下的模板页面中引入对应CSS样式文件即可。引入方式描述如下图：

文章插图
Pure前端框架使用
开发实例为演示ASP.NET下MVC开发过程及工作基本原理，本例使用Pure前端响应式框架技术进行前端页面布局设计，使用ASP.NET MVC进行了Demo的设计与开发。Demo首页面实现效果如下所示：

文章插图
首页面设计运行效果
在线考试作答页面运行实际效果如下图：

文章插图
考试页面设计及运行效果
考试成绩显示页面运行效果如下图：

文章插图
成绩显示页面设计及运行效果
本例设计实现主要由三个页面组成，分别为登录页面、在线考试页面、成绩显示页面。设计实现过程描述如下：
1、定义页面模板
本例三个页面具有共同部分进行抽取，构成页面模板，模板名称_IndexLayout.cshtml 。模板定义描述如下：

文章插图
页面模板定义
2、定义视图
本例实现效果主要页面包括三个不同页面，因此需要基于模板定义三个不同视图。在业务逻辑操作完成之后可使用视图进行输出显示。三个视图分别为exam.cshtml考试页面、Index.cshtml首页视图、GetScore.cshtml结果页面。考试页面视图定义描述如下：

文章插图
考试页面视图
考试成绩显示页面视图定义如下所示：

文章插图
返回页面结果视图
在线考试首页面视图定义如下所示：

文章插图
首页面视图
3、业务逻辑Model模型类定义
本案例业务逻辑是将前端获取的用户提交数据进行分析。为演示我们直接在业务逻辑实现方法内部定义答案数组，通过答案数组与获取的用户作答结果数组进行对比分析，计算成绩。该类定义描述如下：

文章插图
业务逻辑模型类
4、定义控制器及方法
前端业务请求按照Home/Index格式进行求请发送，服务器端通过控制器接收用户请求，Home为控制器名称，Index为对应方法。本例使用默认HomeController控制器，对该控制器添加新方法，分别用于实现点击考试按钮响应及考核结束按钮响应。方法描述如下：

文章插图
控制器方法定义
使用Pure+ASP.NET+MVC进行网页设计与实现整体案例分析及实现效果描述如上所示，本案例提供完成参考代码，如有需要请关注之后私信索取。
本头条号长期关注编程资讯分享；编程课程、素材、代码分享及编程培训。如果您对以上方面有兴趣或代码错误、建议与意见，可在评论区回复。更多程序设计相关教程及实例分享，期待大家关注与阅读！相关文章链接如下：
Web前端设计-如何快速实现网站页面变灰？
Web程序设计-MVC设计模式分析