Click here to Skip to main content
Click here to Skip to main content

Tagged as

ASP.NET Mobile Web Development (Without Using Visual Studio)

, 3 Sep 2013 CPOL
Rate this:
Please Sign up or sign in to vote.
This article demonstrates how to create ASP.NET Mobile Web Pages without using Visual Studio.

Sample Image - maximum width is 600 pixels

Introduction

In this article I am describing how easy it is to develop mobile web pages without using Visual Studio. Since Express Editions of Visual Studio do not support ASP.NET mobile development, the alternative is to create mobile web pages using a stand-alone web server like Cassini and stand-alone emulator images. To demonstrate this concept, I have created a mobile web application which displays EmployeeID, LoginID and Title from the HumanResources.Employee table of the Adventureworks database. This application is developed using the Cassini Webserver. Device emulation is provided by the Microsoft Device Emulator.

The following steps can be used to install the Device Emulator:

Note: You must run the Windows Mobile 6 Professional Images installer twice. When running the installer second time, select the option to repair the installation and ignore errors, if any.

Now you can start the emulator from the following menu command:

Start -> All Programs -> Windows Mobile 6 SDK -> Stand Alone Emulator Images -> USB English -> Professional

This will display the following emulator screen:

Background

A Mobile Web page is derived from the System.Web.UI.MobileControls.MobilePage class. Mobile controls are present in the System.Web.Mobile namespace. Some Mobile controls are as follows:

  • mobile:Form - A form acts as a container for all other mobile web controls.
  • mobile:Label - This control can be used to display a constant text on the device screen.
  • mobile:Image - An image control can be used to display a graphical image, for e.g. a logo, on the device screen.
  • mobile:Command - This control can be used to initiate an action by clicking on it.
  • mobile:ObjectList - This control can be used to display data in the form of rows and columns. Typically it is used to display data from a database table on a device.

A mobile web page may consist of one or more mobile forms. A form can be navigated to by setting the ActiveForm property of the page.

Using the code

The following code creates a mobile page by inheriting from the MobilePage class.

<%@ Page Inherits="System.Web.UI.MobileControls.MobilePage" %>

The following two lines are used to import namespaces to get data from SQL Server database.

<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.SqlClient" %>

The following code creates two mobile web forms. The first form contains an image representing a logo. The Display command button is used to navigate to the second form.

An ObjectList control is created on the second form to display the employee details. The Home command button is used to navigate to the first form. The OnLoad event of the second form specifies the event handler function to display the employee details.

<body>

<mobile:Form id="Form1" runat="server">
<mobile:Image id="image1" runat="server" ImageURL="employee.jpg"/>
<mobile:Command id="cmdDisplay" runat="server" OnClick="Display">
Display Employee Details
</mobile:Command>
</mobile:Form>

<mobile:Form id="Form2" runat="server" OnLoad="ShowDetails">
<mobile:Command id="cmdBack" runat="server" OnClick="ShowHome">Home</mobile:Command>
<mobile:Label id="lblHeading" runat="server">Employee Details</mobile:Label>
<mobile:ObjectList id="obj1" runat="server"/>
</mobile:Form>

</body>

The following is the script for the page.

<script language="C#" runat="server">
void Display(object sender,EventArgs e)
{
   this.ActiveForm=Form2;
}
void ShowDetails(object sender,EventArgs e)
{
   if(!Page.IsPostBack)
   {
      SqlConnection con=new SqlConnection();
      con.ConnectionString=@"Integrated Security=true;Initial Catalog=AdventureWorks;Data Source=AZ\SQLEXPRESS";
      SqlCommand cmd=new SqlCommand();
      cmd.Connection=con;
      cmd.CommandType=CommandType.Text;
      cmd.CommandText="select EmployeeID,LoginID,Title from HumanResources.Employee";
      SqlDataAdapter da=new SqlDataAdapter();
      da.SelectCommand=cmd;
      DataSet ds=new DataSet();
      con.Open();
      da.Fill(ds,"Employee");
      con.Close();
      obj1.DataSource=ds;
      obj1.DataMember="Employee";
      obj1.DataBind();
   }
}
void ShowHome(object sender,EventArgs e)
{
   this.ActiveForm=Form1;
}
</script>

In the above code, the Display function navigates to the second form and the ShowHome function navigates to the first form. The ShowDetails function displays employee details using an ObjectList control.

Following is the complete code of the mobile web page:

<%@ Page Inherits="System.Web.UI.MobileControls.MobilePage" %>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.SqlClient" %>
<html>
<head>
<script language="C#" runat="server">
void Display(object sender,EventArgs e)
{
   this.ActiveForm=Form2;
}
void ShowDetails(object sender,EventArgs e)
{
   if(!Page.IsPostBack)
   {
      SqlConnection con=new SqlConnection();
      con.ConnectionString=@"Integrated Security=true;Initial Catalog=AdventureWorks;Data Source=AZ\SQLEXPRESS";
      SqlCommand cmd=new SqlCommand();
      cmd.Connection=con;
      cmd.CommandType=CommandType.Text;
      cmd.CommandText="select EmployeeID,LoginID,Title from HumanResources.Employee";
      SqlDataAdapter da=new SqlDataAdapter();
      da.SelectCommand=cmd;
      DataSet ds=new DataSet();
      con.Open();
      da.Fill(ds,"Employee");
      con.Close();
      obj1.DataSource=ds;
      obj1.DataMember="Employee";
      obj1.DataBind();
   }
}
void ShowHome(object sender,EventArgs e)
{
   this.ActiveForm=Form1;
}
</script>
</head>
<body>
<mobile:Form id="Form1" runat="server">
<mobile:Image id="image1" runat="server" ImageURL="employee.jpg"/>
<mobile:Command id="cmdDisplay" runat="server" OnClick="Display">
Display Employee Details
</mobile:Command>
</mobile:Form>
<mobile:Form id="Form2" runat="server" OnLoad="ShowDetails">
<mobile:Command id="cmdBack" runat="server" OnClick="ShowHome">Home</mobile:Command>
<mobile:Label id="lblHeading" runat="server">Employee Details</mobile:Label>
<mobile:ObjectList id="obj1" runat="server"/>
</mobile:Form>
</body>
</html>

You can create the above code in any text editor and save it in a folder. Start Cassini web server and configure it as shown in the following figure:

Start the emulator from the following menu command:

Start -> All Programs -> Windows Mobile 6 SDK -> Stand Alone Emulator Images -> USB English -> Professional

The following emulator screen appears:

Now start the Windows Mobile Device Center from the following menu command:

Start -> All Programs -> Windows Mobile Device Center

The following screen will be displayed:

Click on Connection settings and choose DMA from the drop down list box below the "Allow connections to one of the following:" checkbox and click on the OK button, as follows:

Now start the Device Emulator Manager from the following menu command:

Start -> All Programs -> Windows Mobile 6 SDK -> Tools -> Device Emulator Manager

The Device Emulator Manager screen will appear as follows:

Select the emulator and choose Cradle option from the Actions menu as follows:

Now start Internet Explorer on the emulator and type the URL to the web page in the following format: http://ipaddress:port/pagename.aspx

For example: http://192.168.154.1:1234/EmployeeDetails.aspx

The following output will be displayed:

Clicking on the "Display Employee Details" button shows the following output:

Clicking on the EmployeeID 7 displays the following output:

Points of Interest

I hope the above discussion will be helpful to readers who wish to do ASP.NET Mobile Web Page development without Visual Studio.

License

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

Share

About the Author

Azim Zahir
Instructor / Trainer NIIT, India
India India
I am a trainer by profession. Currently I am working with NIIT (Mumbai, India) as a Senior Faculty. I enjoy programming as a hobby. My favorite technologies are Flash, Flex and Silverlight.
 
Of late I have developed keen interest in WPF and Windows Mobile programming.
 
Apart from computers, my favorite pastime is bicycling.

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web02 | 2.8.141022.1 | Last Updated 3 Sep 2013
Article Copyright 2013 by Azim Zahir
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid