Mobile Application Development in ASP.NET

Introduction

Mobile application development in ASP.NET is similar to traditional ASP.NET web application development. And it is very easy for ASP.NET developer to develop mobile application. All mobile web pages are inherit from MobilePage class which exists in System.Web.UI.MobileControls namespace.ASP.NET exposes a System.Web.Mobile namespace is for specifically to Web development.

Background

In this demonstration, you will create a mobile web page that dedicated to mobile device. The page will show a loan repament calculator and after passing valid parameter it will show repament amount of a pricipal amount with terms and rate.

Creating Web Application in ASP.NET

Click to open Microsoft Visual Studio 2008
On the File menu , choose New, and then choose Web Site.
The New Web Site dialog box appears.
Under Visual Studio installed templates, select ASP.NET Web Site.
Click Browse .
The Choose Location dialog box appears.
Location File System and LRC
Language Visual C#
Click OK button
A Default.aspx is added in your solution and it is traditional ASP.NET page which is inherited from System.Web.UI.Page. But you need to create page which inherit from MobilePage class in System.Web.UI.MobileControls namespace. In this demonstration, you will use controls from the System.Web.Mobile namespace that are specifically designed for devices that cannot display as much information as a desktop browser.

Creating Mobile Web Page in Application

Right-click the Default.aspx page in Solution Explorer and choose Delete.
Click OK in the dialog box.
Right-click the application in Solution Explorer and choose Add New Item
Choose Mobile Web Form under Visual Studio installed templates.

Figure 1

Dowanload(Download MobileWebFromTemplate.zip - 16.12 KB) mobile page template if you do not have mobile form template in Add New Item box and place tempalate according to instruction provided in readme file. After extrating MobileWebFromTemplate.rar file you will get two folder a 'Web Application' and another is 'Web Site'. Place RAR files in Web Application folder to '[My Documents]\Visual Studio 2008\Templates\ItemTemplates\Visual C#' and RAR files in Web Site folder to '[My Documents]\Visual Studio 2008\Templates\ItemTemplates\Visual Web Developer'. Now you will get Mobile Web Form template.

Name Loan_RepaymentCalculator.aspx
Choose Language Visual C#
Check Place code in separate file.
Click Add in the dialog box
Right click on Loan_RepaymentCalculator.aspx choose View Code define namespace for Loan_RepaymentCalculator class.

Collapse
namespace STL.Web.Mobile.UI
{
public partial class Loan_RepaymentCalculator : System.Web.UI.MobileControls.MobilePage
{
}
}
Set Inherits attribute value STL.Web.Mobile.UI.Loan_RepaymentCalculator in page directive of Loan_RepaymentCalculator's source file.

Collapse
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Loan_RepaymentCalculator.aspx.cs"
Inherits="STL.Web.Mobile.UI.Loan_RepaymentCalculator" %>

Design Mobile Web Page

In solution explorer double click on Loan_RepaymentCalculator.aspx to view source code and you will find mobile form form1 rename it as frmInput.From the Mobile Web Forms folder of the Toolbox, drag controls onto frmInput and set their properties as defined in the following.

1. Label control
a. ID = "lblHeading"
b. Runat = "Server"
c. EnableViewState = "False"
d. Wrapping = "Wrap"
e. StyleReference="StyleHeader"

2. Label control
a. ID = "lblPrincipal"
b. Runat = "Server"
c. EnableViewState = "False"
d. Text = "1. Amount"
e. StyleReference="StyleLabel"

3. TextBox control
a. ID = "PrincipalAmount"
b. Runat = "Server"
c. Numeric = "True"
d. MaxLength = "12"
e. Size = "10"
f. Title = "Principal Amount"
g. StyleReference="StyleTextBox"

4. RequiredFieldValidator control for validating principal amount that expect input from user.
a. ID = "rfvPrincipal"
b. Runat = "Server"
c. ControlToValidate ="PrincipalAmount"
d. ErrorMessage = "Amount Empty!"
e. StyleReference="StyleValidation"

5. RegularExpressionValidator control for validating principal amount that expect only numeric(fractional) value from user .
a. ID = "revPrincipal"
b. Runat = "Server"
c. ControlToValidate = "PrincipalAmount"
d. ErrorMessage = "Invalid Amount!"
e. ValidationExpression = "^([0-9]+)?\.?\d{1,2}"
f. StyleReference="StyleValidation"

6. Label control
a. ID = "lblTerm"
b. Runat = "Server"
c. EnableViewState = "False"
d. Text = "2. Term(Year)"
e. StyleReference="StyleLabel"

7. TextBox control
a. ID = "Term"
b. Runat = "Server"
c. Numeric = "True"
d. MaxLength = "6"
e. Size = "10"
f. Title = "Term"
g. StyleReference="StyleTextBox"

8.RequiredFieldValidator control for validating term that expect input from user.
a. ID = "rfvTerm"
b. Runat = "Server"
c. ControlToValidate ="Term"
d. ErrorMessage ="Term Empty!"
e. StyleReference="StyleValidation"

9. RegularExpressionValidator control for validating term that expect only numeric(not fractional) value from user .
a. ID = "revTerm"
b. Runat = "Server"
c. ControlToValidate = "Term"
d. ErrorMessage = "Invalid Amount!"
e. ValidationExpression = "^[1-9]([0-9]+)?"
f. StyleReference="StyleValidation"

10. Label control
a. ID = "lblRate"
b. Runat = "Server"
c. EnableViewState = "False"
d. Text = "3. Rate(%)"
e. StyleReference="StyleLabel"

11. TextBox control
a. ID = "Rate"
b. Runat = "Server"
c. Numeric = "True"
d. MaxLength = "5"
e. Size = "10"
f. Title = "Rate"
g. StyleReference="StyleTextBox"

12. RequiredFieldValidator control for validating rate that expect input from user.
a. ID = "rfvRate"
b. Runat = "Server"
c. ControlToValidate ="Rate"
d. ErrorMessage ="Rate Empty!"
e. StyleReference="StyleValidation"

13. RangeValidatorcontrol for validating rate that expect only numeric value between 1 to 100 from user.
a. ID = "rvRate"
b. Runat = "Server"
c. Type="Double"
d. ControlToValidate = "Rate"
e. ErrorMessage = "Invalid Rate!"
f. MinimumValue="0"
g. MaximumValue="100"
h. StyleReference="StyleValidation"

14. Command control
a. ID = "cmdRepayment"
b. Runat = "Server"
e. Text = "Repayment"
f. OnClick="cmdRepayment_Click"

The Command control provides a way to invoke ASP.NET event handlers from UI elements, thus posting user input from UI elements back to the server. The command is for calculate repayment. Event OnClick of cmdRepayment is bind with cmdPayment_Click event procedure, it will disscus later in this demonestration.

The Form mobile control enables you to break up complex pages into a collection of forms on a mobile Web page. With this ability, you can minimize the effort required to port Web-based applications to mobile devices.

ASP.NET mobile web page can contain more than one form control and mobile application displays only one form at a time. And a form control cannot be a inner element of another form control.

Add second form control into Loan_RepaymentCalculator.aspx page after frmInput from the Mobile Web Forms folder of the Toolbox, and define form control ID is frmResult

Now from the Mobile Web Forms folder of the Toolbox, drag controls onto frmResult and set their properties as defined in the following.


1. Label control
a. ID = "lblHeadingResult"
b. Runat = "Server"
c. EnableViewState = "False"
d. Wrapping = "Wrap"
e. StyleReference="StyleHeader"

2. TextView control to display result
a. ID = "tvLoanDetails"
b. Runat = "Server"
c. EnableViewState = "False"
d. StyleReference="StyleLabelResult"

3. Command control it is a navigation button to go previous form control
a. ID = "cmdBack"
b. Runat = "Server"
e. Text = "Back"
f. OnClick="cmdBack_Click"

Event OnClick of the cmdBack command button bind with cmdBack_Click event procedure will discuss later in this demonstration.

Add last form control into Loan_RepaymentCalculator.aspx page after frmResult from the Mobile Web Forms folder of the Toolbox, and define form control ID is frmError. If runtime error occurs application will show this error form.

Now from the Mobile Web Forms folder of the Toolbox, drag controls onto frmError and set their properties as defined in the following.

1. Label control
a. ID = "lblHeadingError"
b. Runat = "Server"
c. EnableViewState = "False"
d. Wrapping = "Wrap"
e. StyleReference="StyleHeader"

2. TextView control to display error
a. ID = "tvError"
b. Runat = "Server"
c. EnableViewState = "False"
d. Text ="Sorry For Inconvenience!"
e. StyleReference="StyleError"

3. Command control it is a navigation button to go previous form control
a. ID = "cmdHome"
b. Runat = "Server"
e. Text = "Home"
f. OnClick="cmdBack_Click"

Event OnClick of the cmdBack command button bind with cmdBack_Click event procedure will disscuss later in this demonstration.

StyleSheet

StyleSheet can be internal or external in mobile ASP.NET application. External stylesheet is for entire application while internal stylesheet only for page specific. The stylesheet control is need to implement style in application. Stylesheet control can contain any number of style elements, or elements that inherits from the style element. Each style element must have a unique name property. You can use the Name property to refer to each Style element in the StyleSheet control from other controls on the same MobilePage object.

To create the external style sheet, you create a user control, in an .ascx file, and place a single style-sheet control with a set of styles in it. Then, to refer to this file, you place a style-sheet control on the page and set its ReferencePath property to the relative URL of the user control.

Now add a StyleSheet folder in LRC Application. To do this follow the below steps:
1. Right Click on LRC application
2. Choose New Folder
3. Rename it StyleSheet

Add Mobile Web User Control in StyleSheet folder. Follow the below steps:

1. Right Click on StyleSheet folder in LRC application
2. Choose Add New Item

Add New Item dialogbox appear as below,


Figure 2

3. Name LRC_StyleSheet.ascx
4. Labguage Visual C#
5. Click Add in the dialog box.

set STL.Web.Mobile.UI namespace for LRC_StyleSheet class in LRC_StyleSheet.ascx.cs file and Set
Inherit="STL.Web.Mobile.UI.LRC_StyleSheet" in control directive of LRC_StyleSheet's source file.

To define style sheet you need to add a StyleSheet control on the page from Toolbox under Mobile Web Forms Folder. And define styles as bellow:

Collapse

Name="StyleForm" Font-Size="Small">

Name="StyleHeader" ForeColor="#999966" Font-Size="Small" Font-Bold="True">

Name="StyleLabel" ForeColor="#cc3399" Font-Size="Small" Font-Bold="False">

Name="StyleTextBox" ForeColor="#cc3399" Font-Size="Small" Font-Bold="False">

Name="StyleValidation" ForeColor="Red" Font-Size="Small" Font-Bold="False">

Name="StyleLabelResult" ForeColor="#cc0066" Font-Size="Small" Font-Bold="False">

Name="StyleError" ForeColor="Red" Font-Size="Small">


To add style reference from this external StyleSheet into Loan_RepaymentCalculator.aspx, Just go to the source of this page and add a StyleSheet control from the
Toolbox under Mobile Web Froms add set ReferencePath="~/StyleSheet/LRC_StyleSheet.ascx"

Collapse


Now you can a add StyleReference in elements of a mobile web page.

Collapse



Class

Add a class under STL.Web.Mobile.UI namespace in LRC Application for UI constants

Steps:
1. Right Click on the App_Code folder
2. Choose Add New Item
3. Choose Class
4. Name UIConstant.cs
5. Click Add in the dialog box.

Figure 3

Add constants in UIConstant.cs files
Collapse

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";
}
}

Events

Add Microsoft.VisualBasic.dll reference in application to calculate monthly payment using Financial.Pmt method.

Steps:
1. Right Click on the LRC Application
2. Choose Add Reference
3. Choose Microsoft.VisualBasic
4. Click Add in the dialog box.

Figure 4

Using Microsoft.VisualBasic namespace in Loan_RepaymentCalculator.aspx.cs file

Collapse
using Microsoft.VisualBasic;
OnClick event of cmdRepayment command in frmInput form is as bellow

Collapse

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;
}
}

OnClick event of cmdBack command in frmInput form is as bellow

Collapse
protected void cmdBack_Click(object sender, EventArgs e)
{
//To back to input form
this.ActiveForm = this.frmInput;
}

Initialize user method to initialize elements in the mobile web page

Collapse

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 event of the page

Collapse
protected void Page_Load(object sender, EventArgs e)
{
Initialize();
}
Application Level Errors

To handle application level error you need to add a error page. To add page

Steps:
1. Right click on the LRC application
2. Choose Add New Item
3. Name ErrorPage.aspx
4. Click Add in the dialog

Set Inherits="STL.Web.Mobile.UI.ErrorPage" in page directive of ErrorPage.aspx. And define STL.Web.Mobile.UI namespace for
ErrorPage

Collapse
namespace STL.Web.Mobile.UI
{
public partial class ErrorPage : System.Web.UI.MobileControls.MobilePage
{
}
}
Add a StyleSheet control in the page and set ReferencePath="~/StyleSheet/LRC_StyleSheet.ascx"

Add a form control in the ErrorPage and set ID="frmError"

Add control in frmError that is defined as following:

1. Label control
a. ID = "lblHeadingError"
b. Runat = "Server"
c. EnableViewState = "False"
d. Wrapping = "Wrap"
e. StyleReference="StyleHeader"

2. TextView control to display error
a. ID = "tvError"
b. Runat = "Server"
c. EnableViewState = "False"
d. Text ="Sorry For Inconvenience!"
e. StyleReference="StyleError"

3. Command control it is a navigation button to go previous form control
a. ID = "cmdHome"
b. Runat = "Server"
e. Text = "Home"
f. OnClick="cmdBack_Click"

Code of the ErrorPage file is as follows:

Collapse
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

You nedd to change configuration in Web.config file to redirect to Error Page when application level error is occured.
set mode="on" and defaultRedirect="~/ErrorPage.aspx" in customErros element under System.Web element.

Test Application

To test the application you can use Microsoft Mobile Explorer 3.0 . If not avilable Microsoft Mobile Explorer 3.0 you can use your desktop browser or free download it from net. Install Microsoft Mobile Explorer 3.0 in your system.

To browse with Microsoft Mobile Explorer 3.0 you need to do as follows:
1. Right click on Loan_RepaymentCalculator.aspx file
2. Choose Browse With
( If Microsoft Mobile Explorer 3.0 is not avilable in Browsers list of Browse With dialog, you need add it)
3. Click Add
4. Browse your location where you installed Microsoft Mobile Explorer 3.0 (mmeemu.exe)
5. Select Microsoft Mobile Explorer
6. Click Set as Default in the dialog box.
Figure 5



Press F5 to run the application. Microsoft Mobile Explorer Emulator will appear. Click ASP.NET Development Server icon in the system tray to get application URL name
and its port. It may be different in your system.

Figure 6



In the Microsoft Mobile Explorer Emulator type URL as http://localhost:1439/LRC/Loan_RepaymentCalculator.aspx


Figure 7



Enter Amount, Term & Rate. Click on Repayment button in the screen. You will get result like bellow,


Figure 8

Tools

For testing application in Mobile Emulator
http://devhood.com/tools/tool_details.aspx?tool_id=52
http://www.codeproject.com/KB/aspnet/Loan_RepaymentCalculator.aspx