Mobile Web Applications with ASP.NET WebForms

Posted on December 29, 2012 by

I have seen many people asking questions in forums about Mobile web application development using ASP.NET WebForms. So i planned to write a blog post on the same.

ASP.NET is a powerful web application development platform, allows to leverage most of the features in Mobile web application development. Now a days, mobile devices are capable of rendering HTML 5 content. Websites which works in desktop browser is rendering great in mobile browsers too. Mobile web browsing is rapidly increased and every one looking for ON THE GO solution!

Now, the question is, Can we convert the existing web application to Mobile web application?

Answer is YES. You can can do that. Just by adding the Viewport meta tag to the Head section of the webpage and you are done!

Viewport Meta tag
  1. <meta name="viewport" content="width=device-width" />

 

To know more about the Viewport meta tag, check this link – Viewport. This viewport meta tag works absolutely fine in all major mobile device browsers including –

  • Apple iPhone – Mobile Safari
  • Android(GingerBread, ICS, Jelly Bean) – Native browser, Google Chrome, Opera
  • WindowsPhone – IE9 and IE 10
  • BlackBerry – Native Browser

Sample Code –

Code Snippet
  1. <%@ Page    Language="C#"
  2.             AutoEventWireup="true"
  3.             CodeBehind="Index.aspx.cs"
  4.             Inherits="MobileApp_WebForms.Index" %>
  5.  
  6. <!DOCTYPE html>
  7.  
  8. <html>
  9. <head runat="server">
  10.     <title>Mobile WebForms</title>
  11.     <meta charset="urf-8" />
  12.     <meta name="viewport" content="width=device-width" />
  13.     <style type="text/css">
  14.         body
  15.         {
  16.             font-family:Verdana;
  17.         }
  18.         label
  19.         {
  20.             width:100px;
  21.             float:left;
  22.             display:block;
  23.         }
  24.         input[type=text]
  25.         {
  26.             width:200px;
  27.         }
  28.         .content
  29.         {
  30.             width:350px;
  31.             margin:0px auto;
  32.         }
  33.         header
  34.         {
  35.             width:350px;
  36.             text-align:center;
  37.             font-size:15px;
  38.             font-weight:bold;
  39.         }
  40.         .button
  41.         {
  42.             width:350px;
  43.             text-align:center;
  44.         }
  45.     </style>   
  46. </head>
  47. <body>
  48.     <form id="form1" runat="server">
  49.     <div class="content">
  50.         <header>
  51.             Contact Us
  52.         </header>
  53.         <div>
  54.             <label>Name</label>
  55.             <asp:TextBox runat="server" ID="txtbox" />
  56.         </div>
  57.         <div>
  58.             <label>Email</label>
  59.             <asp:TextBox runat="server" ID="txtEmail" />
  60.         </div>
  61.         <div>
  62.             <label>Phone</label>
  63.             <asp:TextBox runat="server" ID="txtPhone" />
  64.         </div>
  65.         <div class="button">
  66.             <asp:Button Text="Send" runat="server"  />
  67.         </div>
  68.     </div>
  69.     </form>
  70. </body>
  71. </html>

Try the above code in a mobile browser and you will find the difference!

Next question is, How do we create a separate version of Mobile web application?

We can create stunning mobile specific web application using ASP.NET WebForms and when you access the web application from desktop browser it renders the general desktop web app and when you access it from Mobile browser it renders the mobile web app.

How we need to redirect the user to the respective web app, when user access from different devices? 

I explained the same in one of my earlier blog post – Detect the device and redirect in ASP.NET. That’s one way of doing it. We have few more ways to do the same.

  • JavaScript – By sniffing the UserAgent string and redirect to the appropriate web app – DetectMobileBrowsers
  • CSS 3 Media Queries – Take advantage of CSS 3 media queries and you can redirect the users based on the requested device – MediaQueries. I feel it’s more elegant way.

It’s up to you to choose the right method, based on the devices you are going to support! 

I also suggest you to check the following JavaScript Framework, which has great API support for mobile web application development.

There are many mobile frameworks available, but the above mentioned are good and have great API’s to quickly design a mobile web application.

Now comes the final part, Testing. Testing the mobile web application is real challenge. Everyone can’t afford to buy physical devices and test the web applications. Few device manufacturers provide Emulators, so that we use to test your web application.

Check the below links, which i have blogged earlier related to testing the web application on Emulators!

Apple iPhone/ iPod/ iPad 

Windows Phone

Android, Android Emulator

BlackBerry – Ripple Emulator

So, not least, ASP.NET Mobile website – Mobile. Great repository of information related to developing mobile web applications in ASP.NET and links to some cool tutorials.

If you have any queries or doubts in developing Mobile web applications, do post your questions in Mobile and Handheld Devices Section in ASP.NET Forums. All time experts, great answers!

Happy mobile web programming!!!

Thanks!

About these ads

About roopeshreddy

I'm Software Engineer works for Rebus Technology Inc., develops web applications.
This entry was posted in ASP.NET, Mobile and tagged , , , , , , , . Bookmark the permalink.

17 Responses to Mobile Web Applications with ASP.NET WebForms

  1. affordable senior apartments for rent says:
    December 31, 2012 at 7:37 am

    Thank you for the auspicious writeup. It in fact was a amusement account it.
    Look advanced to more added agreeable from you! However, how
    could we communicate?

    Reply
  2. sbwire.com says:
    January 5, 2013 at 7:03 pm

    Great goods from you, man. I have understand your stuff previous to and you’re just too excellent. I actually like what you have acquired here, certainly like what you are stating and the way in which you say it. You make it entertaining and you still take care of to keep it sensible. I can’t wait to read much more from you.
    This is actually a terrific web site.

    Reply
  3. Vishnu VG (@vgvishnu) says:
    January 8, 2013 at 5:53 pm

    Great Article. A question here. Does the mobile asp.net webform displays all the asp.net controls on mobile devices exactly. Also there are different ajax control kit controls, so is that all displays exactly as in desktop browser?

    Reply
    • roopeshreddy says:
      January 9, 2013 at 8:26 pm

      Hi Vishnu,
      Glad you liked the article! Yeah, all the ASP.NET controls works fine in Mobile browsers. Not true with AJAX Control ToolKit! Instead you can try using jQueryMobile Controls, which is more elegant!

      Hope it helps u…

      Reply
  4. Vishnu VG (@vgvishnu) says:
    January 8, 2013 at 5:55 pm

    Also please help me to know about silverlight controls, wheather, is there any ways to create a silverlight mobile web application?

    Reply
    • roopeshreddy says:
      January 9, 2013 at 8:30 pm

      Silverlight controls doesn’t work with Mobile browsers! Infact Apple iPhone, Android and BlackBerry doesn’t support Silverlight! May be WindowsPhone supports!

      Hope it helps u…

      Reply
  5. hotel the cumberland london says:
    January 15, 2013 at 2:54 pm

    I all the time emailed this web site post page to all my contacts, for the reason that if like to read it afterward my friends will too.|

    Reply
  6. Taneka Vidana says:
    January 20, 2013 at 7:37 am

    I feel that is a genuine good website.Actually thanks! Want far more.

    Reply
  7. grow faster best says:
    January 24, 2013 at 3:04 pm

    I just want to tell you that I am just newbie to weblog and truly enjoyed this web-site. More than likely I’m going to bookmark your blog post . You amazingly come with fabulous writings. Appreciate it for revealing your web page.

    Reply
  8. Oscar says:
    March 1, 2013 at 5:12 am

    Thanks for your time for writing “Mobile Web Applications with ASP.
    NET WebForms | Roopesh Reddy’s space” http://celebrationofcourageevent.org . I reallywill certainly end up being back again for more browsing and writing comments in the near future. Many thanks, Tyler

    Reply
  9. yahoo.com says:
    March 1, 2013 at 7:26 am

    “Mobile Web Applications with ASP.NET WebForms | Roopesh Reddy’s space” Window Treatments For Large Windows was indeed a fantastic post, can’t wait to look at far more of your blog posts. Time to spend several time on-line lmao. Thank you -Marshall

    Reply
  10. Hema says:
    April 3, 2013 at 7:02 pm

    My mobile application is working fine in my desktop but it is not loading correctly iphone simulator(Electronic mobile simulator)
    My code is:

    .auto-style1 {
    font-family: Arial, Helvetica, sans-serif;
    }
    .auto-style2 {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    }
    .auto-style4 {
    color: #0000FF;
    font-weight: bold;
    }

    Travel Request – Pending / Action Taken

                 Request ID
             Request Type
                      

           Request status

     Employee Details———————————————————————————————————————————————————————————————————
            
    Employee ID
                      
    Short ID

                     
    Name
                         
    Grade

                   
    Vertical
                
    Vertical head

             
    L1 Manager
                  
    L2 Manager

             
    Cost Center
                       
    Location

    Travel Details—————————————————————————————————————————————————————————————————————-
      
    Trip Category
          
    Purpose of Trip
        
    Travel Type

    City From
    City To
    Travel Date
    Preferred Time
    Accomodation Required
    Travel Mode

    Agra
    Chennai
    06-Aug-2011
    -
    Required
    Train

    Bhuj
    Calicut
    05-Aug-2011
    -
    Required
    Air

    Financial Details ———————————————————————————————————————————————————————————————————-
                         
    Billing Status
                   
    Cost Centre
    Amount Needed as Advance
    Date Advance Needed

    Approval / Remarks
    ——————————————————————————————————————————————————————————————————
                          
    L1 Approver

    Other Details and Comments —————————————————————————————————————————————————————————————
    Comments

    Action Log ——————————————————————————————————————————————————————————————————————–

    Date and Time
    Action By
    Action
    Remarks

    25-Jul-2011 01:31 PM
    Amar Goyal
    Save As Draft
    -

    25-Jul-2011 01:32 PM
    Amar Goyal
    Submitted By Requestor
    -

    and i have used the tag in mobile.master. Still it is not showing full page in mobile it is showing only part of the page.
    Please help me I am new to mobile development. I am unable paste my simulator output.

    Reply
  11. Hema says:
    April 3, 2013 at 7:34 pm

    Is it necessary to use mobile form and mobile controls to develop mobile application…Because in web forms we dont have such controls.I am devleoping mobile application using web forms.

    Reply
    • roopeshreddy says:
      April 3, 2013 at 9:27 pm

      Hi Hema,

      Mobile web forms controls are not necessary to develop Mobile web applications. Normal ASP.NET controls works absolutely fine in Mobile browsers too. Did you tried adding the Viewport META tag to your page? If not, add it and try again! Moreover, if you have any demo page, we can take a look at it.

      Hope it helps u…

      Reply

Leave a Reply

Fill in your details below or click an icon to log in:

Gravatar
WordPress.com Logo

You are commenting using your WordPress.com account. ( Log Out / Change )

Twitter picture

You are commenting using your Twitter account. ( Log Out / Change )

Facebook photo

You are commenting using your Facebook account. ( Log Out / Change )

Cancel

Connecting to %s