基于.NET平台的可视化Web应用程序工作原理的研究

刘 杰，索 静

（太原工业学院，山西太原 030008）

可视化编程VP（Visual Programming）是指借助框图、流程图、图符或各种图示表达式来完成或辅助程序的一种编程方式。可视化编程环境VPE（Visual Programming Environment），将VP与文本化编程语言相结合并以图示化工作方式的CASE工具。本文对.NET平台上的可视化Web应用程序开发工具的工作原理进行了分析，并介绍了其开发模式。对实现可视化中的诸多关键技术进行了分析，同时描述了其工作流程，进而解释了其如何实现Web应用程序的可视化开发。

1 基于事件驱动的开发模式

传统的Web应用程序是基于线性处理模型的，运行过程按照代码编写的顺序依次执行，基于.net平台开发的Web应用程序采用的是事件驱动开发模式。在这种模式中，由浏览器捕获用户的操作事件并发送消息给远程Web应用程序，并在远程端选择相应事件处理函数进行处理［2］，最后将执行结果返回浏览器。程序的执行过程由用户触发的事件来驱动（如图1），在.Net中它可以为这种开发模式的Web应用程序生成其开发框架。该框架对开发人员屏蔽了服务器与浏览器之间的数据通信处理，引入了面向对象的程序开发环境，使得程序员能够以可视化的方式设计页面，并以页面上各个交互控件编写事件处理函数的形式完成程序的开发。

图1 .net平台事件驱动Web应用程序框图

2 可视化的Web页面设计

.NET引入了可视化的WebForm设计环境，并结合一些比较成熟的“所见即所得”页面设计工具的方法更好地实现界面设计的可视化。使用该设计环境将常用的窗体和与用户交互的元素被抽象为控件，以图标的方式集中放置于与开发环境的控件工具面板上，设计人员以拖放和移动图标的形式来设计界面部分，设计得到的就是模板文件［1］。在这个文件中包含有普通的HTML语言代码和标签元素，例如:＜asp:TextBox id="TextBox1"runat="server"＞密码＜/asp:TextBox＞表示在页面当前位置存在一个名为TextBox1，用于接收用户在浏览器端输入信息的控件，其中HTML代码控制页面的布局和显示模板中的静态文本，＜asp:..＞标签的元素能够在程序逻辑代码中用其id作为对象名来引用并显示程序的输出。在程序执行完毕时将用输出结果替换asp标签元素形成标准的HTML/XML文本并返回给客户端浏览器。

3 界面与程序逻辑相分离

与传统Web应用系统不同，.Net将应用系统的界面和程序逻辑部分分离，使得程序的逻辑机构更加明晰，可读性和可维护性也大大增强。同时.Net中引入了WebForm的概念，它由两部分构成，一个是由可视化元素形成模板用于控制页面的显示代码编写在后缀为.aspx的文件;另一个是将处理业务逻辑的代码编写在.cs（C#代码）或者.vbx（VB.Net代码）中。为了关联两个文件，在.aspx文件的头部会指明用于处理该页面的业务逻辑的代码文件名。例如aspx文件的文件头包含如下代码:

＜%@Page language="c#"Codebehind="WebForm1.aspx.cs"AutoEventWireup="false"Inherits="WritePaper01.WebForm1"% ＞其中 Codebehind="WebForm1.aspx.cs"指明了用于处理该页面的业务逻辑的代码文件为WebForm1.aspx.cs。

当程序设计人员将页面设计工具面板上的控件拖动到WebForm中时，该控件对应的外观属性的类代码也随即生成，同时在其代码文件生成对该对象的定义［3］。例如开发人员从控件面板上拖动一个textbox到页面上时在aspx文件中会生成以下代码＜asp:TextBox id="TextBox1"runat="server"＞的页面代码，而同时在.cs文件则生成protected System.Web.UI.WebControls.TextBox TextBox1的程序代码（定义了一个名为textbox1的对象）。

4 事件的捕捉与处理

.NET平台采用面向对象设计思想通过事件的响应来完成操作。在浏览器端采用Java/VB脚本语言捕捉用户的输入，返回＜form＞……＜/form＞标签中页面元素，进而将本页面中所有对象的值采用post方法提交到服务器。在有服务器端返回到客户端浏览器时，Java脚本捕捉用户操作并调用函数—doPostBack（eventTarget，eventArgument）与服务器交互，其中隐藏了两个页面元素:"—EVENTTARGET"用于指明了引发事件的控件id和"__EVENTARGUMENT"用于指明事件参数。例如对于网页中的chexkbox有代码＜input id="CheckBox1"type="checkbox"name="CheckBox1"onclick="—doPostBack（ ＇CheckBox1 ＇，＇）"language="javascript"/＞checkbox的id为CheckBox1，当它被单击时，事件发生，__doPostBack函数就将该控件的id和事件参数一起提交给服务器进行处理。

5 页面状态的自动保存与恢复

.NET采用对页面状态自动进行编码加密、客户端保存状态以及回送后自动回复这一机制解决了传统Web应用程序服务器不会保存用户之前访问的状态信息这一难题。

采用.NET技术开发的Web应用程序在其返回给客户端浏览器的网页中都包含有名为__VIEWSTATE的隐藏页面元素。

例如:＜input type="hidden"name="__VIEWSTATE"

value="dDw3MzU1MTQ5MzY7Oz7QLMm2KHUqNvTPn PuRSdwMj/uZbA=="/＞，该元素的值是按照特定格式进行编码和加密的页面状态信息，记录当前Web页面中所有与用户交互控件（如textbox、checkbox等）的当前值。当用户对当前页面进行继续操作并引发一个新的事件时，"__VIEWSTATE"与当前用户新的输入值被一起以post方法提交给服务器。服务端应用程序首先根据"__VIEWSTATE"的值恢复页面的所有用于与用户交互的对象的先前状态，然后根据用户新的输入和请求调用应用程序的事件处理函数，之后将当前页面的所有状态信息再次进行编码并与程序的执行结果一起返回给浏览器。

6 Web应用程序工作流程

服务器端的Web应用程序在接受到浏览器的请求后，首先根据输入参数viewstate恢复页面状态，进而根据事件参数e的来源和输入参数转入执行开发人员写好的用于处理该事件的业务逻辑处理程序，之后按照执行结果替换所有的＜asp＞页面元素标签，并按照当前页面状态形成新的viewstate，以HTML/XML格式发送给客户端浏览器，这样就实现了类似桌面应用程序的事件相应处理的模式。

7 结束语

基于.net平台的可视化Web应用程序引入了事件驱动的开发模式，并将界面与代码进行分离，采用页面状态自动保存与恢复机制，浏览器端用脚本语言捕捉操作事件并自动向服务器进行提交等技术实现了Web应用程序的可视化开发。该工具的使用改善了编程人员表达程序逻辑以及理解程序工作的能力，同时该工具具有简单、具体、直观和反馈及时等优点，大大提高了程序编写的效率。

［1］Fred Barwell，Richard Blair.PROFESSIONAL VB.NET，WROX，2002.

［2］Matthew Reynolds，Richard Blair etc.，BEGINNING Visual Basic.NET，WROX，2002.

［3］潘爱民.COM原理与应用［M］.北京:清华大学出版社，1999.

［4］刘瑜，王立福，张世琨.软件框架开发过程研究［J］.计算机工程与应用，2004-40，26-29.