ASP.NET 移动应用程序开发
4.93/5 (36投票s)
ASP.NET 提供了开发移动设备应用程序的功能。System.Web.Mobile 命名空间专门用于移动 Web 开发。
引言
在 ASP.NET 中进行移动应用程序开发与传统的 ASP.NET Web 应用程序开发类似。对于 ASP.NET 开发人员来说，开发移动应用程序非常容易。所有移动 Web 页面都继承自 MobilePage 类，该类位于 System.Web.UI.MobileControls 命名空间中。ASP.NET 公开了 System.Web.Mobile 命名空间，专门用于 Web 开发。
背景
在本演示中，您将创建一个专用于移动设备的移动 Web 页面。该页面将显示一个贷款还款计算器，在通过有效参数后，它将显示本金金额在给定期限和利率下的还款金额。
在 ASP.NET 中创建 Web 应用程序
- 点击打开 Microsoft Visual Studio 2008
- 在 **文件** 菜单上，选择 **新建**，然后选择 **Web 网站**。
此时将出现“新建 Web 网站”对话框。 - 在“Visual Studio 已安装的模板”下，选择“ASP.NET Web 网站”。
- 点击 **浏览**。
此时将出现“选择位置”对话框。 - 位置 **文件系统** 和 **LRC**
- 语言 **Visual C#**
- 点击 **确定** 按钮
一个 Default.aspx 文件将被添加到您的解决方案中，这是一个继承自 System.Web.UI.Page 的传统 ASP.NET 页面。但您需要创建继承自 System.Web.UI.MobileControls 命名空间中的 MobilePage 类的页面。在本演示中，您将使用 System.Web.Mobile 命名空间中的控件，这些控件专为信息显示能力不如桌面浏览器设备而设计。
在应用程序中创建移动 Web 页面
- 在“解决方案资源管理器”中右键单击 Default.aspx 页面，然后选择 **删除**。
- 在对话框中点击 **确定**。
- 在“解决方案资源管理器”中右键单击应用程序，然后选择 **添加新项**
- 在“Visual Studio 已安装的模板”下选择 **移动 Web 窗体**。
- 名称 **Loan_RepaymentCalculator.aspx**
- 选择语言 **Visual C#**
- 勾选“将代码放在单独的文件中”。
- 在对话框中点击 **添加**
图 1
如果您在“添加新项”框中没有移动窗体模板，请下载 (下载 MobileWebFromTemplate.zip - 16.12 KB) 移动页面模板，并按照自述文件中的说明放置模板。解压缩 MobileWebFromTemplate.rar 文件后，您将得到两个文件夹：“Web 应用程序”和“Web 网站”。将“Web 应用程序”文件夹中的 RAR 文件放置到“[我的文档]\Visual Studio 2008\Templates\ItemTemplates\Visual C#”中，将“Web 网站”文件夹中的 RAR 文件放置到“[我的文档]\Visual Studio 2008\Templates\ItemTemplates\Visual Web Developer”中。现在您将看到移动 Web 窗体模板。
右键单击 **Loan_RepaymentCalculator.aspx**，选择“查看代码”，为 Loan_RepaymentCalculator 类定义命名空间。
namespace STL.Web.Mobile.UI
{
public partial class Loan_RepaymentCalculator : System.Web.UI.MobileControls.MobilePage
{
}
}
在 **Loan_RepaymentCalculator** 源文件的页面指令中，将 Inherits 属性值设置为 STL.Web.Mobile.UI.Loan_RepaymentCalculator。
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Loan_RepaymentCalculator.aspx.cs"
Inherits="STL.Web.Mobile.UI.Loan_RepaymentCalculator" %>
设计移动 Web 页面
在“解决方案资源管理器”中双击 **Loan_RepaymentCalculator.aspx** 查看源文件，您会找到名为 form1 的移动窗体，将其重命名为 frmInput。将工具箱中“移动 Web 窗体”文件夹下的控件拖放到 frmInput 上，并按以下方式设置它们的属性。
1. Label 控件
a. ID = "lblHeading"
b. Runat = "Server"
c. EnableViewState = "False"
d. Wrapping = "Wrap"
e. StyleReference="StyleHeader"
2. Label 控件
a. ID = "lblPrincipal"
b. Runat = "Server"
c. EnableViewState = "False"
d. Text = "1. 金额"
e. StyleReference="StyleLabel"
3. TextBox 控件
a. ID = "PrincipalAmount"
b. Runat = "Server"
c. Numeric = "True"
d. MaxLength = "12"
e. Size = "10"
f. Title = "本金金额"
g. StyleReference="StyleTextBox"
4. RequiredFieldValidator 控件，用于验证主叫方输入了本金金额。
a. ID = "rfvPrincipal"
b. Runat = "Server"
c. ControlToValidate ="PrincipalAmount"
d. ErrorMessage = "金额为空！"
e. StyleReference="StyleValidation"
5. RegularExpressionValidator 控件，用于验证主叫方输入的本金金额是否为纯数字（小数）。
a. ID = "revPrincipal"
b. Runat = "Server"
c. ControlToValidate = "PrincipalAmount"
d. ErrorMessage = "金额无效！"
e. ValidationExpression = "^([0-9]+)?\.?\d{1,2}"
f. StyleReference="StyleValidation"
6. Label 控件
a. ID = "lblTerm"
b. Runat = "Server"
c. EnableViewState = "False"
d. Text = "2. 期限(年)"
e. StyleReference="StyleLabel"
7. TextBox 控件
a. ID = "Term"
b. Runat = "Server"
c. Numeric = "True"
d. MaxLength = "6"
e. Size = "10"
f. Title = "期限"
g. StyleReference="StyleTextBox"
8.RequiredFieldValidator 控件，用于验证主叫方是否输入了期限。
a. ID = "rfvTerm"
b. Runat = "Server"
c. ControlToValidate ="Term"
d. ErrorMessage ="期限为空！"
e. StyleReference="StyleValidation"
9. RegularExpressionValidator 控件，用于验证主叫方输入的期限是否为纯数字（非小数）。
a. ID = "revTerm"
b. Runat = "Server"
c. ControlToValidate = "Term"
d. ErrorMessage = "金额无效！"
e. ValidationExpression = "^[1-9]([0-9]+)?"
f. StyleReference="StyleValidation"
10. Label 控件
a. ID = "lblRate"
b. Runat = "Server"
c. EnableViewState = "False"
d. Text = "3. 利率(%)"
e. StyleReference="StyleLabel"
11. TextBox 控件
a. ID = "Rate"
b. Runat = "Server"
c. Numeric = "True"
d. MaxLength = "5"
e. Size = "10"
f. Title = "利率"
g. StyleReference="StyleTextBox"
12. RequiredFieldValidator 控件，用于验证主叫方是否输入了利率。
a. ID = "rfvRate"
b. Runat = "Server"
c. ControlToValidate ="Rate"
d. ErrorMessage ="利率为空！"
e. StyleReference="StyleValidation"
13. RangeValidator 控件，用于验证主叫方输入的利率是否在 1 到 100 之间。
a. ID = "rvRate"
b. Runat = "Server"
c. Type="Double"
d. ControlToValidate = "Rate"
e. ErrorMessage = "利率无效！"
f. MinimumValue="0"
g. MaximumValue="100"
h. StyleReference="StyleValidation"
14. Command 控件
a. ID = "cmdRepayment"
b. Runat = "Server"
e. Text = "还款"
f. OnClick="cmdRepayment_Click"
Command 控件提供了一种从 UI 元素调用 ASP.NET 事件处理程序的方法，从而将用户输入的 UI 元素数据回传到服务器。该命令用于计算还款。cmdRepayment 的 OnClick 事件绑定到 cmdPayment_Click 事件过程，稍后将在本次演示中讨论。
Form 移动控件使您能够将复杂页面分解为移动 Web 页面上的窗体集合。通过此功能，您可以最大限度地减少将 Web 应用程序移植到移动设备所需的精力。
ASP.NET 移动 Web 页面可以包含多个窗体控件，移动应用程序一次只能显示一个窗体。窗体控件不能是另一个窗体控件的内部元素。
在 **Loan_RepaymentCalculator.aspx** 页面中，在 frmInput 之后，从工具箱的“移动 Web 窗体”文件夹中添加第二个窗体控件，并将窗体控件 ID 定义为 frmResult
现在，从工具箱的“移动 Web 窗体”文件夹中，将控件拖放到 frmResult 上，并按以下方式设置它们的属性。
1. Label 控件
a. ID = "lblHeadingResult"
b. Runat = "Server"
c. EnableViewState = "False"
d. Wrapping = "Wrap"
e. StyleReference="StyleHeader"
2. TextView 控件，用于显示结果
a. ID = "tvLoanDetails"
b. Runat = "Server"
c. EnableViewState = "False"
d. StyleReference="StyleLabelResult"
3. Command 控件，这是一个导航按钮，用于返回上一个窗体控件
a. ID = "cmdBack"
b. Runat = "Server"
e. Text = "返回"
f. OnClick="cmdBack_Click"
cmdBack 命令按钮的 OnClick 事件绑定到 cmdBack_Click 事件过程，稍后将在本次演示中讨论。
在 frmResult 之后，从工具箱的“移动 Web 窗体”文件夹中添加最后一个窗体控件到 **Loan_RepaymentCalculator.aspx** 页面，并将窗体控件 ID 定义为 frmError。如果发生运行时错误，应用程序将显示此错误窗体。
现在，从工具箱的“移动 Web 窗体”文件夹中，将控件拖放到 frmError 上，并按以下方式设置它们的属性。
1. Label 控件
a. ID = "lblHeadingError"
b. Runat = "Server"
c. EnableViewState = "False"
d. Wrapping = "Wrap"
e. StyleReference="StyleHeader"
2. TextView 控件，用于显示错误
a. ID = "tvError"
b. Runat = "Server"
c. EnableViewState = "False"
d. Text ="抱歉给您带来不便！"
e. StyleReference="StyleError"
3. Command 控件，这是一个导航按钮，用于返回上一个窗体控件
a. ID = "cmdHome"
b. Runat = "Server"
e. Text = "主页"
f. OnClick="cmdBack_Click"
cmdBack 命令按钮的 OnClick 事件绑定到 cmdBack_Click 事件过程，稍后将在本次演示中讨论。
样式表
在移动 ASP.NET 应用程序中，**样式表**可以是内部的或外部的。外部样式表用于整个应用程序，而内部样式表仅用于页面特定。需要样式表控件来实现应用程序中的样式。样式表控件可以包含任意数量的样式元素，或继承自样式元素的元素。每个样式元素都必须具有唯一的 **name** 属性。您可以使用 Name 属性在同一 **MobilePage** 对象上的其他控件中引用 **StyleSheet** 控件中的每个 **Style** 元素。
要创建外部样式表，您需要创建一个用户控件（.ascx 文件），并在其中放置一个包含一组样式的样式表控件。然后，为了引用此文件，您需要在页面上放置一个样式表控件，并将其 ReferencePath 属性设置为用户控件的相对 URL。
现在，在 LRC 应用程序中添加一个 StyleSheet 文件夹。请按照以下步骤操作
1. 右键单击 LRC 应用程序
2. 选择“新建文件夹”
3. 将其重命名为 **StyleSheet**
在 StyleSheet 文件夹中添加移动 Web 用户控件。请按照以下步骤操作
1. 在 LRC 应用程序中右键单击 StyleSheet 文件夹
2. 选择 **添加新项**
此时将出现“添加新项”对话框，如下所示：
图 2
3. 名称 **LRC_StyleSheet.ascx**
4. 语言 **Visual C#**
5. 在对话框中点击 **添加**。
在 LRC_StyleSheet.ascx.cs 文件中为 LRC_StyleSheet 类设置 STL.Web.Mobile.UI 命名空间，并在 LRC_StyleSheet 源文件的控件指令中设置
Inherit="STL.Web.Mobile.UI.LRC_StyleSheet"。
要定义样式表，您需要从工具箱的“移动 Web 窗体”文件夹中将一个 StyleSheet 控件添加到页面上。并按以下方式定义样式
<mobile:StyleSheet ID="StyleSheet1" runat="server">
要从此外部样式表添加样式引用到 **Loan_RepaymentCalculator.aspx**，只需转到该页面的源代码，从
工具箱的“移动 Web 窗体”文件夹中添加一个 StyleSheet 控件，并设置 ReferencePath="~/StyleSheet/LRC_StyleSheet.ascx"
<mobile:StyleSheet ID="StyleSheet1" runat="server" ReferencePath="~/StyleSheet/LRC_StyleSheet.ascx">
现在，您可以为移动 Web 页面中的元素添加 StyleReference。
<mobile:Label ID="lblHeading" runat="server" EnableViewState="False" StyleReference="StyleHeader" Wrapping="Wrap">
类
在 LRC 应用程序的 STL.Web.Mobile.UI 命名空间下添加一个用于 UI 常量的类
步骤
1. 右键单击 App_Code 文件夹
2. 选择 **添加新项**
3. 选择 **类**
4. 名称 **UIConstant.cs**
5. 在对话框中点击 **添加**。
图 3
在 UIConstant.cs 文件中添加常量
namespace STL.Web.Mobile.UI
{
public class UIConstant
{
private UIConstant()
{
}
public const String TITLE_BAR="Loan Payment Calculator";
public const String PAGE_TITLE = "Loan Payment Calculator";
}
}
事件
向应用程序添加 Microsoft.VisualBasic.dll 引用，以便使用 Financial.Pmt 方法计算月付款。
步骤
1. 右键单击 LRC 应用程序
2. 选择 **添加引用**
3. 选择 **Microsoft.VisualBasic**
4. 在对话框中点击 **添加**。
图 4
在 Loan_RepaymentCalculator.aspx.cs 文件中使用 Microsoft.VisualBasic 命名空间
using Microsoft.VisualBasic;
frmInput 窗体中 cmdRepayment 命令的 OnClick 事件如下所示：
protected void cmdRepayment_Click(object sender, EventArgs e)
{
if (!Page.IsValid) return;
try
{
Double dblPrincipal = double.Parse(this.PrincipalAmount.Text);
Double dblApr = double.Parse(this.Rate.Text);
Double dblMonthlyInterest = (Double)(dblApr / (12 * 100));
Int64 intTermInMonths = Int64.Parse(this.Term.Text) * 12;
Double dblMonthlyPayment;
//Calculate monthly payment
dblMonthlyPayment = Microsoft.VisualBasic.Financial.Pmt(dblMonthlyInterest, intTermInMonths, -dblPrincipal, 0, Microsoft.VisualBasic.DueDate.BegOfPeriod);
this.ActiveForm = this.frmResult;
StringBuilder sbDetailsSpec = new StringBuilder("");
sbDetailsSpec.Append(String.Format("{0} @ {1}% for {2} years
Payment: ", dblPrincipal.ToString ("C0"), dblApr.ToString(), this.Term.Text));
sbDetailsSpec.Append("" + dblMonthlyPayment.ToString("C") + "");
this.tvLoanDetails.Text = sbDetailsSpec.ToString();
}
catch
{
//If runtime error occurs then go to error form.
this.ActiveForm = frmError;
}
}
frmInput 窗体中 cmdBack 命令的 OnClick 事件如下所示：
protected void cmdBack_Click(object sender, EventArgs e)
{
//To back to input form
this.ActiveForm = this.frmInput;
}
初始化用户方法，用于初始化移动 Web 页面中的元素
private void Initialize()
{
this.frmInput.Title = UIConstant.TITLE_BAR;
this.frmResult.Title = UIConstant.TITLE_BAR;
this.frmError.Title = UIConstant.TITLE_BAR;
this.lblHeading.Text = UIConstant.PAGE_TITLE;
this.lblHeadingResult.Text = UIConstant.PAGE_TITLE;
this.lblHeadingError.Text = UIConstant.PAGE_TITLE;
}
页面的 **Load** 事件 protected void Page_Load(object sender, EventArgs e)
{
Initialize();
}
应用程序级别错误
要处理应用程序级别错误，您需要添加一个错误页面。添加页面
步骤
1. 右键单击 LRC 应用程序
2. 选择 **添加新项**
3. 名称 **ErrorPage.aspx**
4. 在对话框中点击 **添加**
在 ErrorPage.aspx 的页面指令中设置 Inherits="STL.Web.Mobile.UI.ErrorPage"，并为
ErrorPage
namespace STL.Web.Mobile.UI
{
public partial class ErrorPage : System.Web.UI.MobileControls.MobilePage
{
}
}
在页面中添加一个 StyleSheet 控件，并设置 ReferencePath="~/StyleSheet/LRC_StyleSheet.ascx"
在 ErrorPage 中添加一个 form 控件，并设置 ID="frmError"
在 frmError 中添加如下定义的控件
1. Label 控件
a. ID = "lblHeadingError"
b. Runat = "Server"
c. EnableViewState = "False"
d. Wrapping = "Wrap"
e. StyleReference="StyleHeader"
2. TextView 控件，用于显示错误
a. ID = "tvError"
b. Runat = "Server"
c. EnableViewState = "False"
d. Text ="抱歉给您带来不便！"
e. StyleReference="StyleError"
3. Command 控件，这是一个导航按钮，用于返回上一个窗体控件
a. ID = "cmdHome"
b. Runat = "Server"
e. Text = "主页"
f. OnClick="cmdBack_Click"
ErrorPage 文件的代码如下：
public partial class ErrorPage : System.Web.UI.MobileControls.MobilePage
{
#region Event
protected void Page_Load(object sender, EventArgs e)
{
Intitalize();
}
protected void cmdHome_Click(object sender, EventArgs e)
{
//To redirect to Loan_RepaymentCalculator page
Response.Redirect("~/Loan_RepaymentCalculator.aspx");
}
#endregion Event
#region Method
private void Intitalize()
{
this.frmError.Title = UIConstant.TITLE_BAR;
this.lblHeadingError.Text = UIConstant.PAGE_TITLE;
}
#endregion Method
}
Web.config
您需要在 Web.config 文件中更改配置，以便在发生应用程序级别错误时重定向到错误页面。
在 System.Web 元素下的 customErros 元素中设置 mode="on" 和 defaultRedirect="~/ErrorPage.aspx"。
测试应用程序
要测试该应用程序，您可以使用 Microsoft Mobile Explorer 3.0。如果 Microsoft Mobile Explorer 3.0 不可用，您可以使用桌面浏览器或免费下载
它。安装 Microsoft Mobile Explorer 3.0 在您的系统中。
使用 Microsoft Mobile Explorer 3.0 浏览需要执行以下操作：
1. 右键单击 Loan_RepaymentCalculator.aspx 文件
2. 选择 **浏览方式**
(如果 Microsoft Mobile Explorer 3.0 在“浏览方式”对话框的浏览器列表中不可用，您需要添加它)
3. 点击 **添加**
4. 浏览到您安装 Microsoft Mobile Explorer 3.0 (mmeemu.exe) 的位置
5. 选择 **Microsoft Mobile Explorer**
6. 在对话框中点击 **设为默认值**。
图 5
按 F5 运行应用程序。Microsoft Mobile Explorer 模拟器将出现。单击系统托盘中的 ASP.NET Development Server 图标以获取应用程序 URL 名称
及其端口。在您的系统中可能有所不同。
图 6
在 Microsoft Mobile Explorer 模拟器中，输入 URL：https://:1439/LRC/Loan_RepaymentCalculator.aspx
图 7
输入 **金额、期限和利率**。单击屏幕上的“还款”按钮。您将看到如下结果：
图 8
工具
在移动模拟器中测试应用程序
http://devhood.com/tools/tool_details.aspx?tool_id=52
结论
在本演示中，您创建了移动页面，并为移动设备使用了控件和验证控件。这些经验将帮助您
在 ASP.NET 中为移动设备进行进一步的应用程序开发。