Month: June 2012

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 <head> 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!!!