Click here to Skip to main content
15,861,125 members
Articles / Web Development / ASP.NET
Tip/Trick

Developing web application for mobile phones using .NET

Rate me:
Please Sign up or sign in to vote.
4.84/5 (18 votes)
28 Jan 2011CPOL2 min read 45.7K   29   8
This is how you can develop web application for mobile phones using .NET.
When I started thinking of developing a web application for mobile, I came across a lot of programming languages and technologies (BlackBerry /Apple IPhone having own development framework, supported by there company). However, they have limited to set of users and I would not want to pursue further in it.

After a bit of searching over internet, I found that most if not all of the offerings could be achieve by using .Net. Although it may not be that efficient as developing environment specific application that you can develop using its own development environment, but you will be able to reach larger audience (Read : people using window mobile based appliances).

As this scenario worked fine for me, I just thought of mentioning the stuff here.

Following is what I did:-

  1. To test whether the request is from mobile use the following method:

    C#
    public static bool isMobileBrowser()
    {
      //GETS THE CURRENT USER CONTEXT
       HttpContext context = HttpContext.Current;
    
      //FIRST TRY BUILT IN ASP.NT CHECK
      if (context.Request.Browser.IsMobileDevice)
      {
          return true;
      }
      //THEN TRY CHECKING FOR THE HTTP_X_WAP_PROFILE HEADER
     if (context.Request.ServerVariables["HTTP_X_WAP_PROFILE"] != null)
     {
         return true;
     }
     //THEN TRY CHECKING THAT HTTP_ACCEPT EXISTS AND CONTAINS WAP
     if (context.Request.ServerVariables["HTTP_ACCEPT"] != null &&
         context.Request.ServerVariables["HTTP_ACCEPT"].ToLower().Contains("wap"))
     {
         return true;
     }
     //AND FINALLY CHECK THE HTTP_USER_AGENT
     //HEADER VARIABLE FOR ANY ONE OF THE FOLLOWING
     if (context.Request.ServerVariables["HTTP_USER_AGENT"] != null)
     {
         //Create a list of all mobile types
         string[] mobiles =
             new[]
                 {
                     "midp", "j2me", "avant", "docomo",
                     "novarra", "palmos", "palmsource",
                     "240x320", "opwv", "chtml",
                     "pda", "windows ce", "mmp/",
                     "blackberry", "mib/", "symbian",
                     "wireless", "nokia", "hand", "mobi",
                     "phone", "cdm", "up.b", "audio",
                     "SIE-", "SEC-", "samsung", "HTC",
                     "mot-", "mitsu", "sagem", "sony"
                     , "alcatel", "lg", "eric", "vx",
                     "NEC", "philips", "mmm", "xx",
                     "panasonic", "sharp", "wap", "sch",
                     "rover", "pocket", "benq", "java",
                     "pt", "pg", "vox", "amoi",
                     "bird", "compal", "kg", "voda",
                     "sany", "kdd", "dbt", "sendo",
                     "sgh", "gradi", "jb", "dddi",
                     "moto", "iphone"
                 };
    
         //Loop through each item in the list created above
         //and check if the header contains that text
         foreach (string s in mobiles)
         {
             if (context.Request.ServerVariables["HTTP_USER_AGENT"].
                                                 ToLower().Contains(s.ToLower()))
             {
                 return true;
             }
         }
     }
    
     return false;
     }
    


  2. Add meta proper meta tag for mobile, couple of tags with description can be found here[^] .
  3. Now once you have added meta tag it is time to design a page for mobile. Before getting into the designing the page, you need to understand that the width of mobile is not as the normal monitors. Therefore best is to specify width in % and not in pixels, even if you define the width in pixels make sure you don't break things.(To check this out test it in the simulators, although simulators don't give 100% accurate results, this is how you can test if you don't have actual device to test available all the time).
  4. The way each browser interprets your page is different so you have to be careful while writing code.but as long as you are writing in basic html and asp.net which of the browsers understand you don't have to worry about this. Normal(not designed for mobile) third party control can be messy as you may not be aware whether they support mobile plateform, results can be devastating.
  5. If you are using javascript then make sure it is enabled, and if not ask the user to enable it, better is to avoid javascript as it still takes fair portion of market.
  6. Some browsers support ECMAScript[^]so make sure you have included ECMAScript tag either on the page or config file. Once you have done this you have added lot of capability your app, without ECMAScript you black berry would not respond to __doPostBack(); event and now you can even use controls like .Net tree view control and etc.
  7. To display the page properly so that it occupies full width in "Landscape Mode" use following meta tag with "name="viewport" content="width=device-width,user-scalable=no""


This is enough for writing the mobile application now you can write the code and hope it works as expected in 90% of cases for the rest 10% of cases google[^] is our friend, using that you can find abundant material on internet:thumbsup:.

License

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


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

Comments and Discussions

 
QuestionIt is very useful to start with mobile application.please give some ideas for my task? Pin
iyalarasi8-Oct-12 20:17
iyalarasi8-Oct-12 20:17 
AnswerRe: It is very useful to start with mobile application.please give some ideas for my task? Pin
vinay pandey5-Jun-13 17:37
vinay pandey5-Jun-13 17:37 
GeneralReason for my vote of 5 Nice tip! Pin
Manfred Rudolf Bihy6-Feb-11 6:21
professionalManfred Rudolf Bihy6-Feb-11 6:21 
Generalglad you all liked it, thanks for reading. Happy Programming... Pin
Pandey Vinay6-Feb-11 6:04
Pandey Vinay6-Feb-11 6:04 
Generalcool!!! Pin
shakil03040031-Feb-11 0:03
shakil03040031-Feb-11 0:03 
GeneralReason for my vote of 5 very nice tricks dear......... Pin
Hiren T Patel30-Jan-11 21:05
Hiren T Patel30-Jan-11 21:05 
GeneralReason for my vote of 5 it's good Pin
ivan9619-Jan-11 8:52
ivan9619-Jan-11 8:52 
GeneralReason for my vote of 5 Excellent write up. Being a .net dev... Pin
Lalita16-Dec-10 19:59
Lalita16-Dec-10 19:59 

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.