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

Tagged as

Go to top

Developing web application for mobile phones using .NET

, 28 Jan 2011
Rate this:
Please Sign up or sign in to vote.
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:
     
      
     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.  
  3. Add meta proper meta tag for mobile, couple of tags with description can be found here[^] .
  4.  
  5. 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).
  6.  
  7. 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.
  8.  
  9. 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.
  10.  
  11. 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.
  12.  
  13. 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""
  14.  
 
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 internetThumbs Up | :thumbsup: .

License

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

Share

About the Author

Pandey Vinay

India India
No Biography provided

Comments and Discussions

 
GeneralReason for my vote of 5 Excellent write up. Being a .net dev... PinmemberLalita16-Dec-10 19:59 

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

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

| Advertise | Privacy | Mobile
Web04 | 2.8.140921.1 | Last Updated 28 Jan 2011
Article Copyright 2010 by Pandey Vinay
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid