Geekpedia Programming Tutorials






Introduction to ASP.NET Mobile

This article will give you an idea of how to develop mobile web applications using ASP.NET and the Microsoft Visual Studio .NET environment. It will describe some of the most important mobile specific controls but won't go deep into the subject.

On Sunday, May 8th 2005 at 04:47 PM
By Andrew Pociu (View Profile)
****-   (Rated 3.8 with 16 votes)
Contextual Ads
More ASP.NET Resources
Advertisement
The mobile controls provided by ASP .NET target, as the name suggests, mobile devices (cell phones, Palms, etc.). This article will give you an idea of how to develop mobile web applications using ASP .NET and the Microsoft Visual Studio .NET environment. It will describe some of the most important mobile specific controls but won't go deep into the subject. At the end we'll also take a look at the Pocket PC Emulator 2002 which is included in Visual Studio .NET.



The ways mobile pages are organized differ from the classic web pages that you see on your computer. One mobile page is represented by a Form and a typical file (MobileWebForm1.aspx) can contain multiple forms, therefore multiple pages. This way when you open a page with the WAP browser actually multiple pages will be loaded (represented by forms) and when you click a link to one of the other forms there will be no loading time because they are in the same page. There is a good reason for this. Some WAP browsers disconnect after they retrieve the webpage to save the battery of the mobile phone and the money if the connection is charged per minute. This way they won't have to reconnect every time a new form is loaded, if it is located in the same file.



Create a new ASP .NET Mobile Web Application project in Visual Studio .NET.








MobileWebForm1.aspx is created with a form on it:







Also if you look in the HTML code you can see the tags that define this form:





<mobile:Form id=Form1 runat="server"></mobile:Form>



If you wish, you can add some content to it and view it on your mobile phone:





<mobile:Form id=Form1 runat="server">

Hello <i>visitor</i>!

</mobile:Form>



If you don't have one (do you live in a cave?) you can compile and see the result in the IE window. Or you could download a simulator like the popular Openwave. The result is nothing extraordinary, just some simple text.



Earlier in the article I said that an ASP .NET mobile page can contain multiple forms. In the following example we add a second form, Form2 and we link to it from Form1:





<mobile:form id=Form1 runat="server">

Hello <i>visitor</i>!<br /><br />

<mobile:link id="Link1" Runat="server" NavigateUrl="#Form2">

- About us

</
mobile:link>


</mobile:form>



<mobile:form id=Form2 runat="server">

<b>About us</b><br /><br />

Here goes some information about the website.

</mobile:form>



The linking is not done with the typical <a href> tag. Of course, after the code is compiled the HTML actually uses an <a href> tag but that's its job and not ours. As you can see the linking to the other form is done exactly like when using anchors.

The result in the Openwave simulator is the following:








When you click that link you get to Form2 which displays the text "About us. Here goes some information about the website.".



Displaying a graphic on a mobile phone is as easy as displaying it in a usual web browser. You don't use an <img> tag, but this one:





<mobile:Image id="Link2" Runat="server" NavigateUrl="#Form3" ImageUrl="http://www.yourwebsite.com/logo.gif" />

The List control


This is a basic control that you'll be using in almost any WAP website. It provides sufficient functionality to prove itself useful. Let's see it in action.

First add a link to the Form that includes the control:





<mobile:link id="Link2" Runat="server" NavigateUrl="#Form3">

- Get product list

</
mobile:link>



As you can see here, "Get product list" links to Form3, so let's create this form:






<mobile:form id="Form3" runat="server"><B>Product list</B><BR><BR></mobile:form>



Let's add to this form a specific ASP .NET mobile control - List.





<mobile:form id="Form3" runat="server"><B>Product list</B><BR><BR>

Currently we have the following products for sale:

<mobile:List id="List1" runat="server">

<Item Text="Microsoft Natural Keyboard" />

<Item Text="Philips 5.1 Surround Sound" />

<Item Text="HP LaserJet Printer" />

</mobile:List>

</mobile:form>



If you run this application you can see that the result is just a simple list of the products we entered, if you look at the source code in Internet Explorer you can see that it's created with the help of a table. So what's so special about this control? Well depending on which device the page containing the control is opened, it will be displayed differently. For example on the web browser the list is created using a HTML table, while on a WML browser it will be created much simpler, by separating the items with <br /> tags.

Another feature of Lists is that you can bind them to different data sources, like databases or XML files.

The AdRotator control


Banner advertisements on WAP page appeared a short while after WAP was born. The AdRotator mobile control acts in the same way as the original AdRotator control does. The mobile control has a very useful feature - you can choose to display one type of image for typical computer browsers and other type of image for WML browsers.

The Calendar control


Let's take a look at another mobile control - the Calendar. Adding a functional calendar to a WAP page was a very difficult task in the past, but with the Calendar control it's just a matter of dragging and dropping.

So add a new link in Form1 that points to a new form, Form4:





<mobile:link id="Link3" Runat="server" NavigateUrl="#Form4">

- Calendar

</
mobile:link>



Also add Form4 now:





<mobile:form id="Form4" runat="server"><B>Calendar</B><BR><BR></mobile:form>



If you drag and drop the Calendar control from the Toolbox inside Form4, the following tag will be added:






<mobile:Calendar id="Calendar1" runat="server"></mobile:Calendar>



The calendar control offers great functionality, of course a bit limited for WAP devices. The most important event of this control is called Calendar_SelectionChanged() and, as the name implies, occurs when the visitor selects a date on the calendar.

You could build an entire mobile website based on this control. For example the user picks a day on the calendar and he can see the TV guide for that day, or the movies that run at some cinema.

The SelectionList control


This control acts exactly as a typical DropDown control and also looks like one. Only that it can be made to look like a ListBox also, or like a radio control, or checkbox, or a ListBox that allows multiple items to be selected. This control can change its functionality by changing one of its properties called SelectType:








Also the tags generated by this control are different depending on the devices on which the page is loaded. On an usual computer browser it would display the typical HTML controls. Whereas on a WML browser it would be rendered using WML compatible tags. From a cell phone browser the visitor will have to select the item he wants by using the numeric key pad or by navigating to the wished item.

Pocket PC 2002 Emulator


This emulator comes with the Microsoft Visual Studio .NET package and it's a really nice software to play with if you don't own a Pocket PC. After you're tired of playing with it you can use it for more productive purposes, developing and testing applications and web applications with it. You can fire up this emulator from the Tools menu, Connect to Device item. Choose Pocket PC 2002 Emulator (Default). You probably noticed there's a Windows CE .NET emulator also. Click Connect and the emulator should start in a few seconds. The first thing you'll want to do is set up your internet connection on it. You can do that from the Start menu -> Settings -> Connections tab -> Connections icon.

Aside from the fact that this emulator is a very useful tool for testing your Pocket PC applications, you can also use it to see how your ASP .NET mobile pages look like on the Internet Explorer mobile browser. Open the MobileWebForm we created earlier in this article to see how the forms and controls we added look like on this device. Here's the calendar, for example:








You can apply some stylesheet to it so it will look much better than it does now.

So this emulator can also be used for testing web application, not just Windows mobile applications. A useful tool along with the emulators from Openwave and your WAP enabled cell phone. Using these you can develop flawless mobile applications.
Digg Digg It!     Del.icio.us Del.icio.us     Reddit Reddit     StumbleUpon StumbleIt     Newsvine Newsvine     Furl Furl     BlinkList BlinkList

Rate Rate this tutorial
Comment Current Comments
by faheem on Tuesday, July 12th 2005 at 07:48 AM

good effort

by Krushna on Saturday, November 12th 2005 at 03:42 AM

Where can i download emulater or simulater of mobile(Nokia kit)?
How can i configure with my system or application ?

by JFSO on Sunday, December 11th 2005 at 02:06 PM

i want to know how can i download files like *.mid files to my cellphones.I have IIS and i can download images but i cant download *.mid. I would like a lot to know how can we do it....

by yashavant on Monday, January 23rd 2006 at 09:10 AM

Article is excellant ....but i would like to know is their any way to pass value with navigateUrl field in <mobile:image........> tag.......

by John Elder on Wednesday, May 9th 2007 at 10:51 PM

LIKE many people, I get about a dozen emails a day bearing news good and bad. The bad is that mypenis is too small, too soft and lacking the endurance to satisfy a fruit fly. The good is I can build a longer, stronger and everlasting erection for a few hundred dollars — by taking miracle pills.
Example: "Get ready to be stopped by women in the street. Your entire image will emanate increased size! This is what you always needed to lead a happier, more fulfilling life."
What's being promised is akin to Jack's magic beans, except penis-enlargement pills don't work so spectacularly. To get the extra inches requires at least a six-month commitment. But the pills need to be taken with an exercise program — "jelq" — including drills similar to stretching hamstrings before jogging. To see what it takes to become a Mr Big, go to enlargepenisguide.com. You'll find a nude man, a fairly happy man one imagines, pretending to be a clock, with what appears to be a baby's arm grafted to his pubic bone as the minute hand.
By the time I found this impressive fellow, I'd already paid $106 for a month's supply of SizePro (chosen because of its professional-sounding name) and followed these instructions: "Type your name, the number of inches you want to gain, and the reason(s) you want to gain those inches in the blanks below. And read the completed statement out loud to reinforce the commitment that will lead to your ultimate success."
And so my colleagues heard me pledge earnestly: "I, John Elder, have decided I want to gain two inches in length and one inch in girth (I felt modest ambition would minimise disappointment). My reasons are vanity. And I'm committed to a good penis-pill system until I reach my desired gains."
If I hadn't made this pledge, I could have abandoned the project — particularly after spotting Mr Baby Arm, whom I presume is also trying to improve himself. And that's the rub. If you're born with one of these ridiculous organs, there are times when just about every man feels short-changed.
The average size of an erect penis is about 15.24 centimetres — six inches in the old money. (When talking about penis size, it's traditional to use inches.) The sad thing is it seems there are many men living fretfully with a ruler in one hand and a world of hope in the other. To meet some of these people, return to http://enlargepenisguide.com — and log on to the "progress reports" forum. You'll find men apparently taking the pills, diligently jelqing (stretching a flaccid penis) and sharing how it's hanging. Like Nicky: "I'm 21, and, measured from the pelvic bone, the length of my penis is around 7.5 inches, but I've always wanted to be large like a porn star. I've been doing the exercise a few days now …"
Occasionally, someone claims spectacular results. The simple reason is that the pills — herbal aphrodisiacs, not muscle-building proteins — give little more than an illusion of growth by concentrating blood in the otherwise shrivelled underbelly. But the real joke is that the more anxious one becomes about penis size, the more it is likely to shrink.
"The curious thing about our society, most of the time we pretend that the penis doesn't shrink," says David Mitchell, a doctor and a medical anthropologist. "In fact, the penis doesn't have a set flaccid size. It's actually meaningless to measure the size of the penis because it varies from minute to minute according to the temperature and one's state of mind. The trouble is, if you get anxious, it only makes it smaller, to the point where it can disappear … in cases where anxiety spirals into a panic attack."
Dr Mitchell has researched a recent outbreak of these attacks — known as "shrinking penis disease" — on the Indonesian island of Flores, where black magic is widely practised. In these instances, the sufferer believes he will die if his penis disappears. The last outbreak in a modern society occurred in Singapore in 1962, following a rumour that eating pork vaccinated against swine fever would cause shrinking penis disease.
"There were people rushing through the streets holding their penises … some of them using chopsticks," Dr Mitchell says. "As soon as they hit the hospital and started to relax, they came back to normal."
Dr Mitchell says the disease could re-emerge in the Western world. "It could come back again in our society if someone spread the right stories around," he says.
Chris Fox, of La Trobe University, is doing a PhD on penis size and its role in body image. So far, he has interviewed 15 men aged 20 to 75. "The short answer is that every man at some point in his life worries about the size of his penis," Mr Fox says. "If we don't like our penis we won't enjoy sex. For people with a pathological issue with penis size, it will affect their sex life.
"In some cases it will affect how they behave around other men. And one has to remember that most people make their comparison with a flaccid penis — at the urinal or in a change room. The only erections we tend to see are the very big penises on porn stars … and my interview subjects didn't feel threatened by these giant penises because they felt they weren't real. It's in the real world that anxiety takes root.”

by ringtones on Friday, August 17th 2007 at 03:19 PM

nice place!

by John Smith on Friday, August 1st 2008 at 05:34 PM

Do you have a link that I can obtain the tools that install the ASP .NET Mobile Web Appliaciton project? I can't seem to find them anywher eon Microsoft or the web???

by Tun on Friday, September 5th 2008 at 05:09 AM

where is link to download .Net Mobile web application.

useless this post.

by Raja Monem on Wednesday, June 24th 2009 at 11:45 PM

Hi,
Article is excellent but I want to know how can I implement style sheet on mobile forms

by Ankur Dukare on Tuesday, July 7th 2009 at 06:47 AM

Adding the tagprefix gives an error.
I even registered it above i.e. before the begining of the code. Still error

by senthilkumar on Monday, August 3rd 2009 at 01:39 AM

it is a good article for beginners.
I have used the below code but arround the image i am getting a blue border how to avoid this?

<mobile:Image id="Link2" Runat="server" NavigateUrl="#Form3" ImageUrl="http://www.yourwebsite.com/logo.gif" />

by Dharmendra sahu on Thursday, September 24th 2009 at 04:22 AM

I take to selectionList and i want to select an item from one selectionlist according to this i want to open another selectionlist that show an item. but i am enable to do in web based mobile applicaion in asp.net

by Your father on Wednesday, October 7th 2009 at 08:04 AM

poorrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr

by neriah on Tuesday, November 3rd 2009 at 04:30 AM

please where can I get microsoft mobile internet toolkit or asp.net mobile controls. i need it urgently pleassseeee


Comment Comment on this tutorial
Name: Email:
Message:
Comment Related Tutorials
There are no related tutorials.

Comment Related Source Code
There is no related source code.

Jobs ASP.NET Job Search
My skills include:
Enter a City:

Select a State:


Advanced Search >>
Latest Tech Bargains

Advertisement

Free Magazine Subscriptions

Today's Pictures

Today's Video

Other Resources

Latest Download

Latest Icons