puremvc

ASP.NET MVC设计实例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，软件运行起始页如下图所示:

2.MVC版本

ASP.NET MVC是微软开发的一个Web应用框架，用于实现基于MVC模式的Web应用开发。它的最新版本是ASP.NET核心MVC。在这个例子中，Visual Studio Express的版本是2012，MVC的版本是MVC4。

3.Razor布局页面

在Web应用开发过程中，对于不同页面的共用部分，比如页眉页脚，为了避免重复编码，一般会使用页面母版或布局页面对重复部分进行模板化。在ASP.NET网站的开发过程中，还提供了一个类似模板的功能，即Razor布局页面。

在Razor布局模式下，页面的常用模板部分和内容部分是分开的，下面的标记主要用来说明内容和模板的结合:

A.@RenderBody():视图内容需要呈现在@RenderBody()部分中。
b.@RenderSection():在模板中定义一个节，视图的对应部分呈现在节标记处。
c.@RenderPage():模板链接呈现页面。

4.纯前端框架

这个示例设计使用Yahoo提供的轻量级前端响应页面设计和布局框架来开发页面。使用方法比较简单，只需要在MVC模式下将相应的CSS样式文件引入模板页面即可。引入方式描述如下:

开发实例是为了展示MVC在ASP.NET的开发过程和工作原理。本例中，前端页面布局采用纯前端响应式框架技术设计，演示采用ASP.NET MVC设计开发。演示主页实现效果如下:

在线考试答题页面的实际效果如下:

测试成绩显示页面的运行效果如下:

本例的设计与实现主要由三个页面组成，即登录页面、在线考试页面和成绩显示页面。设计和实现过程描述如下:

1.定义页面模板

本例中，三个页面有共同的部分需要提取，形成一个页面模板，模板名为_ indexlayout.cshtml，模板定义描述如下:

2.定义视图

本例的主页包括三个不同的页面，因此您需要基于模板定义三个不同的视图。业务逻辑操作完成后，视图可以用于输出显示。这三个视图分别是exam.cshtml考试页面、Index.cshtml主页视图和GetScore.cshtml成绩页面。考试页面视图定义描述如下:

测试分数显示页面的视图定义如下:

在线考试的首页视图定义如下:

3.业务逻辑模型类的定义

这个案例的业务逻辑是分析前端获取的用户提交数据。为了演示我们在业务逻辑实现方法内部直接定义答案数组，我们将答案数组与获得的用户答案结果数组进行比较分析，并计算得分。该类的定义描述如下:

4.定义控制器和方法

前端业务请求按照Home/Index格式发送，服务器通过控制器接收用户请求，其中Home是控制器的名称，Index是对应的方法。本例中使用了默认的HomeController，在控制器中加入了新的方法，分别用来实现点击测试按钮的响应和结束检查按钮的响应。该方法描述如下:

用纯+ASP。NET+MVC来设计实现一个网页，分析整体案例，描述实现效果。如上所示，这个案例提供了完成的参考代码。如有需要，请关注，私信索取。

本头条长期专注于编程信息分享；编程课程、资料、代码共享和编程培训。如果你对以上方面感兴趣或者有代码错误、建议和意见，可以在评论区回复。更多编程相关教程和例子分享。期待您的关注和阅读！相关文章的链接如下:

Web前端设计——如何快速实现网站页面的灰色化？

Web编程-MVC设计模式分析