基于ASP.NET的移动Web应用的开发研究

基于ＡＳＰ．ＮＥＴ的移动Ｗｅｂ应用的开发研究

作者：孙健美 顾明霞

来源：《电脑知识与技术》2009年第24期

摘要:在Visual Studio.NET2005 集成开发环境下,利用C#语言,研究了在移动设备(如手机)上,通过WAP浏览器,设计与实现信息查询操作,并研究如何使用VS.NET所带的仿真器,测试系统的性能和效果。

关键词:移动应用程序;仿真器;ASP.NET

中图分类号:TP391文献标识码:A文章编号:1009-3044(2009)24-6742-03

Research and Development of Mobile Web Application Based on ASP.NET SUN Jian-mei, GU Ming-xia

(Yancheng Teacher's College, Yancheng 224002, China)

Abstract: Under the VS.NET 2005 integrated development environment ,using C# language, study how to design and implement the operation of information query on the mobile devices (eg mobile phone) through WAP browser. And study how to use emulator of the VS.NET to test the performance and effectiveness of the system.

Key words: mobile application; emulator; ASP.NET

万维网上大多数网页都过于复杂,无法显示在目前的移动设备上。ASP.NET移动设计器扩展了Microsoft Visual Studio集成开发环境。ASP.NET能够自动调整应用程序的呈现形式,以适应不同的设备。本文以一个有简单用户验证,具有成绩和天气查询功能的移动Web应用开发为例,研究ASP.NET移动Web应用的开发技术。

1 移动Web的相关技术支持

龙源期刊网 http://www.qikan.com.cn

ASP.NET提供了一个专用于移动Web开发的System.Web.Mobile命名空间。可以从MobilePage基类中创建网页并从System.Web.Mobile命名空间中添加控件。开发遵循标准的.NET 事件驱动模型,让应用程序对用户请求、按钮单击等做出响应。 1.1 ASP.NET Web移动应用程序的结构

ASP.NET移动Web应用程序开发与传统的Web应用程序开发遵循同一模式,但许多移动设备的屏幕区域都比桌面监视器小,因此,专门为移动设备浏览器开发的页允许将呈现逻辑细分为较小的部分,从而可针对设备的显示区域和输入硬件更好地工作。 1.2 选择自定义适配器或移动控件

对于面向移动设备的页,必须使用移动Web服务器控件并创建继承MobilePage的页。此外,用于主要设备及其标记语言的移动控件设备适配器也已经存在。在主要标记语言不断发展的同时,Microsoft将继续为移动Web服务器控件提供适配器更新。

在普通的ASP.NET Web窗体页上,每页只能包含一个窗体。但是由于移动设备的屏幕通常较小,因此在一个移动Web窗体页上允许定义多个窗体控件。这样有几个好处: 1) 避免了大量的小页,从而可以控制Web站点的复杂性。

2) 可以像组织桌面Web应用程序那样来组织移动Web应用程序,因为可以处理与包含多个窗体的单个移动页。

3) 可以利用移动Web窗体所提供的页级功能,例如自动维护页状态(称为视图状态)以及适应能够在单个响应中接收多个屏幕的设备。

当客户端第一次访问某页时,默认情况下显示第一个窗体。可以通过设置移动页的ActiveForm属性以编程方式导航到其他窗体,也可以允许用户通过使用Link控件导航到窗体。 1.3 设备筛选器

要创建并使用设备特定的内容,必须首先为应用程序配置一组设备筛选器。ASP.NET页框架使用这些设备筛选器,为目标设备选择设备特定的内容。设备筛选器不一定是排他性的,一个设备可以匹配多个筛选器。要定义设备筛选器,需要在应用程序的web.config文件中创建节,并将元素添加到其中。

2 配置Pocket PC 2003 SE设备仿真器的网络设置

龙源期刊网 http://www.qikan.com.cn

设备仿真器可以给移动应用提供一个经济、方便的测试方式。下面介绍Pocket PC 2003 SE设备仿真器的配置方式。

1) 要求安装虚拟网卡驱动程序Virtural PC 2007。安装成功后便可以在本地网络连接属性对话框中看到虚拟网卡。

2) 要求在Visual Studio 2005中配置仿真器参数。在Visual Studio 2005选择:工具→选项→设备工具→设备,选择“Pocket PC 2003 SE仿真程序”,点击属性按钮,进入模拟器配置界面,在“传输”下拉框中选择“TCP连接传输”。最后点击仿真器选项按钮,进入“仿真程序属性”对话框,点选网络标签页,勾选标签页中的“启用NE2000 PCMCIA网络适配器并绑定到”选项,同时选择“Virtual Machine Network Services Driver”对应的下拉列表项。

3) 配置Pocket PC 2003 SE仿真器参数。在仿真器中选择:开始→设置→连接→网卡,进入网卡配置界面,点选“NE2000兼容Ethernet驱动程序”,对网卡的具体配置也如图1所示。192.168.0.1为局域网路由器IP地址,192.168.0.10为运行仿真器的PC的IP地址。

4) 在仿真器窗口中选择菜单:文件→配置,点选网络标签页,勾选标签页中的“启用NE2000 PCMCIA网络适配器并绑定到”选项。最后软启动一次仿真器。

3 基于ASP.NET的移动Web应用的具体实现

下面以一个带有简单用户验证,具有成绩和天气查询功能的移动Web应用开发为例,探讨ASP.NET的移动Web应用的开发技术。 3.1 用户登录窗体的实现

1) 用户登录窗体的功能及窗体设置

登录窗体的主要功能是提供给用户的登录,输入密码、验证码以后进行验证,如果验证成功就进入相应的页面继续操作,若验证失败,就提示相应的信息告知用户。

在VS.NET开发环境中新建普通站点后,删掉系统产生的Default.aspx网页,在解决方案资源管理器窗口中右单击项目名称,添加新项,选择移动Web窗体,名称为Default.aspx。生成的主页,自带一个Form控件。Form控件中添加一个Label控件,提示相应信息。两个TextBox控件,用来输入密码和验证码,一个RequiredFieldValidator控件,验证用户输入的密码密码是否等于初始给定的密码。一个Image控件,用来产生验证图片,一个Command控件,用来完成登录验证功能。

龙源期刊网 http://www.qikan.com.cn

2) 登录窗体的代码实现

本窗体中随机验证码由另外一个页面ValidateCode.aspx提供,语句ImageUrl=\"ValidateCode.aspx\"实现关联。

ValidateCode页面的主要方法。

protected void Page_Load(object sender, EventArgs e)

{string checkcode = GenerateCheckCode(4);//这里的数字4表显示的是4位验证字符串 Session[\"checkcode\"] = checkcode;// 用于页面之间的传值 CreateCheckCodeImage(checkcode); //生成随机数对应的图像 }

private string GenerateCheckCode(int VcodeNum)// 生成随机数函数 private void CreateCheckCodeImage(string checkcode)// 生成图像函数 登录窗体本身登录按钮的处理程序如下:

RequiredFieldValidator1.InitialValue = \"123456\"; //给定初始化密码 if (Page.IsValid) {string checkcode;

checkcode = Session[\"checkcode\"].ToString(); ViewState[\"checkcode\"] = checkcode;

if(this.TextBox8.Text == ViewState[\"checkcode\"].ToString() && TextBox3.Text == RequiredFieldValidator1.InitialValue)// 判断用户输入的密码和验证码是否正确 { this.ActiveForm = Form1;} Else

{Label25.Text = \"密码或验证码错误!\";}

龙源期刊网 http://www.qikan.com.cn

}

其运行界面如图2所示。 3.2 天气查询模块的实现 1) 查询窗体的功能及窗体设置

查询窗体主要功能是通过调用WebService方便用户查询当日的天气。

窗体使用两组SelectionList和Command控件分别用于获取省份城市和当日天气,使用多个Label和Image控件,用来显示气温、概况、风向、风力和天气图标等。 2) 查询窗体的核心代码如下所示:

com.ayandy.www.Service obj = new com.ayandy.www.Service();// 调用WebService if(!Page.IsPostBack)// 在页面首次加载时绑定省份城市及天气 {BindPro();BindCity();BindWeather();} protected void BindPro()// 获取省份 {string[] pro = obj.getSupportProvince(); for (int i = 1; i

{SelectionList4.Items.Add(new MobileListItem(pro[i].ToString(), pro[i].ToString()));}} // 获取城市

protected void BindWeather()// 获取天气

本页面也是移动Web开发特别要注意的是SelectionList控件没有自动回发功能,需要通过Command控件来回发,因此必须在Command控件中添加类似的代码。 窗体运行界面如图3所示。 3.3 成绩查询功能实现

在本应用,要求实现成绩查询。为此可以在SQL 2005 EXPRESS创建一个名为

Database.mdf的数据库。并在数据库中添加表GKFS,表中定义关于成绩的相关字段。此功能的实现需要两个窗体,一个窗体用来输入准考证号等,一个用来显示查询的成绩。

龙源期刊网 http://www.qikan.com.cn

成绩查询体现了移动Web数据库处理技术。核心代码如下: SqlConnection conn = new SqlConnection(); //新建数据库连接

conn.ConnectionString = @\"Data Source = .\\SQLEXPRESS; //连接到数据库 AttachDbFilename =C:\\Inetpub\\wwwroot\\WebSiteMobile\\App_Data\\成绩查询.mdf; Integrated Security=True;User Instance=True\"; conn.Open();//打开连接

SqlCommand selecmd = new SqlCommand();//建立命令对象

selecmd.CommandText = \"select * from GKFS where GKFS.zkzh='\" + mzkzh.Trim() + \"' and gkfs.sfzh='\" + msfzh.Trim() + \"'\"; //对数据库的查询 selecmd.Connection = conn;

SqlDataReader adatareader = selecmd.ExecuteReader();//生成SqlDataReader对象 if (! adatareader.HasRows) {this.List1.Items.Clear();

this.List1.Items.Add(\"没有找到匹配的纪录\");

this.List1.Items.Add(\"请确认身份证号与准考证号是否正确? \"); }

while (adatareader.Read()) {

this.List1.Items.Clear();

this.List1.Items.Add(\"查询结果如下: \");//在List控件中显示查询的结果 this.List1.Items.Add(\"准考证号: \" + adatareader[\"ZKZH\"]); ...… }

龙源期刊网 http://www.qikan.com.cn

移动Web应用中的数据库技术和普通Web应用相似。 4 小结

移动Web开发的需求越来越多,.NET平台下,移动Web开发和普通Web开发本质相同,但很多细节上有自己的特点。本文通过实例阐述了用ASP.NET开发移动Web 的一般方法和手段。

参考文献:

[1] 蒋培,王笑梅.ASP.NET Web程序设计[M].北京:清华大学出版社,2008.

[2] 颜友宁编著..NET Compact Framework 移动开发指南[M].北京:清华大学出版社,2006. [3] 李万宝.ASP.NET技术详解与应用实例[M].北京:机械工业出版社,2005. [4] 丛书编委会.ASP.NET与网站开发实践教程[M].北京:清华大学出版社,2005. [5] 李正希,胡方霞,陈发吉,等.ASP.NET案例开发[M].北京:中国水利水电出版社,2005. [6] 季久峰,梁建全,宋修舵,等.ASP.NET开发答疑200问[M].北京:人民邮电出版社,2004.