Click here to Skip to main content
15,860,859 members
Articles / Web Development / IIS
Article

Mobile Application Development in ASP.NET

Rate me:
Please Sign up or sign in to vote.
4.93/5 (40 votes)
9 Apr 2010CPOL11 min read 288.1K   21.1K   62   49
ASP.NET provide features to develop appllication for mobile devices. System.Web.Mobile namespace is devoted specifically to mobile Web development.

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

  1. Click to open Microsoft Visual Studio 2008
  2. On the File menu , choose New, and then choose Web Site.
    The New Web Site dialog box appears.
  3. Under Visual Studio installed templates, select ASP.NET Web Site.
  4. Click Browse .
    The Choose Location dialog box appears.
  5. Location File System and LRC
  6. Language Visual C#
  7. 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

  1. Right-click the Default.aspx page in Solution Explorer and choose Delete.
  2. Click OK in the dialog box.
  3. Right-click the application in Solution Explorer and choose Add New Item
  4. Choose Mobile Web Form under Visual Studio installed templates.
  5. LRC1.GIF
    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.

  6. Name Loan_RepaymentCalculator.aspx
  7. Choose Language Visual C#
  8. Check Place code in separate file.
  9. Click Add in the dialog box

Right click on Loan_RepaymentCalculator.aspx choose View Code define namespace for Loan_RepaymentCalculator class.

C#
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.

XML
<%@ 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,

LRC1.GIF
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:

XML
<mobile:StyleSheet ID="StyleSheet1"  runat="server">
    <mobile:Style Name="StyleForm" Font-Size="Small">
    </mobile:Style>
    <mobile:Style Name="StyleHeader" ForeColor="#999966" Font-Size="Small" Font-Bold="True">
    </mobile:Style>
    <mobile:Style Name="StyleLabel" ForeColor="#cc3399" Font-Size="Small" Font-Bold="False">
    </mobile:Style>
    <mobile:Style Name="StyleTextBox" ForeColor="#cc3399" Font-Size="Small" Font-Bold="False">
    </mobile:Style>
    <mobile:Style Name="StyleValidation" ForeColor="Red" Font-Size="Small" Font-Bold="False">
    </mobile:Style>
    <mobile:Style Name="StyleLabelResult" ForeColor="#cc0066" Font-Size="Small" Font-Bold="False">
    </mobile:Style>
    <mobile:Style Name="StyleError" ForeColor="Red" Font-Size="Small">
    </mobile:Style>
</mobile: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"

XML
<mobile:StyleSheet ID="StyleSheet1"  runat="server" ReferencePath="~/StyleSheet/LRC_StyleSheet.ascx">
</mobile:StyleSheet>

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

XML
<mobile:Label ID="lblHeading"  runat="server" EnableViewState="False" StyleReference="StyleHeader" Wrapping="Wrap">
</mobile:Label>

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.

LRC3.GIF
Figure 3

Add constants in UIConstant.cs files

C#
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.

LRC4.GIF
Figure 4

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

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

C#
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 <br /> 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

C#
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

C#
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

C#
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

C#
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:

C#
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.

LRC5.GIF

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.
LRC6.GIF

Figure 6



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

LRC7.GIF

Figure 7



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

LRC8.GIF
Figure 8

Tools

For testing application in Mobile Emulator
http://devhood.com/tools/tool_details.aspx?tool_id=52

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

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Team Leader
Bangladesh Bangladesh
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
GeneralRe: Mobile Controls in Visual Studio 2008 Pin
Abdul Quader Mamun9-Nov-10 6:20
Abdul Quader Mamun9-Nov-10 6:20 
GeneralComments Pin
Md. Marufuzzaman13-Apr-10 2:04
professionalMd. Marufuzzaman13-Apr-10 2:04 
GeneralMy vote of 1 Pin
g0got29-Apr-10 15:36
g0got29-Apr-10 15:36 
GeneralRe: My vote of 1 Pin
Md. Marufuzzaman13-Apr-10 2:11
professionalMd. Marufuzzaman13-Apr-10 2:11 
GeneralRe: My vote of 1 Pin
saini arun13-Apr-10 19:40
saini arun13-Apr-10 19:40 
GeneralRe: My vote of 1 Pin
Abdul Quader Mamun9-Nov-10 6:14
Abdul Quader Mamun9-Nov-10 6:14 
GeneralRe: My vote of 1 Pin
Abdul Quader Mamun13-Dec-10 19:06
Abdul Quader Mamun13-Dec-10 19:06 
GeneralNice article Pin
Jitendra Zaa9-Apr-10 8:40
Jitendra Zaa9-Apr-10 8:40 
Nice article for the beginners.
GeneralRe: Nice article Pin
Abdul Quader Mamun9-Nov-10 6:13
Abdul Quader Mamun9-Nov-10 6:13 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.