WebMatrix开发ASP.NET简易教程

                                WebMatrix开发ASP.NET简易教程

前言

　　无可否认，Microsoft的重量级开发工具Visual Studio.NET确实为我们提供了一个非常强大、优秀的.NET应用系统集成开发环境。但是，使用VS.NET也要面对一些问题，比如：VS.NET要付费（当然D版另当别论），VS.NET安装比较麻烦，VS.NET占用空间很大，对机器要求也较高。因此，采用VS.NET来开发要付出比较高昂的使用成本，只有应用于大型的系统开发才有较好的性效比。

　　如果仅仅只是要进行中小型的基于ASP.NET的Web应用系统开发的话，是否一定要用强大而昂贵的Visual Studio.NET呢？

　　答案是否定的。最近Microsoft为开发者提供了一款免费的小巧易用的开发ASP.NET工具，这就是WebMatrix。

图1：http://www.asp.net/WebMatrix

　　图1是WebMatrix项目的主页，WebMatrix起源于2000年12月，微软的工程师完全采用.NET Framework和C#语言开发的一款免费的轻量级ASP.NET快速开发工具，可以方便快捷的完成Web应用系统的开发。

　　WebMatrix最突出的特点就是小巧灵活，整个安装文件不过1.3M左右，安装后全部大小也不过2.8M左右，使用它只需基本的.NET Framework支持就可以了，甚至不需要安装IIS，因为WebMatrix自带了一个Microsoft ASP.NET Web Matrix Server，可以发布、运行ASP.NET应用程序。
　　走近WebMatrix

　　l) 安装WebMatrix

　　WebMatrix目前可以支持的操作系统是Windows 2000和Windows XP，可以从http://www.asp.net/webmatrix/免费下载。

　　安装WebMatrix之前必须先装好Microsoft .NET Framework 1.1和Internet Expleror 5.5以上版本。安装过程是傻瓜式的，只管一路"Next"就行了。安装好后运行可以看到WebMatrix的主界面如图2所示。其界面布局与VS.NET有点类似，上部是菜单/工具条，左边是工具箱，提供开发ASP.NET所需的各种控件工具，右边是工作区管理栏和属性栏，分别用于文件/数据的管理和控件属性的配置，中间是主工作区。

图2：WebMatrix主界面

 

　　2) 第一个ASP.NET程序Hello WebMatrix！

　　首先我们来创建第一个ASP.NET程序，从File菜单新建一个文件，可以看到一个新建文件对话框（图3）。

图3：新建文件对话框

　　WebMatrix与VS.NET的一个很大不同之处是WebMatrix是基于文件来进行开发管理的，而不是象VS.NET那样基于项目（Project）来管理。这跟WebMatrix主要面对的开发项目是中小型项目有关系，小型项目开发相对比较简单，管理没有那么复杂，WebMatrix自身的定位只是一个轻量级的开发工具。

　　从打开的新建文件对话框中可以看到WebMatrix支持新建多种类型的文件，包括.aspx、.sql、.cs、.xml文件等，可以支持三种典型的.NET应用开发语言--C#、J#、Visual Basic.NET。选择缺省的ASP.NET Page，并输入要创建的文件名HelloWebMatrix.aspx，选择C#为编程语言，即可创建一个空白ASPX页面文件。

　　WebMatrix为每个ASP.NET文件窗口提供了四种视图，分别是设计视图（Design），静态代码视图（HTML），动态代码视图（Code）和全局视图（All），缺省显示的是设计视图。

　　从左边的工具箱中的Web Controls栏中选择Button控件拖放到页面设计视图上，可以看到一个Button控件显示在视图中，在属性栏中将其Text属性修改为"问候！"，可以看到按钮上的文本随之变为"问候！"，如图4所示。从界面右下区域的属性栏中可以看到该控件的缺省名称为Button1。

图4：在视图区添加"问候！"按钮

　　这样HelloWebMatrix程序的可视化编辑就完成了，然后开始编辑代码。

　　 双击视图区中的"问候！"按钮，可以看到页面视图区由Design视图转到了Code视图，WebMatrix自动为按钮Button1的Click事件创建了一个函数--void Button1_Click(object sender, EventArgs e)，函数体尚无内容。在函数体中添入一行代码：

"Button1.Text = "Hello WebMatrix!"

　　整个开发过程就完成了，如图5所示。

图5：为按钮Click事件添加处理代码

　　点击工具条上的运行按钮运行程序，可以看到WebMatrix弹出一个对话框，询问是采用IIS还是自带的Web Matrix Server来运行程序，如果机器上没有安装IIS，可以选择其缺省的Web Matrix Server，在端口号中输入一个本机空闲的端口号，比如8000，点击Start按钮即开始运行，如图6所示。

图6：选择ASP.NET应用程序的运行服务器

　　运行过程中首先启动了Web Matrix Server（可以看到Windows系统托盘区出现了一个图标），然后从弹出浏览器窗口中可以看到运行结果--页面上出现一个"问候"按钮，点击该按钮后按钮上的文本变为"Hello WebMatrix！"，如图7所示。

图7：HelloWebMatrix程序运行效果

　　开发数据库访问程序

　　动态网页开发中最常见的恐怕就是开发数据库访问程序。WebMatrix为开发ASP.NET数据库访问程序提供了很好的支持。观察一下WebMatrix主界面右上区域的工作区管理栏（Workspace），会发现在Workspace标签页的旁边还有一个Data标签页，这里还提供了一个数据栏（Data） ，点击Data标签页就进入了数据窗口（Data），如图8所示。

图8：数据窗口

　　开发数据库访问程序首先要建立数据库连接，点击数据窗口中的添加数据库连接按钮，可以看到添加新数据库连接项目窗口，如图9所示。


图9：添加数据库连接

　　WebMatrix可以支持Access数据库，也可以支持SQL Server/MSDE数据库/桌面引擎，如果是后者的话，可以得到更好的支持，在这里为简便起见，可以选择Access Database，点击OK，从弹出的对话框中选择一个Access数据库，比如Access自带的Sample数据库：家庭成员地址数据库文件ADDRBOOK.MDB，点击OK后可以看到WebMatrix已经在数据窗口中建好了一个数据库连接，从中可以看到数据库中的数据表，如图10所示。


图10：一个建立好的数据连接

　　建好了数据库连接后，剩下来的事情就简单了，新建一个ASP.NET程序文件DataBaseAccess.aspx，然后在数据窗口中选择一个数据表（比如"家庭成员"表）拖放到页面设计视图上，可以看到页面上自动建立了一个MxDataGrid控件和一个AccessDataSourceControl控件，并自动完成了数据集的关联，如图11所示。


图11：拖放一个数据表到页面设计视图区后的效果

　　此时已经完成了一个具有基本的数据显示功能的数据库访问程序的开发。点击运行按钮运行程序，可以看到页面的显示效果－－页面上显示出一张有关家庭成员信息的数据表，可以看到这个数据表还进行了自动分页显示处理，在表格的最后一行是数据分页显示的页码链接，用鼠标点击表格的表头各列，表中数据可以自动按照该列排序显示，这样的数据表已经可以满足一般的页面数据显示需要，而此时你甚至还没有编写一行代码。


图12：DataBaseAccess程序运行效果

　　作为一个数据库访问程序，仅仅有数据显示功能当然是不够的，还需要加上一些基本的增、删、改等交互功能，下面我们为DataBaseAccess程序加入数据查询功能。

　　回到页面设计视图，从工具箱中将WebControls栏中的TextBox和Button拖放到页面设计视图上，将Button的"Text"属性设为"查询"，再将一个DataGrid控件拖放到下一行，如图13所示。可以看到这几个控件的名字被缺省设定为TextBox1、DataGrid1、Button1。


图13：添加查询文本框和按钮

　　此时程序的页面可视化设计就完成了，接下来实现一个按照用户在文本框中输入的成员姓氏查询成员信息的功能（删除、修改功能可以以类似方式实现）。

　　在页面视图区中点击底部的Code标签页 ，页面视图区转到了Code视图，可以看到WebMatrix界面左边的工具箱中出现了代码向导（Code Wizard）一栏，如图14所示。


图14：代码向导栏

　　可以看到"代码向导"提供了几种基本的数据操作（比如SELECT、INSERT、DELETE、UPDATE等）代码向导，双击其中的"SELECT Data Method"，可以看到屏幕弹出一个查询代码添加向导对话框，如图15。


图15：查询代码添加向导对话框

　　依照该向导顺序操作，

　　1） 选择要进行查询操作的数据库（ADDRBOOK.MDB），如图15；

　　2） 选择要在查询结果中显示的数据项（成员编号、名字、姓氏、角色等），如图16；


图16：选择要在查询结果中显示的数据项

　　3） 点击WHERE按钮，选择要查询的数据项和查询条件（姓氏），如图17；


图17：选择要查询的数据项和查询条件

　　4） 完成设置后点击Next按钮进入查询测试对话框，点击Test Query按钮进行查询测试，输入编号"赵"，可以看到姓赵的成员信息被显示出来，这说明测试成功，如图18；


图18：测试查询结果

　　5） 最后设置生成的查询方法的名称（缺省为MyQueryMethod）和返回类型（缺省为DataSet），如图19；


图19：设置生成的查询方法名称和返回类型

　　6） 完成设置后回到Code视图，可以看到WebMatrix自动生成的MyQueryMethod方法源代码，如图20。


图20：生成的查询方法源代码

　　接下来是最后一步，把查询按钮的点击事件与查询方法关联起来。

　　点击页面视图区底部的Design标签页 回到Design视图，双击前面添加到页面上的"查询"按钮，可以看到页面视图区由Design视图转到了Code视图，WebMatrix自动为"查询"按钮的Click事件创建了一个函数--void Button1_Click(object sender, EventArgs e)，函数体尚无内容。在函数体中添入两行代码：

DataGrid1.DataSource = MyQueryMethod( TextBox1.Text ); DataGrid1.DataBind();

　　整个开发过程就完成了，如图21所示。


图21：为查询按钮的点击事件添加关联代码

　　点击工具条上的运行按钮运行程序，可以看到运行效果，页面出现了文本框和查询按钮，在文本框中输入"赵"，点击"查询"按钮后，数据表中所有姓"赵"的成员的信息被查出并显示在了页面上，如图22。


图22：程序按姓氏进行条件查询的运行效果

　　如果觉得页面中DataGrid的显示效果难看的话，可以很方便进行调整修饰。

　　回到WebMatrix中的程序页面设计视图窗口，点击页面上的控件DataGrid1，可以看到WebMatrix右下区域的属性设置区中出现了对DataGrid的各种属性设置项，最简便的修饰外观的方法是点击该区域下部的"Auto Format…"链接，从弹出的自动格式设置对话框中选择一种喜欢的外观样式就可以了，如图23所示。


图23：DataGrid的外观设置

　　再次运行，可以看到界面显示效果已经自动进行了修饰，如图24所示。


图24：加入修饰效果后的数据查询程序页面运行效果

　　结束语

　　至此，相信你已经领会到了WebMatrix的强大功能了，回过头来想一想，真有点不敢相信这个东西居然只有2.8M。

　　WebMatrix在ASP.NET程序代码处理上与VS.NET的不同之处在于WebMatrix将程序的逻辑处理代码与页面静态代码放在一个文件中，而不像VS.NET那样做到了数据与显示的分离。因此，在程序员与网页美工的配合上会麻烦一点，但对于开发中小型系统来说，这并不是很大问题。

　　总而言之，WebMatrix是一款小巧灵活、功能强大的基于Web的ASP.NET应用系统开发工具，虽然相对VS.NET来说它还是一个非常轻量级的开发工具，但其自身相当有特点，很多功能并不逊于VS.NET，对于中小型的系统开发来说它是一个不错的选择，而且最重要的是－－它是免费的。