摘要：
本文从视图、控制器、模型三个方面简要介绍了在Asp.net环境下,经典MVC设计模式的实现，并讨论了MVC设计模式的扩展，最后对MVC的优点及不足之处进行了分析。

关键词：设计模式、视图、控制器、模型

　　ASP.NET是微软最新推出的新型体系结构.NET框架的一部分，它为构造新一代动态网站和基于网络的分布式应用提供了强有力的支持。与以前 的 Web 开发模型相比，ASP.NET 提供了许多重要的优点例如: 简易性；安全性；可管理性等。而且与基于过程的ASP页面技术相比，面向对象技术在ASP.NET中得到了完全实现。用传统ASP技术建立的Web应用实 例中，在页面中同时实现显示，业务逻辑和流程控制，这从工程化的角度考虑，它有许多不足之处。用户界面承担着向用户显示问题模型和与用户进行操作和I/O 交互的作用。用户希望保持交互操作界面的相对稳定，但更希望根据需要改变和调整显示的内容和形式。在.NET框架下ASP.NET技术结合MVC设计模式 很好地解决了上述问题。

　　1 MVC设计模式简介

　　MVC由Trygve Reenskaug提出，首先被应用在SmallTalk-80环境中，是许多交互和界面系统的构成基础。MVC结构是为那些需要为同样的数据提供多个视 图的应用程序而设计的，它很好的实现了数据层与表示层的分离。MVC作为一种开发模型，通常用于分布式应用系统的设计和分析中，以及用于确定系统各部分间 的组织关系。对于界面设计可变性的需求，MVC(Model-View-Controller)把交互系统的组成分解成模型、视图、控制器三种部件。

　　视图部件把表示模型数据及逻辑关系和状态的信息以特定形式展示给用户。它从模型获得显示信息，对于相同的信息可以有多个不同的显示形式或视图。

　　控制器部件是处理用户与软件的交互操作的，其职责是控制提供模型中任何变化的传播，确保用户界面于模型间的对应联系；它接受用户的输入，将输入反馈给模型，进而实现对模型的计算控制，是使模型和视图协调工作的部件。

　　模型部件保存由视图显示，由控制器控制的数据；它封装了问题的核心数据、逻辑和功能的计算关系，它独立于具体的界面表达和I/O操作。

　　2 MVC设计模式的实现

　　ASP.NET提供了一个很好的实现这种经典设计模式的类似环境。开发者通过在ASPX页面中开发 用户接口来实现视图；控制器的功能在逻辑功能代码(.cs)中实现；模型通常对应应用系统的业务部分。在ASP.NET中实现这种设计而提供的一个多层系 统，较经典的ASP结构实现的系统来说有明显的优点。将用户显示（视图）从动作（控制器）中分离出来,提高了代码的重用性。将数据（模型）从对其操作的动 作（控制器）分离出来可以让你设计一个与后台存储数据无关的系统。就MVC结构的本质而言，它是一种解决耦合系统问题的方法。

　　2.1 视图

　　视图是模型的表示，它提供用户交互界面。使用多个包含单显示页面的用户部件，复杂的Web页面可以展示来自多个数据源的内容，并且网页人员，美工能独自参与这些Web页面的开发和维护。

　 　在ASP.NET下，视图的实现很简单。可以像开发WINDOWS界面一样直接在集成开发环境下通过拖动控件来完成页面开发本。本文中介绍每一个页面都 采用复合视图的形式即：一个页面由多个子视图(用户部件)组成；子视图可以是最简单HTML 控件、服务器控件或多个控件嵌套构而成的Web自定义控件。页面都由模板定义，模板定义了页面的布局，用户部件的标签和数目，用户指定一个模板，平台根据 这些信息自动创建页面。针对静态的模板内容，如页面上的站点导航，菜单，友好链接，这些使用缺省的模板内容配置；针对动态的模板内容(主要是业务内容)， 由于用户的请求不同，只能使用后期绑定，并且针对用户的不同，用户部件的显示内容进行过滤。使用由用户部件根据模板配置组成的组合页面，它增强了可重用 性，并原型化了站点的布局。

　　视图部分大致处理流程如下：首先，页面模板定义了页面的布局；页面配置文件定义视图标签的具体内容（用户部 件）；然后，由页面布局策略类初始化并加载页面；每个用户部件根据它自己的配置进行初始化，加载校验器并设置参数，以及事件的委托等；用户提交后，通过了 表示层的校验，用户部件把数据自动提交给业务实体即模型。

　　这一部分主要定义了WEB页面基类PageBase；页面布局策略类 PageLayout，完成页面布局，用于加载用户部件到页面；用户部件基类UserControlBase即用户部件框架，用于动态加载检验部件，以及 实现用户部件的个性化。为了实现WEB应用的灵活性，视图部分也用到了许多配置文件例如：置文件有模板配置、页面配置、路径配置、验证配置等。

　　2.2 控制器

　 　为了能够控制和协调每个用户跨越多个请求的处理，控制机制应该以集中的方式进行管理。因此，为了达到集中管理的目的引入了控制器。应用程序的控制器集中 从客户端接收请求（典型情况下是一个运行浏览器的用户），决定执行什么商业逻辑功能，然后将产生下一步用户界面的责任委派给一个适当的视图组件。

　 　用控制器提供一个控制和处理请求的集中入口点，它负责接收、截取并处理用户请求；并将请求委托给分发者类，根据当前状态和业务操作的结果决定向客户呈现 的视图。在这一部分主要定义了HttpReqDispatcher(分发者类)、HttpCapture(请求捕获者类)、Controller(控制器 类)等，它们相互配合来完成控制器的功能。请求捕获者类捕获HTTP请求并转发给控制器类。控制器类是系统中处理所有请求的最初入口点。控制器完成一些必 要的处理后把请求委托给分发者类；分发者类分发者负责视图的管理和导航，它管理将选择哪个视图提供给用户，并提供给分发资源控制。在这一部分分别采用了分 发者、策略、工厂方法、适配器等设计模式。

　　为了使请求捕获者类自动捕获用户请求并进行处理，ASP.NET 提供低级别的请求/响应 API，使开发人员能够使用 .NET 框架类为传入的 HTTP 请求提供服务。为此，必须创作支持 System.Web.IHTTPHandler 接口和实现 ProcessRequest() 方法的类即：请求捕获者类，并在web.config 的 ＜httphandlers＞ 节中添加类。ASP.NET 收到的每个传入 HTTP 请求最终由实现 IHTTPHandler 的类的特定实例来处理。IHttpHandlerFactory 提供了处理 IHttpHandler 实例 URL 请求的实际解析的结构。HTTP 处理程序和工厂在 ASP.NET 配置中声明为 web.config 文件的一部分。ASP.NET 定义了一个 ＜httphandlers＞ 配置节，在其中可以添加和移除处理程序和工厂。子目录继承 HttpHandlerFactory 和 HttpHandler 的设置。 HTTP 处理程序和工厂是 ASP.NET 页框架的主体。工厂将每个请求分配给一个处理程序，后者处理该请求。 例如，在全局 machine.config 文件中，ASP.NET 将所有对 ASPx 文件的请求映射到 HttpCapture类：

＜httphandlers＞
...
＜add verb="*" path="*.ASPx" type="Sys.UI.HttpCapture, Sys.UI"/＞
...
＜/httphandlers＞

　　2.3 模型

　 　MVC系统中的模型从概念上可以分为两类――系统的内部状态和改变系统状态的动作。模型是你所有的商业逻辑代码片段所在。本文为模型提供了业务实体对象 和业务处理对象：所有的业务处理对象都是从ProcessBase类派生的子类。业务处理对象封装了具体的处理逻辑，调用业务逻辑模型，并且把响应提交到 合适的视图组件以产生响应。业务实体对象可以通过定义属性描述客户端表单数据。所有业务实体对象都EntityBase派生子类对象，业务处理对象可以直 接对它进行读写，而不再需要和request、response对象进行数据交互。通过业务实体对象实现了对视图和模型之间交互的支持。实现时把"做什么 "（业务处理）和"如何做"（业务实体）分离。这样可以实现业务逻辑的重用。由于各个应用的具体业务是不同的，这里不再列举其具体代码实例。


3 MVC设计模式的扩展

　　通过在ASP.NET中的MVC模式编写的，具有极其良好的可扩展性。它可以轻松实现以下功能：

　　①实现一个模型的多个视图；

　　②采用多个控制器；

　　③当模型改变时，所有视图将自动刷新；

　　④所有的控制器将相互独立工作。

　 　这就是MVC模式的好处，只需在以前的程序上稍作修改或增加新的类，即可轻松增加许多程序功能。以前开发的许多类可以重用，而程序结构根本不再需要改 变，各类之间相互独立，便于团体开发，提高开发效率。下面讨论如何实现一个模型、两个视图和一个控制器的程序。其中模型类及视图类根本不需要改变，与前面 的完全一样，这就是面向对象编程的好处。对于控制器中的类，只需要增加另一个视图，并与模型发生关联即可。该模式下视图、控制器、模型三者之间的示意图如 图2所示。

　　同样也可以实现其它形式的MVC例如：一个模型、两个视图和两个控制器。从上面可以看出，通过MVC模式实现的应用程序具有极其良好的可扩展性，是ASP.NET面向对象编程的未来方向。

4 MVC设计模式的优点及不足之处

　　4.1 MVC的优点

　　MVC的优点体现在以下几个方面：

　　（1） 可以为一个模型在运行时同时建立和使用多个视图。变化-传播机制可以确保所有相关的视图及时得到模型数据变化，从而使所有关联的视图和控制器做到行为同步。

　　（2） 视图与控制器的可接插性，允许更换视图和控制器对象，而且可以根据需求动态的打开或关闭、甚至在运行期间进行对象替换。

　　（3） 模型的可移植性。因为模型是独立于视图的，所以可以把一个模型独立地移植到新的平台工作。需要做的只是在新平台上对视图和控制器进行新的修改。

　　（4） 潜在的框架结构。可以基于此模型建立应用程序框架，不仅仅是用在设计界面的设计中。

　　4.2 MVC的不足之处

　　MVC的不足体现在以下几个方面：

　　（1）增加了系统结构和实现的复杂性。对于简单的界面，严格遵循MVC，使模型、视图与控制器分离，会增加结构的复杂性，并可能产生过多的更新操作，降低运行效率。

　　（2）视图与控制器间的过于紧密的连接。视图与控制器是相互分离，但确实联系紧密的部件，视图没有控制器的存在，其应用是很有限的，反之亦然，这样就妨碍了他们的独立重用。

　　（3）视图对模型数据的低效率访问。依据模型操作接口的不同，视图可能需要多次调用才能获得足够的显示数据。对未变化数据的不必要的频繁访问，也将损害操作性能。

　　（4） 目前，一般高级的界面工具或构造器不支持MVC模式。改造这些工具以适应MVC需要和建立分离的部件的代价是很高的，从而造成使用MVC的困难。

　　5 结束语

　 　与软件所处理问题的内在模型相比较，用户界面是需要经常发生变化的，采用MVC设计模式可以在满足对界面要求的同时，使软件的计算模型独立于界面的构 成。也可以基于此模型建立大型分布式应用程序框架。本文介绍了MVC设计模式的原理；MVC设计模式三个组成构件（模型部件、视图部件和控制部件）以及在 ASP.NET环境下实现基于MVC的应

document 文挡对象详解(JavaScript脚本语言描述).2007/08/10 22:12注:页面上元素name属性和JavaScript引用的名称必须一致包括大小写，否则会提示你一个错误信息 "引用的元素为空或者不是对象"]
========================================================================
对象属性:

document.title                 //设置文档标题等价于HTML的<title>标签
document.bgColor               //设置页面背景色
document.fgColor               //设置前景色(文本颜色)
document.linkColor             //未点击过的链接颜色
document.alinkColor            //激活链接(焦点在此链接上)的颜色
document.vlinkColor            //已点击过的链接颜色
document.URL                   //设置URL属性从而在同一窗口打开另一网页
document.fileCreatedDate       //文件建立日期，只读属性
document.fileModifiedDate      //文件修改日期，只读属性
document.fileSize              //文件大小，只读属性
document.cookie                //设置和读出cookie
document.charset               //设置字符集 简体中文:gb2312
----------------------------
常用对象方法:

document.write()                      //动态向页面写入内容
document.createElement(Tag)           //创建一个html标签对象
document.getElementById(ID)           //获得指定ID值的对象
document.getElementsByName(Name)      //获得指定Name值的对象
document.body.appendChild(oTag)
========================================================================
body-主体子对象

document.body                   //指定文档主体的开始和结束等价于<body></body>
document.body.bgColor           //设置或获取对象后面的背景颜色
document.body.link              //未点击过的链接颜色
document.body.alink             //激活链接(焦点在此链接上)的颜色
document.body.vlink             //已点击过的链接颜色
document.body.text              //文本色
document.body.innerText         //设置<body>...</body>之间的文本
document.body.innerHTML         //设置<body>...</body>之间的HTML代码
document.body.topMargin         //页面上边距
document.body.leftMargin        //页面左边距
document.body.rightMargin       //页面右边距
document.body.bottomMargin      //页面下边距
document.body.background        //背景图片
document.body.appendChild(oTag) //动态生成一个HTML对象
----------------------------
常用对象事件:

document.body.onclick="func()"              //鼠标指针单击对象是触发
document.body.onmouseover="func()"          //鼠标指针移到对象时触发
document.body.onmouseout="func()"           //鼠标指针移出对象时触发
========================================================================
location-位置子对象:

document.location.hash          // #号后的部分
document.location.host          // 域名+端口号
document.location.hostname      // 域名
document.location.href          // 完整URL
document.location.pathname      // 目录部分
document.location.port          // 端口号
document.location.protocol      // 网络协议(http:)
document.location.search        // ?号后的部分
----------------------------
常用对象事件:

documeny.location.reload()          //刷新网页
document.location.reload(URL)       //打开新的网页
document.location.assign(URL)       //打开新的网页
document.location.replace(URL)      //打开新的网页
========================================================================
selection-选区子对象
document.selection
========================================================================
images集合(页面中的图象):
----------------------------
a)通过集合引用
document.images                 //对应页面上的<img>标签
document.images.length          //对应页面上<img>标签的个数
document.images[0]              //第1个<img>标签          
document.images[i]              //第i-1个<img>标签
----------------------------
b)通过nane属性直接引用
<img name="oImage">
document.images.oImage          //document.images.name属性
----------------------------
c)引用图片的src属性
document.images.oImage.src      //document.images.name属性.src
----------------------------
d)创建一个图象
var oImage
oImage = new Image()
document.images.oImage.src="1.jpg"
同时在页面上建立一个<img>标签与之对应就可以显示
----------------------------
示例代码(动态创建图象)：
<html>
<img name=oImage>
<script language="javascript">
       var oImage
       oImage = new Image()
       document.images.oImage.src="1.jpg"
</script>
</html>

<html>
<script language="javascript">
       oImage=document.caeateElement("IMG")
       oImage.src="1.jpg"
       document.body.appendChild(oImage)
</script>
</html>
========================================================================
forms集合(页面中的表单):
----------------------------
a)通过集合引用
document.forms                     //对应页面上的<form>标签
document.forms.length              //对应页面上<form>标签的个数
document.forms[0]                  //第1个<form>标签
document.forms[i]                  //第i-1个<form>标签
document.forms[i].length           //第i-1个<form>中的控件数
document.forms[i].elements[j]      //第i-1个<form>中第j-1个控件
----------------------------
b)通过标签name属性直接引用
<form name="Myform"><input name="myctrl"></form>
document.Myform.myctrl             //document.表单名.控件名
----------------------------
c)访问表单的属性
document.forms[i].name             //对应<form name>属性
document.forms[i].action           //对应<form action>属性
document.forms[i].encoding         //对应<form enctype>属性
document.forms[i].target           //对应<form target>属性
document.forms[i].appendChild(oTag) //动态插入一个控件
----------------------------
示例代码(form)：
<html>
<!--Text控件相关Script-->
<form name="Myform">
<input type="text" name="oText">
<input type="password" name="oPswd">
<form>
<script language="javascript">
//获取文本密码框的值
document.write(document.Myform.oText.value)
document.write(document.Myform.oPswd.value)
</script>
</html>
----------------------------
示例代码(checkbox)1：
<html>
<!--checkbox,radio控件相关script-->
<form name="Myform">
<input type="checkbox" name="chk" value="1">1    
<input type="checkbox" name="chk" value="2">2    
</form>    
<script language="javascript">    
function fun(){    
      //遍历checkbox控件的值并判断是否选中    
      var length    
      length=document.forms[0].chk.length    
      for(i=0;i<length;i++){    
      v=document.forms[0].chk[i].value    
      b=document.forms[0].chk[i].checked    
      if(b)    
        alert(v=v+"被选中")    
      else    
        alert(v=v+"未选中")   
      }    
      }    
</script>     
<a href=# onclick="fun()">ddd</a>                     
</html>
----------------------------
示例代码(checkbox)2：
<SCRIPT LANGUAGE="JavaScript">
<!--
// 2006-3-1 JavaScript 得到所有的checkbox的选中值
function getSelectedInfoRows(k)
{
var temp = "";
alert("k=="+k);
var obj = eval("document.form"+k);
for ( var i=0; i<document.form1.elements.length; i++ )
{
   var e = document.form1.elements[i];
   if ( (e.type=='checkbox')&&(!e.disabled) )
   {
    if ( e.checked )
    {
     temp += temp==""? e.value: "," + e.value ;
    }
   }
   if(temp=="")
   {
    //alert("temp=="+temp);
    obj.select.value = "0";
   }
   else
   {
    //alert("temp=="+temp);
    obj.select.value=temp;
   }

<script language="javascript">
       //遍历select控件的option项
       var length
       length=document.Myform.oSelect.length
       for(i=0;i<length;i++)
       document.write(document.Myform.oSelect[i].value)
</script>

<script language="javascript">
       //遍历option项并且判断某个option是否被选中
       for(i=0;i<document.Myform.oSelect.length;i++){
       if(document.Myform.oSelect[i].selected!=true)
       document.write(document.Myform.oSelect[i].value)
       else
       document.write("<font color=red>"+document.Myform.oSelect[i].value+"</font>")  
       }
</script>

<script language="javascript">
       //根据SelectedIndex打印出选中的option
       //(0到document.Myform.oSelect.length-1)
       i=document.Myform.oSelect.selectedIndex
       document.write(document.Myform.oSelect[i].value)
</script>

<script language="javascript">
       //动态增加select控件的option项
       var oOption = document.createElement("OPTION");
       oOption.text="4";
       oOption.value="4";
       document.Myform.oSelect.add(oOption);
</script>
<html>
========================================================================
Div集合(页面中的层):
<Div id="oDiv">Text</Div>
document.all.oDiv                                  //引用图层oDiv               
document.all.oDiv.style.display=""                 //图层设置为可视
document.all.oDiv.style.display="none"             //图层设置为隐藏
document.getElementId("oDiv")                      //通过getElementId引用对象
document.getElementId("oDiv").style=""
document.getElementId("oDiv").display="none"
/*document.all表示document中所有对象的集合
只有ie支持此属性，因此也用来判断浏览器的种类*/
----------------------------
图层对象的4个属性
document.getElementById("ID").innerText      //动态输出文本
document.getElementById("ID").innerHTML      //动态输出HTML
document.getElementById("ID").outerText      //同innerText
document.getElementById("ID").outerHTML      //同innerHTML
----------------------------
示例代码：
<html>
<script language="javascript">
function change(){
document.all.oDiv.style.display="none"
}
</script>
<Div id="oDiv" onclick="change()">Text</Div>
</html>

<html>
<script language="javascript">
function changeText(){
document.getElementById("oDiv").innerText="NewText"
}
</script>
<Div id="oDiv" onmouseover="changeText()">Text</Div>
</html