Country specific phone number validation with ASP.NET

Challenge:

Before few weeks back, I have been assigned a task, Where I need to validate a phone number. Sound simple? Yes it is! But I needed to do it country specific? Now, how it sounds?
Basically, User will have a list of countries to select. And based on his/her country selection he/she will provide phone number and we should validate based on country selection. Sounds challenging? That’s how life should be!
You are also working on such thing and looking for a way to get out of it? Then this post is for you!

Solution:

As per every software engineer’s practice, I started my research and our common friend. Google presented option of using Regex for each country. But it sounded bit complex to me. Then continued my research and found a super hero!
LibPhoneNumberIt’s a library from Google champs to validate phone number (Excerpt from their main page — Google’s common Java, C++ and Javascript library for parsing, formatting, storing and validating international phone numbers. The Java version is optimized for running on smartphones, and is used by the Android framework since 4.0 (Ice Cream Sandwich).)
And after reading this description, It attracted me! (To you as well?). It’s good we found HERO. But how to fit him in our picture? Then after doing bit of a research found this two nice components:

  1. http://phoneformat.com/ — Javascript version of Google’s libphonenumber library
  2. http://libphonenumber.codeplex.com/ – C# port of Google’s libphonenumber

This was a Eureka moment. Just plugged both of this libraries with CustomValidator and you are done! So, here’s how CustomValidator clientside and server-side functions looks like:
Blogs
SUGIN
[sourcecode language=”html”]
<asp:<span class="hiddenSpellError">TextBox ID="txtPhone"  runat="server" />
<asp:<span class="hiddenSpellError">RequiredFieldValidator ID="reqTxtPhone"
runat="server" ErrorMessage="Please enter a phone number" Text="*" ControlToValidate="txtPhone"
></asp:RequiredFieldValidator>
<asp:<span class="hiddenSpellError">CustomValidator ID="custPhoneNumber" runat="server"
OnServerValidate="PhoneNumberValidate"
ErrorMessage="Please enter valid phone number"
Text="*"
ControlToValidate="txtPhone"
ClientValidationFunction="PhoneNumberValidate"
/>
[/sourcecode]

[sourcecode language=”javascript”]
/*
This function will be used to validate
Phone Number client side by CustomValidator
*/
function PhoneNumberValidate(oSrc,args) {
// Call PhoneFormat.JS function which takes Phone Number and Country Code
// in ISO 3166-1 format
var isValidNumberOrNot = isValidNumber(txtPhone.value, ddlcountry.value);
arg.IsValid = isValidNumberOrNot;
}
[/sourcecode]
[sourcecode language=”csharp”]
/// <summary>
/// This function will be used to validate
/// Phone Number server side by CustomValidator
/// </summary>
/// <param name="source">Source</param>
/// <param name="args">Arguments</param>
protected void PhoneNumberValidate(object source, ServerValidateEventArgs args)
{
PhoneNumberUtil phoneUtil = PhoneNumberUtil.Instance;
// TODO : EXCEPTION HANDLING
string countryCode = ddlcountry.SelectedItem.Value
if (string.IsNullOrEmpty(countryCode))
{
args.IsValid = false;
}
else
{
PhoneNumber phoneNumber = phoneUtil.Parse(txtPhone.Text, countryCode);
bool isValidNumber = phoneNumber.IsValidNumber;
args.IsValid = isValidNumber;
}
}
</span></span></span>
[/sourcecode]
Just a note : LibPhoneNumber accepts country code in ISO 3166-1 format. But if you’ve drop down Text and Value both in full form e.g. “India” and you need to pass it as “IN” and If it’s not possible to do any change at your DropDown value level then you can use function, Which has been submitted at — https://github.com/albeebe/phoneformat.js/issues/9 It converts CountryName to CountryCode
Happy Phone Number Validation! 🙂

Bootstrap with ASP.NET Basics and learnings

Challenge:

Howdy Folks, Sorry for being away from you for so long. But was occupied with lot of other things. But now, I’m here to share my learnings with you.
Before couple of weeks back, I’ve to create one functionality to make user’s task easy. I was clear with back-end code. And to make UI intuitive, I thought to use Bootstrap (If you are new to bootstrap, then I would recommend you to take a moment and give it a read here : http://en.wikipedia.org/wiki/Bootstrap_%28front-end_framework%29 and http://getbootstrap.com/)
Long story short, Bootstrap is a framework for creating UI more intuitive rapidly! Developed by Twitter champs!
And If you know Bootstrap, you must be knowing that how easy it is to integrate bootstrap with your application. And yes, you are right it is. But while working on it, I found few challenges and learnt something which I thought to share with you!
Let’s go!

Solution:

If you are new to bootstrap, and looking for a way to integrate it with your ASP.NET application, then following are a good read to do so:
If you are using VS 2013 then you don’t have to worry. Because MS guys has integrated bootstrap within it.
http://techcrunch.com/2013/06/27/microsoft-adds-bootstrap-support-to-visual-studio-2013/
http://www.asp.net/visual-studio/overview/2013/creating-web-projects-in-visual-studio#bootstrap
But if you are using VS < 2013 then this posts will surely help you:
http://geekswithblogs.net/JeremyMorgan/archive/2012/09/18/how-to-use-twitter-bootstrap-on-an-asp.net-website.aspx
http://www.mytecbits.com/microsoft/dot-net/bootstrap-3-0-0-with-asp-net-web-forms
http://elbruno.com/2013/10/02/vs2013-howto-create-a-website-project-in-visual-studio-using-bootstrap/
So, have you tried it? Looks simple, Correct? Till this point of time, everything was simple. But Life is not as simple as it seems to be!
So here are my learnings:

  1. Dismissable alerts : When I tried to use it (http://getbootstrap.com/components/#alerts-dismissable). It didn’t worked. Then figured out that it needs Jquery reference on a page. So, If you are facing same challenge, give it a try! Or if you are going to use first time, don’t do such mistake 🙂
  2. Modal : The default example of Modal given in documentation, didn’t worked for me. Then this tutorial helped me : http://www.w3resource.com/twitter-bootstrap/modals-tutorial.php
  3. Width of Modal Dialog : If you would like to change width of a modal dialog then here’s a way to do it: http://stackoverflow.com/questions/10169432/how-can-i-change-the-default-width-of-a-twitter-bootstrap-modal-box
  4. RequiredFieldValidation and Validation and State : Wanted to apply styling as shown here: http://getbootstrap.com/css/#forms-control-validation

Initially tried with RequiredFieldValidator. But due to it’s complexity avoided doing so. Then used CustomValidator, Here’s how ClientValidationFunction function looks like:
[sourcecode language=”javascript”]
function ValidateALTText(oSrc, args) {
var isValid = false;
// label label-warning
isValid = args.Value.trim();
if (isValid) {
$("#" + oSrc.id).prev(".form-control").parent().removeClass("has-error");
}
else {
$("#" + oSrc.id).prev(".form-control").parent().addClass("has-error");
}
args.IsValid = isValid;
}
[/sourcecode]

  1. Jquery Plugins : Cool, Jquey Plugins which has been designed to use with Bootstrap
    1. Wizard : Would like to create Wizard? http://vadimg.com/twitter-bootstrap-wizard-example/
    2. Confirm, Alert, Custom Dialog : If you would like to take a confirmation from user before doing postback then go for http://bootboxjs.com and if you are facing issue while showing confirmation box and doing postback then this thread will surely help you : http://stackoverflow.com/questions/20389205/bootbox-with-jquery-and-bootstrap-with-a-net-page-no-working/21433099#21433099
    3. FileStyle : Change look and feel of your file input box : http://markusslima.github.io/bootstrap-filestyle/

Found it useful? You have your own set of learnings? Why don’t you share it with all of us?
Happy Bootstraping! 🙂
Good reads:

  1. Twitter Bootstrap Tutorial : http://www.w3resource.com/twitter-bootstrap/tutorial.php
  2. The original list of resources and plugins for Bootstrap : http://bootsnipp.com/resources

 

JQuery, JSON with ASP.NET notes

Challenge:

Before couple of weeks back, was trying to implement Facebook like live updates in ASP.NET and JSON and while doing that, faced couple of challenges. Which I thought you may find interesting!
Would like to share challenges/tasks with you. So, you can also get benefited by it when you face them!

Solution:

  • Convert Generic List to JSON : Had a generic list, which comes from DB, and needs to pass it on to UI layer, in a JSON format, used System.Web.Script.Serialization.JavaScriptSerializer class for this [using System.Web.Script.Serialization]:

[sourcecode language=”csharp”]
// ……….
List<UserUpdate> userUpdates = new List();
while (sqlDataReader.Read())
{
UserUpdate userUpdate = new UserUpdate();
userUpdate.UserID = Convert.ToInt32(sqlDataReader["ID"]);
userUpdate.UpdateMessage = Convert.ToString(sqlDataReader["UpdateMessage"]);
userUpdates.Add(userUpdate);
}
JavaScriptSerializer javascriptSerializer = new JavaScriptSerializer();
string JSONString = javascriptSerializer.Serialize(userUpdates);
return JSONString;
[/sourcecode]
Just a note : If you are doing Response.Write then please do change your page’s content-type to JSON — Response.ContentType = “application/json; charset=utf-8”;

  • After every 2 second update right side data using AJAX and JSON : There will be a sidebar sitting in right side of a page and after every X seconds, it should get updated with latest updates from application:

To do this, added one UL tag on page, which will hold all data:
<ul id=”user-updates”>
</ul>
Added JavaScript on page, which checks for update every 2 second and prep ends to UL tag:
[sourcecode language=”javascript”]
<script type="text/javascript">
var url = "UserUpdates.aspx"; //This page returns JSON
var userID;
$(document).ready(function() {
// Initially all data
$.getJSON(url, function(result) {
$.each(result, function(i, field) {
userID = field.UserID;
$("
<ul>
<li><i class=’icon-text-width’>" + field.UpdateMessage + "</li>
</ul>
")
.hide().prependTo(‘#user-updates’).slideDown("slow");
});
});
setInterval(function() {
$.getJSON(url, { UID: userID }, function(result) {
$.each(result, function(i, field) {
userID = field.UserID;
$("<li><i class=’icon-text-width’></i><span>" + field.UpdateMessage + "</span> </li>")
.hide().prependTo(‘#user-updates’).slideDown("slow");
});
});
}, 2000);
});
[/sourcecode]

  • JQUERY Prepending an LI to an UL with Animation — When any new LI gets added to UL, it should come as an Animation – and invested, lot of time to achieve this requirement and finally, following link worked! [Thanks!]

http://stackoverflow.com/questions/2883154/jquery-prepending-an-li-to-an-ul-with-animation

  • Rather than showing DateTime wanted to say “Two days ago/2 seconds ago” etc. message : – Following threads helped to do so! [Thanks!]

C# solution : http://stackoverflow.com/questions/11/how-do-i-calculate-relative-time
JavaScript based solution : http://www.aspdotnet-suresh.com/2012/02/jquery-display-time-in-facebook-twitter.html
Simple, yet powerful? Learnt a lot!
I would suggest all of you, to take a simple project for fun and try to implement it, Trust me, It will be full of fun! And you will learn a lot, and most IMP. these learnings will not go away from you for a long time. Because you learnt it with fun! Have you forgotten how to play Cricket? How to Ride a bicycle etc.? Because you learnt it funny way not in a pressurized way! 🙂
Also, If possible do blog your learnings!
Happy Coding! 🙂

CodeMirror basics

Challenge:

In our web application, we do provide HTML/CSS/JS editing functionality. We wanted to provide Syntax Highlighting feature for that, and after doing bit of our research we finalized to use:
Code Mirror — http://codemirror.net/  It’s just awesome!
We implemented and incorporated it with our application, and it was working fine, with FF, Chrome. But but here comes IE — (I know we all face lot of challenges with IE), it was causing following issues:

  1. Scroll bar flickering
  2. When we type anything it moves it’s position

What, you are also facing the same problem? Our solution might work with you as well

Solution:

After Investing a lot of time, we found that our page’s DOCTYPE was enforcing our page to run in Quirks mode, and CodeMirror and Quirks mode — are enemies! 🙂
See following excerpt from [Supported browsers section] : http://codemirror.net/

The following desktop browsers are able to run CodeMirror:

  • Firefox 3 or higher
  • Chrome, any version
  • Safari 5.2 or higher
  • Opera 9 or higher (with some key-handling problems on OS X)
  • Internet Explorer 8 or higher
  • Internet Explorer 7 (standards mode) is usable, but buggy. It has a z-index bug that prevents CodeMirror from working properly.

Note that CodeMirror is only supported in standards mode. So not quirks mode, but also not the quasi-standards mode that IE gives you when you specify a transitional doctype. Simply using the HTML5-style <!--doctype html> is recommended.

Now, the solution is simple, just change DOCTYPE to standards mode and you are done! But “life is not as easy as it seems to be” 🙂
Because if your application’s UI has been designed as per quirks mode than you can’t change it directly, Because it might make your CodeMirror working. But can break N number of things!
Don’t worry, we got a solution for you!
In our case our CodeMirror editor was in an I-Frame and using this trick, we resolved it! — http://stackoverflow.com/questions/5391495/can-i-have-doctype-in-iframe-different-from-hosting-page
Basically, change the DOCTYPE of your I-Framed page, and you are done!
Happy Coding! 🙂

Uploadify (Session and authentication) with ASP.NET

Challenge:

Sorry, comrades for not sharing anything with you since so long. But was bit occupied with other stuff, and as told you earlier that currently my main focus is on my Sitecore blog and yes, with your good wishes and god’s grace — got awarded as Sitecore MVP for the year of 2013! – Thank you!
Before couple of months back, we were trying to incorporate Uploadify [http://www.uploadify.com/documentation/] in to our solution. And while working on that we came across with Flash session bug, due to use Session, authentication and authorization — it means if your user is logged in and if your file upload operation wants that only logged in users can upload file then it won’t work with Uploadify by default. Don’t worry, we have a way to get out of it!

Solution:

I asked solution of this challenge to our common friend — Google, and found really interesting links:
http://joncahill.zero41.com/2009/11/problems-with-uploadify-aspnet-mvc-and.html

“Basically the issue is with flash where it will ignore the browser’s session state and grab the cookies from IE, which is a known and active bug. This means that both Chrome and Firefox won’t work with Uploadify and authorisation because flash will send no cookies! It also means it is entirely possible for it to have previously work for me while testing because I probably also had a IE window open and logged in while testing, which would have given me a valid cookie.”

http://trycatchfail.com/blog/post/2009/05/23/using-flash-with-aspnet-mvc-and-authentication.aspx

There is a well-known bug in Flash that causes it to completely ignore the browser’s session state when it makes a request.  Instead, it either pulls cookies from Internet Explorer or just starts a new session with no cookies.  GOOD CALL, ADOBE.  And when I say this bug is well-known, I mean it was reported in Flash 8.  It’s still sitting in the Adobe bug tracker.  It has been triaged, it seems to have high priority, yet it remains unfixed.  Again, GREAT job, Adobe.

http://geekswithblogs.net/apopovsky/archive/2009/05/06/working-around-flash-cookie-bug-in-asp.net-mvc.aspx
http://stackoverflow.com/questions/1729179/uploadify-session-and-authentication-with-asp-net-mvc
Big thanks to all these article writers. Because it only helped us to find a solution. Using this solutions we were able to make session working. But authentication and membership information was not working . But we modified a bit in Global.asax and it started working. So, let me share a final solution with you:
1.  Pass session related information from your upload page in your upload call:
Just a note : This javascript code also covers other challenges as well (Which are not in scope of this article. But you may find it helpful!) e.g. passing dynamic data via onUploadStart, sending formdata via settings, showing uploadresult etc. The main variables which does the trick are — RequireUploadifySessionSync,SecurityToken,SessionId
[sourcecode language=”html”]
<script type="text/javascript">
var UploadifyAuthCookie = ‘<% = Request.Cookies[FormsAuthentication.FormsCookieName] == null ? string.Empty : Request.Cookies[FormsAuthentication.FormsCookieName].Value %>’;
var UploadifySessionId = ‘<%= Session.SessionID %>’;
$("#file_upload").uploadify({
‘buttonImage’: ‘/MultipleUploads/_scripts/browse-btn.jpg’,
‘scriptData’: { RequireUploadifySessionSync: true, SecurityToken: UploadifyAuthCookie, SessionId: UploadifySessionId },
‘formData’: { ‘KeyA’: ‘AValue’, ‘KeyB’: 1, RequireUploadifySessionSync: true, SecurityToken: UploadifyAuthCookie, SessionId: UploadifySessionId, UserName: UploadifyUserName }, // If some static data
‘auto’: false,
‘multi’: ‘true’,
‘swf’: ‘_scripts/uploadify.swf’,
‘uploader’: ‘<%= ResolveUrl("FileUploads.aspx") %>’,
‘onUploadStart’: function (file) {
// for all dynamic data
var objCheckUnPack = document.getElementById("chkUnpack");
var objCheckOverwrite = document.getElementById("chkOverwrite");
//                    alert(objCheckUnPack.checked);
//                    alert(objCheckOverwrite.checked);
$("#file_upload").uploadify("settings", "formData", { ‘IsUnPack’: objCheckUnPack.checked, ‘IsOverwrite’: objCheckOverwrite.checked });
//http://stackoverflow.com/questions/10781368/uploadify-dynamic-formdata-does-not-change
},
‘onQueueComplete’: function (queueData) {
alert(queueData.uploadsSuccessful + ‘ files were successfully uploaded. And there were few errors during upload for this number of files : ‘ + queueData.uploadsErrored);
window.open(‘<%= ResolveUrl("FileUploadResultPage.aspx") %>’, ‘Test’, ‘width=300,height=300’);
}
});
});
[/sourcecode]
2. Now, in Global.asax we have to handle this variables:
[sourcecode language=”csharp”]
protected void Application_BeginRequest(Object sender, EventArgs e)
{
// This check will ensure that we need to sync session only during uploadify upload!
if (HttpContext.Current.Request["RequireUploadifySessionSync"] != null)
UploadifySessionSync();
}
/// <summary>
/// Uploadify uses a Flash object to upload files. This method retrieves and hydrates Auth and Session objects when the Uploadify Flash is calling.
/// </summary>
/// <remarks>
///     Kudos: http://geekswithblogs.net/apopovsky/archive/2009/05/06/working-around-flash-cookie-bug-in-asp.net-mvc.aspx
///     More kudos: http://stackoverflow.com/questions/1729179/uploadify-session-and-authentication-with-asp-net-mvc
/// </remarks>
protected void UploadifySessionSync()
{
try
{
string session_param_name = "SessionId";
string session_cookie_name = "ASP.NET_SessionId";
if (HttpContext.Current.Request[session_param_name] != null)
UploadifyUpdateCookie(session_cookie_name, HttpContext.Current.Request.Form[session_param_name]);
}
catch { }
try
{
string auth_param_name = "SecurityToken";
string auth_cookie_name = FormsAuthentication.FormsCookieName;
if (HttpContext.Current.Request[auth_param_name] != null)
{
FormsAuthenticationTicket ticket = FormsAuthentication.Decrypt(HttpContext.Current.Request.Form[auth_param_name]);
if (ticket != null)
{
FormsIdentity identity = new FormsIdentity(ticket);
// This helped us to restore user details
string[] roles = System.Web.Security.Roles.GetRolesForUser(identity.Name);
System.Security.Principal.GenericPrincipal principal = new System.Security.Principal.GenericPrincipal(identity, roles);
HttpContext.Current.User = principal;
}
UploadifyUpdateCookie(auth_cookie_name, HttpContext.Current.Request.Form[auth_param_name]);
}
}
catch { }
}
private void UploadifyUpdateCookie(string cookie_name, string cookie_value)
{
HttpCookie cookie = HttpContext.Current.Request.Cookies.Get(cookie_name);
if (cookie == null)
cookie = new HttpCookie(cookie_name);
cookie.Value = cookie_value;
HttpContext.Current.Request.Cookies.Set(cookie);
}
[/sourcecode]
Happy Uploading via Uploadify! 🙂

Opening a Jquery UI Modal Dialog shows a scroll bar on parent page

Howdy my dear readers, I hope you must be doing great!
Yes, I’m back here to write a new blog post after so long time. Sorry for not sharing anything with you since so long. But got busy with lot of bits and pieces. But it’s good to be busy, the busier you are the more you have to share!

So, keep visiting – going to share more with you in upcoming days! [Free advice: You can subscribe to this blog via EMAIL SUBSCRIPTION box given in right side – which means that whenever any new post gets posted here, you will get an email!]

Challenge:

I got a chance to use Jquery UI‘s Modal dialog in my application. Now, whenever we used to open a dialog and when we open it, it was showing scroll-bar on parent page.

Solution:

After doing a bit research and finally thought to use following solution, which worked for us:
http://forum.jquery.com/topic/opening-a-modal-dialog-shows-a-horizontal-scroll-bar [Main logic lies in open and close event!]
Basically, above solution sets body’s overflow to hidden in open event and auto in close event. Which works fine for all browsers except IE7.  What’s the solution? Why?
Solution is you need to set overflow hidden of html element as well along with body.
Why so?
Excerpt from http://stackoverflow.com/questions/4443006/body-overflow-hidden-problem-in-internet-explorer-7

Applying overflow-x:hidden or overflow-y:hidden; to the body element of the document will not work. The overflow-x:hidden or overflow-y:hidden must be applied to the html element, not body element.

Happy Coding! 🙂