Category: ASP.NET

Hybrid Apps – Android System WebView Updates

From Android Lollipop 5.0, Google started pushing an app called “Android System Web View”, which they periodically update the device web view. Since Apache Cordova / Adobe PhoneGap is well adopted for building cross platform Mobile apps, this will have significant impact on the apps we’ve already built!

If you’re a Hybrid app developer and supporting Android 5.0 Lollipop & above versions, it’s worth to keep an eye on these updates and test your apps often.

It’s highly recommended to subscribe Chrome Canary beta channel – Android System WebView beta to get the updates early and act accordingly.

You can join Google+ WebView beta community to get latest updates. Android System WebView is supported on Android Lollipop 5.0 & above versions.

How to uninstall the Web View update

  • Tap on the Settings icon.

  • Scroll down and tap on Apps or Application Manager.

  • Look for Android System WebView under Downloaded page.

  • Tap to open the info page.

  • Now click on UNINSTALL UPDATES button. This will reset the web view.

NOTE: It’s a temporary solution till you work out a fix for it. If any of your existing app is breaking in the production, you can quickly ask them to uninstall the Android System WebView update.

Hope it helps!

Limit File Upload size in ASP.NET Web applications

One of the problems in file upload is to check the file size before uploading to the server. It’s been a big problem for web developers to restrict the file upload, if it exceeds the given file size .

Now, we can restrict it before uploading to the server using simple JavaScript snippet. Thanks to latest browsers – Microsoft IE 10+, Chrome 21+, Firefox 15+ for making this happen.

Here is the code to do that –

Code Snippet
  1. <form id="form1" runat="server" enctype="multipart/form-data">
  2.     <div>
  3.         <asp:FileUpload runat="server" ID="fileUpload" />
  4.         <asp:Button runat="server" Text="Submit" OnClientClick="return Validate();" OnClick="FileUpload" />
  5.         <div id="Message"></div>
  6.     </div>
  7.     </form>
  8.     <script type="text/javascript" >
  9.         function Validate() {
  10.             var msg = "";
  11.             var bIsValid = true;
  12.             var uploadedFile = document.getElementById("<%=fileUpload.ClientID %>");
  13.  
  14.             if (uploadedFile.files[0].size > 512000) // greater than 512KB
  15.             {
  16.                 msg += "File Size is limited to 512 KB!";
  17.                 bIsValid = false;
  18.             }
  19.  
  20.             var ext = uploadedFile.value.substr(uploadedFile.value.indexOf(".") + 1, uploadedFile.value.length);
  21.             if (ext != "jpg" || ext != "png") {
  22.                 msg += "You can upload only .jpg or .png images!";
  23.                 bIsValid = false;
  24.             }
  25.             if (!bIsValid) {
  26.                 document.getElementById("Message").innerHTML = msg;
  27.                 return false;
  28.             }
  29.             //On Success
  30.             return true;
  31.         }
  32.     </script>

The above code may fail in browsers which doesn’t support HTML 5 features, so it’s better to validate at server end as well for additional security!

Code Snippet
  1. protected  void FileUpload(object sender, EventArgs e)
  2.       {
  3.           if (fileUpload.PostedFile.ContentLength > 512000)
  4.           {
  5.               return;
  6.           }
  7.       }

 

NOTE: The above JavaScript snippet can be used across the technologies including JSP, PHP etc.,

Happy Web Programming!!!

How to setup Android emulator to test mobile web apps

The real deal with Mobile web application development is testing it on multiple devices. So every one may not be able to buy all the mobile devices to test, especially with Android. Since we have many devices from multiple OEM’s and with different screen size, it’s not a feasible option to buy all devices and test. Thanks to Google for providing emulators to make our job easy!

I have already wrote an article on testing mobile web applications in Android Emulator, but it’s initial version of Android device and it’s depreciated now. So, i thought writing extension to that with latest tools available from Google. 

In this article, i will show you how to setup Android Emulator to test your mobile web applications on Windows OS [Since, more people looking for a solution on this platform Winking smile].

  • Download the Android SDK from this URL – Android SDK.

image

NOTE: There may be change of page layout in future, but i hope Google allow to download the Android SDK.

  • It gives you option to download x86 or x64 version. It’s up to you to choose the right version for you. NO CONSTRAINTS. The SDK contains all the required tools to get started with developing Android apps, anyway it’s out of topic.
  • Once you are done downloading, unzip it. You will see two folders and  SDK Manager.exe.

image

  • Click on the SDK Manager to launch. It launches the Android SDK Manager window.

image

  • Now click on Tools –> Manage AVDs…

image

  • It launches Android Virtual Device Manager window.

image

  • Now, we need to create a new Android Virtual Device, by clicking on New… button.
  • When you click on New… button, it launches Create New Android Virtual Device (AVD) window.

image

  • Enter AVD Name, select Device  and Target. In the Device dropdown, you will get all the devices with different screen sizes including Android Tablets.
  • Target has the recent Android Version list, which you can select the required one. Now, we have Android 4.2 Jelly Bean.

image

  • You can leave the rest of the fields to their defaults, which we are not going to mess up. If you wish to play around with other fields too, you are free to do that. Again NO CONSTRAINTS.
  • On clicking on OK button, it shows message box, which summarizes the configuration of out emulator.

image

  • Click OK button. Now the newly configured Android emulator is added to the list.

image

  • Now select the newly created emulator and click on Start… button.

image

  • It will invoke Launch Options dialog.

image

  • Click on Launch button, by leaving the options to their defaults! It will launch the emulator Smile

image

  • Now we are ready to test our mobile web application.
  • Launch the web browser in the emulator and test your applications!

image

NOTE: If you are testing your mobile web apps, that are deployed to local IIS, then you have to use IP Address instead of using localhost.

Happy mobile web application programming and testing!

Thanks!

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!

Detect requesting device type and redirect in ASP.NET

Smart Phones are rapidly increasing, so web app developers are more concentrating on porting their web applications compatible to view on smart phones.

With ASP.NET, making an existing web application compatible for smart phones is pretty easy. You can just add the following META tags in the &lt;head&gt; section and you are done. ASP.NET takes care of the rest!

META Tags
  1. <meta name="HandheldFriendly" content="true" />
  2. <meta name="viewport" content="width=device-width" />

 

ASP.NET MVC 4 has got pretty more options for making the website Mobile compatible!

http://www.asp.net/mvc/tutorials/mvc-4/aspnet-mvc-4-mobile-features

In ASP.NET WebForms too, we have an option to check whether the requested device is Mobile or not – Request.IsMobileDevice, which is not appropriate in most of the scenarios! I mean, it’s failing to detect the device type correctly!

Now, we discuss about custom solution for ASP.NET WebForms – detect the device type and redirecting!

Suppose if you have two versions of your web application – Mobile & Desktop, and you may wish to redirect the user to the appropriate web app based on the requested device.

To do that, try the following code snippet!

Detect Device in ASP.NET
  1. //Redirect the user based on the requested device
  2.             bool bIsMobileDevice = false;
  3.            
  4.             string[] MobileDevices = new string[] { "iPhone", "iPad","iPod","BlackBerry",
  5.                                                      "Nokia", "Android", "WindowsPhone",
  6.                                                      "Mobile"
  7.                                                      };
  8.             foreach (string MobileDeviceName in MobileDevices)
  9.             {
  10.                 if ((Request.UserAgent.IndexOf(MobileDeviceName, StringComparison.OrdinalIgnoreCase)) > 0)
  11.                 {
  12.                     bIsMobileDevice = true;
  13.                     break;
  14.  
  15.                 }
  16.             }//end:foreach loop
  17.  
  18.             if (bIsMobileDevice)
  19.             {
  20.                 Response.Redirect("Mobile/Home.aspx");
  21.             }
  22.             else
  23.             {
  24.                 Response.Redirect("Desktop/Home.aspx");
  25.             }

Let’s examine, what the above code does – A String array holds the mobile device names, which is matched with the User Agent string. If match is successful, then the user is redirected to the Mobile website!

Cool! If you examine the above code, it  contains the device names hardcoded in string array! Suppose, in future if you wish to add another device. For that, you may have add the new device name to the string array, recompile it and upload it back to the web server!

Seems to be an inefficient solution. The above solution will be suitable for scenarios like if you are targeting particular device type like iPad etc.,

Now we will see a more generic way to achieve the solution to the problem! We create an XML file, which holds the Mobile device names –

MobileDevices.xml
  1. <?xml version="1.0" encoding="utf-8" ?>
  2. <Devices>
  3.   <Device>iPad</Device>
  4.   <Device>iPhone</Device>
  5.   <Device>iPod</Device>
  6.   <Device>WindowsPhone</Device>
  7.   <Device>Android</Device>
  8.   <Device>BlackBerry</Device>
  9.   <Device>Nokia</Device>
  10.   <Device>Samsung</Device>
  11.   <Device>Mobile</Device>
  12. </Devices>

 

The above file can be created under App_Data folder! Now you can read the device names from this file using classes in System.Xml.Linq namespace.

To do that, check the below code snippet,

Code Snippet
  1. bool bIsMobileDevice = false;
  2.  
  3.             XDocument mobileDeviceDoc = XDocument.Load(Server.MapPath("App_Data/MobileDevices.xml"));
  4.  
  5.             var mobileDevices = from devices in mobileDeviceDoc.Root.Elements()
  6.                                 select devices;
  7.  
  8.             foreach (XElement device in mobileDevices)
  9.             {
  10.                 if (!string.IsNullOrEmpty(device.Value))
  11.                 {
  12.                     if ((Request.UserAgent.IndexOf(device.Value, StringComparison.OrdinalIgnoreCase)) > 0)
  13.                     {
  14.                         bIsMobileDevice = true;
  15.                         break;
  16.  
  17.                     }
  18.                 }
  19.  
  20.             }//end:foreach loop
  21.  
  22.             if (bIsMobileDevice)
  23.             {
  24.                 Response.Redirect("Mobile/Home.aspx");
  25.             }
  26.             else
  27.             {
  28.                 Response.Redirect("Desktop/Home.aspx");
  29.             }

Now this solution was more feasible! When you want to add new device, just add an element in the MobieDevices.xml and you are done. No need to re compile you code and upload it back to the web server. It just works!!!

Happy Mobile Web Programming!!!

 

ASP.NET Sever Controls Validation using JavaScript / jQuery!

I see many people posting questions in forums asking about client side validation of ASP.NET Server controls using JavaScript or jQuery!

First we will see how to allow only numeric digits in an ASP.NET Textbox using JavaScript! Check the below code snippet on how to do it!

Numeric Textbox
  1. <div>
  2.      <label style="float:left;">Enter you PIN:</label> <asp:TextBox runat="server" onkeydown="return NumericTextBox(event);"></asp:TextBox>
  3.    </div>
  4.    <script type="text/javascript">
  5.        
  6.        function NumericTextBox(evt) {
  7.            var charCode = (evt.charCode) ? evt.charCode : ((evt.which) ? evt.which : evt.keyCode);
  8.            if (charCode == 8 || //backspace
  9.                 charCode == 46 || //delete
  10.                 charCode == 13)   //enter key
  11.            {
  12.                return true;
  13.            }
  14.            else if (charCode >= 37 && charCode <= 40) //arrow keys
  15.            {
  16.                return true;
  17.            }
  18.            else if (charCode >= 48 && charCode <= 57) //0-9 on key pad
  19.            {
  20.                return true;
  21.            }
  22.            else if (charCode >= 96 && charCode <= 105) //0-9 on num pad
  23.            {
  24.                return true;
  25.            }
  26.            else
  27.                return false;
  28.  
  29.        } //end:NumericTextBox function
  30.    </script>

Now we will see how to validate the ASP.NET DropDownList control. Basically, we may require to validate that the user has selected some option in the DropDownList! Check the below code snippet on how to do it!

Validating DropDownList
  1. <div>
  2.    <label style="float:left;" >Quantity:</label>
  3.        <asp:DropDownList runat="server" ID="dropdownlist">
  4.            <asp:ListItem Text="Select" Value="Select"  />
  5.            <asp:ListItem Text="One" Value="One"  />
  6.            <asp:ListItem Text="Two" Value="Two"  />
  7.            <asp:ListItem Text="Three" Value="Three"  />
  8.        </asp:DropDownList>
  9.    </div>
  10.    <div>
  11.     <asp:Button runat="server" Text="Submit" OnClientClick="return Validate_ddl();" />
  12.    </div>
  13.  
  14.    <script type="text/javascript">
  15.        function Validate_ddl() {
  16.            var ddl = document.getElementById("<%=dropdownlist.ClientID %>");
  17.  
  18.            if (ddl.selectedIndex <= 0) {
  19.                alert('please select!');
  20.                return false;
  21.            }
  22.            else
  23.                return true;
  24.            
  25.        }
  26.    </script>

Finally, we will see how to validate ASP.NET Checkboxlist! We have a bunch of options displayed as checkbox, which we we may have to validate that user selects at least one checkbox! Check the below code on how do it!

Validating CheckBoxList
  1. <div>
  2.       <label style="float:left;">Skills:</label>
  3.       <asp:CheckBoxList runat="server" ID="checkboxlist">
  4.           <asp:ListItem Text="ASP.NET" Value="ASP.NET" />
  5.           <asp:ListItem Text="JAVA" Value="JAVA" />
  6.           <asp:ListItem Text="SQL SERVER" Value="SQL SERVER" />
  7.       </asp:CheckBoxList>
  8.   </div>
  9.  
  10.   <div>
  11.     <asp:Button runat="server" Text="Submit" OnClientClick="return Validate_checkboxlist();" />
  12.    </div>
  13.  
  14.  
  15.     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"&gt;
  16.         function Validate_checkboxlist() {
  17.             var isSkillsSelected = false;
  18.             $('input[type=checkbox]', '#' + '<%=checkboxlist.ClientID %>').each(function () {
  19.                 if (this.checked) {
  20.                     isSkillsSelected = true;
  21.                 }
  22.             });
  23.  
  24.             if (!isSkillsSelected)
  25.                 alert("Please select skills!");
  26.  
  27.         }
  28.     </script>

Now, we will see how to validate the ASP.NET File Upload control! Suppose you may have to allow users to select certain file types. Check the below code on how to do it!

Validating FileUpload
  1. <div>
  2.         <asp:FileUpload runat="server" ID="fileUpload" />
  3.     </div>
  4.     <div>
  5.  
  6.         <input type="button" name="name" value="Submit" onclick="return fileUpload_Validate();" />
  7.     </div>
  8.  
  9.     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"&gt;
  10.         
  11.         var AllowedFileTypes = new Array();
  12.         
  13.         AllowedFileTypes.push(".jpg"); //JPEG File Type
  14.         AllowedFileTypes.push(".bmp"); //BMP File Type
  15.         AllowedFileTypes.push(".gif"); //GIF File Type
  16.         AllowedFileTypes.push(".png"); //PNG File Type
  17.  
  18.         function fileUpload_Validate() {
  19.  
  20.             var bIsValidFile = false;
  21.  
  22.             try {
  23.  
  24.                 //———————————————————–
  25.                 //Below are the two version of retrieving the value from FileUpload
  26.                 //control. You can use any one of them, based on your requirement
  27.                 //jQuery version
  28.                 var filePath = new String($('#' + '<%=fileUpload.ClientID %>').val());
  29.  
  30.                 //JavaScript version
  31.                 var filePath = new String(document.getElementById('<%=fileUpload.ClientID %>').value);
  32.                 //———————————————————–
  33.  
  34.  
  35.                 //Throw error, if file is not selected!
  36.                 if (filePath.length <= 0) {
  37.                     alert("Please select a file!");
  38.                     return false;
  39.                 }
  40.  
  41.                 //Get the file extension from the selected path!
  42.                 var fileType = filePath.substring(filePath.lastIndexOf("."), filePath.length);
  43.  
  44.                 for (var x = 0; x < AllowedFileTypes.length; x++) {
  45.                     if (AllowedFileTypes[x] == fileType) {
  46.                         bIsValidFile = true;
  47.                         break;
  48.                     }
  49.                 }
  50.  
  51.                 if (!bIsValidFile) {
  52.                     alert('please select a valid file!');
  53.                 }
  54.                 return bIsValidFile;
  55.  
  56.             }
  57.             catch (e) {
  58.                 console.log('An Internal error has occured!');
  59.             }
  60.         }
  61.     </script>

Happy Web Programming!!!

Viewing uploaded file!!!

Here we go small ASP.NET/C#.NET snippet to view the uploaded file!

Demo.aspx

<form id="form1" runat="server" enctype="multipart/form-data">
    <div>
        <asp:FileUpload runat="server" ID="fileUpload" />
        <asp:Button runat="server" Text="Upload" OnClick="FileUpload_Click" />
        <asp:HyperLink  runat="server" ID="lnkButton" Text="View File" />
    </div>
    </form>

Demo.aspx.cs

protected void FileUpload_Click(object sender, EventArgs e)
       {
           if (fileUpload.HasFile)
           {
               string strPath = Request.PhysicalApplicationPath + "Upload\\" + fileUpload.FileName;
               fileUpload.SaveAs(strPath);
               lnkButton.NavigateUrl = "~/Upload/" + fileUpload.FileName;
           }
       }
Happy Coding!!!