基于浏览器的应用程序



  介绍

  在这次实践练习中在这个手把手的实验里,你将使用一个Web form 一步一步的建立一个Hello World的Web应用程序。

  建立一个Hello World的Web应用程序

  1. 点击Start,点击Programs,点击Microsoft Visual Studio .NET 7.0,接着点击Microsoft Visual Studio .NET 7.0。起始页如图1所示。


       图1. Visual Studio .NET IDE的起始页

  2. 点击New Project. New Project 如图2所示。


         图 2. New Project 窗口


  3. 在Project Types 栏里,点击Visual Basic Projects,接着在 Templates pane,点击ASP .NET Web Application。不要修改Name(WebApplication1)和Location(http://)的缺省值。

  4. 点击OK. 一个标题为"WebForm1.aspx"的窗口出现如图3。


     图 3. 带有网格的空白Web form

  5. 选择View菜单,点击Toolbox (或者点击Toolbox图标).

  使用Toolbox 菜单建立你的Web form。Toolbox菜单显示了一列可在Web forms中使用的控件。

  6. 选择Toolbox 菜单,点击并且拖曳一个Label 到WebForm1.aspx的左上角。

  7. 选择Toolbox 菜单,点击并且拖曳一个TextBox 到第6步你所放置的label的右侧。

  8. 选择Toolbox 菜单,点击并且拖曳一个Button到第7步你所放置的TextBox的右侧。

  9. 选择Toolbox 菜单,点击并且拖曳另一个 TextBox 放在第一个text box的下面。你的web form看起来可能很象图4所示。


      图4. Web Form 设计网格和对象


  编辑一个Web Form

  你现在可以编辑你刚才在你的form(WebForm1.aspx)中增加的对象了。你将使用在页面的右下角的Properties编辑label和button的属性。你也将给这个button增加一个过程。

  1. 点击form上的Label。

  2. 在Properties里, 改变Text field 的值从"Label" 到"Enter Name:"。

  3. 点击form上的Button。

  4. 在Properties里, 改变Text field 的值从"Button" 到"OK"。

  5. 双击form中新建的标题为OK的button。WebForm1.aspx.vb 的源代码显示出来,里面包含两个过程: Page_Init 和 Button1_Click。在这个实验里,你将仅仅修改Button1_Click 过程。

  注意 不要编辑 Page_Init 过程,因为Web Form Designer使用它。

  6. 将以下的代码添加到Button1_Click 过程:

If TextBox1().Text <> "" Then
 TextBox2().Text = "Hello " & TextBox1().Text & "!"
End If

   当这段代码添加进去后,应用程序就可以运行了。

   注意 因为这只是Visual Studio .NET的Beta 2版,所以应用程序可能装载的时间比预期的长一点。这是因为有很多调试代码需要执行。

  7. 按F5。

   应用程序编译后将启动一个新的浏览器窗口如图五所示。


          图五. 用浏览器浏览Web form

  8. 在text box中,输入名字例如"John"。

  9. 单击OK。你编辑的Web form大概如图六所示。


           图六. Web form 的结果


  关闭

  按照以下步骤执行关闭应用程序:

  1. 单击File,接着Close,关闭 Internet Explorer。

  2. 单击File,接着Exit,关闭IDE。