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.

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.

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.

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.

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

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"

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

Conclusion

In this demonstration you have created mobile pages and used controls and validation controls for mobile device. This experience will help you
to create further application development for mobile device in ASP.NET