Mobile Web Applications with ASP.NET WebForms

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

30 thoughts on “Mobile Web Applications with ASP.NET WebForms

  1. 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.

  2. 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?

    • 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…

    • 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…

  3. 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.

  4. “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

  5. 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.

  6. 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.

    • 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…

  7. Hi there, i read your blog occasionally and i
    own a similar one and i was just curious if you get a lot
    of spam feedback? If so how do you reduce it, any plugin or anything you
    can recommend? I get so much lately it’s driving me crazy so any support is very much appreciated.

    • Hi Karthi,

      Yeah, you can use! You may have Performance bottleneck, if you wish to display huge number of records. Moreover, ASP.NET GridView has viewstate which makes the page bulky. You can use the GridView at the cost of performance!

      Hope it helps u…

  8. Hi roopeshreddy,

    Wow your write up here is terific I actually searched the internet whole day today to find a really practical and easy solution to develop a mobile website with asp.net c#. And luckily i found your blog. Thank you so much for sharing your knowledge and I will share it too. It really work one time and its perfect! Keep up the good job my frend and more power to you :)…

    -Dean Karl

  9. Hi Roopesh,
    It seems that what you are explaining is creating a web site for mobile devices. But what if I want to package the existing mobile website as a mobile application that I will publish to Google Play. I think this approach may not work for such cases. But not sure?
    Sunil

    • Hi Sunil,

      Exactly! It won’t work, if you wish to publish to Android Play Store or Apple App Store, since we are developing web applications. Again, if you wish to leverage web skills to develop an app, that can be published to respective stores, you may have to check Phone Gap etc.,

      Thanks!

Leave a Reply

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

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 )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s