Emad Mokhtar's Framework

Client-side Validation in ASP.NET webforms by using jQuery

2010-07-20T09:56:20.497+03:00

Hello folks, on July 9th 2010, I'd spoken on EgyGeeks online community about Client-side Validation using jQuery in ASP.NET webforms, and I thought I'll share the session as a blog post, so let's start

Why using Client-side validation?

Web developers love to use Client-side validation to increase their web application user experience "UX", to make web application feels like the desktop application, and to reduce the round-trip to web server to validate the user inputs every time he/she submit a page.

Demo:

First of all I'm using one of the oldest and the first jQuery validation plugin called validation, please take a look ot its documentation for more info. [link]

Let's create a simple ASP.NET page to apply some of validation rules on:

First name:




Password:


Password Confirmation:




Email Address:

Now let's write our jQuery code to apply some validation rules on this ASP.NET form, but first make sure you create a link for jQuery .js file and the plugin validation.js file into the aspx page or you can use the Microsoft CDN version {hosted on Microsoft servers} " http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js" "http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.js ":

As you can see it's so simple and easy to apply these validation, like required rule, which means this field is required field, and apply the email RegExp with email: true.

The .validate() function takes 2 parameters {rules, messages}, rules is the validation rules you want to apply, and message is the text message you want to appear to the user if he doesn't apply your validation rules on his inputs, and BTW message is optional {overload .validate() function} you can let the plugin display the default message according to the rule itself, for example here I let the plugin display the default message for TxtPassword Required rule.

Note: please use ASP.NET 4 new feature {ClientIDMode}, or use <%= txtFirstName.UniqueID %> when writing the Control ID inside jQuery script.

Please for more validation rules read the documentation I refer above.

Del.icio.us : jQuery ASP.NET Validation
Technorati : jQuery ASP.NET Validation

My Journey with Diet

2010-07-12T17:43:57.434+03:00

In November 2009 I decided to change my life from unhealthy to healthy lifestyle and lose weight to be healthy person, and this was a big and hard decision to make it's like paradigm shifting so that I should be careful with every step I take and analyze what to do next and how to it right.

My Journey step:

First step I went to nutrition doctor rather than going to gym like most of Egyptian men do, which all they do is burn fat and left some weights but still eating junk food, which I think it's an awful thing to do, because you solve one part of the puzzle and left the other parts unsolved.

Second step start to love healthy food and walk for long durations and distances, but I did this step in baby steps style, which made it a habit rather than something to do to lose weight, for example I start to walk for small distance if there's no transportation to it, or if this distance will take 10 minutes to reach OK then walk rather than ride a transportation, and Thanks for my iPod, I love walking while listing to my favorite music, and right now I'm working on running, I hope I'll make habit also :D

Third step is mastering what's to eat and what's not to eat? After 3 or 4 months on diet I start to understand what is healthy food? How to cook it in home? And I learned how to make it perfect healthy food (I'll define it later), and this's what makes me love healthy food.

The intelligent thing to do is to know how to cook the perfect healthy food, and its hard thing to accomplish on the first diet days, but keep on and you'll.

I have a definition for 3 kind of food which is (IMHO):

Healthy Food: Food usually looks awful and has bad taste, but its health and gives you the energy in need.
Unhealthy Food (Junk Food): Food usually looks nice and taste good, but gives you unnecessary fat and calories.
Perfect Healthy Food: Food usually looks nice and taste good, it's like combination of healthy food and junk food, and this kind of food is very useful when you're in diet.

My journey in losing weight (form 160 Kg to 110 Kg till now) was too damn hard but the benefits was huge, all my back and knee pains gone, and I'm feeling that I'm very light even sometimes when I'm walking people think I'm running, but actually it's brisk walking.

Some Advices:

Nutrition Doctor: Go to nutrition doctor, and please be honest with him, if he ask about your eating habits tell him everything , and during diet if there's something wrong tell him next visit and he/she will solve this problem, and he/she will make some blood tests to check your health status and will try to heal you, like my doctor she's found out the I'd Anemia and she heal it within 2 months.
Drink: Try to drink a lot, drink a lot of water, tea, coffee, herbals, non-alcoholic beer, diet soda, and skimmed milk, It's helps you to avoid the hunger feeling, trust me it's works even sometimes I feel like I'm drinking more that eating :D.
Diet Plan: Try to stick with you nutrition doctor diet plan.
Walk, walk, walk: It's very important thing to do during diet, walk whenever it can be, park your car 10 minutes away from your work so you'll walk for 20 minutes every day, take stairs if you can like in malls for example.
Free Meal: In diet plan there's a one free meal per week, eat it whenever you want but don't make it's time static, take it when you want to eat or miss junk food; during diet this meal is very special because you eat whatever you like.
Frustrations: If you measure your weight and find out that it's increasing don't frustrate it's not a big deal keep on diet and you'll lose it, just keep persisting, and keep negative thoughts away, and remember you're breaking a habit and this's a very hard thing to do but not impossible.
Sugar: Stop using white and brown sugar and use fruit sugar instead, it's useful for diet and diabetic people, I use pocket CANDEREL sugar.

Note: I'm still on diet as I said my weight now is 110 Kg and my perfect weight is between 95 and 85.

ASP.NET 4 Validation Controls

2010-06-21T12:54:17.689+03:00

Hello folks today I'm going to review ASP.NET 4 validation controls in Visual Studio 2010; first let's explain why we need validation on our web application first.

Why do we need Validation in our web application?

For many reasons, I can't cover all here, but I'll cover most important reasons, which are:

Validate user input data: sometimes you need to make sure user puts the correct information in correct field, or correct type of information in its corresponding field.
Avoid XSS "cross-site scripting": one of way to avoid XSS from your web application is to validate the inputs from unreasonable characters.
Avoid SQL injection: validate the input parameters save your web application form SQL Injection attacks.

Note: To build secure web application, make sure Validation implemented on client-side and server-side.

Microsoft ASP.NET did a great job to make this easy task on web developer by implement both Server-Side and Client-Side in ASP.NET validation controls; even if you want to implement other client-side framework like jQuery or write your own client-side Javascript validation rules you can disable the client-side validation function in ASP.NET validation control.

First let's examine the validation controls that ASP.NET provides for us:

ASP.NET Validation Controls:

CompareValidator: this control let you compare 2 user inputs, like make sure user puts the password twice correctly.
CustomValidator: this control let you build/write your own Validation rule, both Server-side and client-side.
RangeValidator: this control validates the input parameters with specific range with maximum and minimum value.
RegularExpressionValidator: this control helps you implement a custom regular expression to validate the input data against, like telephone number.
RequiredFieldValidator: this control is to make sure user fill this field, like Username.
ValidationSummary: this control displays the summary of all Validation info on the page, to make sure user know what's wrong with his inputs.

Tip: you can use those Regular Expression cheat sheets to build your custom one. [link][link], or use this Regular Expression builder web app [link]

Second, let's build a sample an ASP.NET web from and implement some validation controls:

First Name:

Here we used RequiredFieldValidator to make sure user input his First name on the TxtFirstName TextBox by adding ControlToValidate="TxtFirstName" attribute, and customize the message will be display if there's validation error ErrorMessage="This field is required".

Last Name:

Here we used RegularExpressionValidator to validate that user enter at least 3 characters in the Last name TextBox by add this regular expression [0-9a-zA-Z]{3,}.

Email Address:

And here another implementation for RegularExpressionValidator, but this time to validate the user email address and here's the regulat expression for Email address ^([0-9a-zA-Z]([-.\w]*@([0-9a-zA-Z][-\w]*[0-9a-zA-Z]\.)+[a-zA-Z]{2,9})$

Age:

We implement RangValidator to make sure user age is between 13 and 85 years old.

Finally, I built a sample webform to demonstrate what ASP.NET Validation Controls can do, and here's the download link

Good bye Egypt, Good bye Cairo

2010-05-20T13:39:58.84375+03:00

Hello folks,

I'm writing this post because I'll travel to Kuwait to start my career there, I hope I'll make it in the best way, and please wish me good luck.

Good bye black sky, good bye traffic jams, good bye chaos, and good bye Egypt.

I'm leaving Egypt, Cairo, and leaving with them my best friends ever, my memories (good and bad), the best IT community ever, my geek friends, and very special person.

Leaving this special person like leaving a piece of my heart here in Egypt, so I'll get back and collect it ASAP, none can live without this piece.

In the last year here in Egypt I done a lot of activity like volunteered in Cairo CodeCamp 2010 and the Visual Studio 2010 community lunch, met new wonderful friends; I hope I can do the same in Kuwait.

So Good bye my friends I wish you the best and see you in the best state.

Best Regards,

Emad Mokhtar

Web Developer Poetry

2010-05-15T23:43:38.125+03:00

Today when I was waiting for the band of Tanora Show to get started, I wrote this poetry for someone special.

She SEO my life

She turns my 0'z to 1'z

She nudges my feelings

She is my RSS of my life

If you Google my heart you'll find her

She is a Hashtag of my soul

She is a Love entity in my HeartDB

She is system file of my memory

She is a Silverlight of my future

She autocomplete my thoughts

She ReadyBoost my motivation

And I Favorite/Bookmark here :D

What is Pomodoro Technique?

2010-05-14T15:53:07.703+03:00

Hello folks, in this post I'll explain technique I use it to get things done in my life like Reading, or development tasks; this technique called Pomodoro technique.

What is Pomodoro Technique?

It's a time management system; It's simple, and very productive.

Pomodoro is tomato in some language "Google it and see", it's inspired by the kitchen timer that take a shape of Tomato, and the timing of the technique is based on the kitchen timer.

And here's link for more information [link]

How to use/implement Pomodoro Technique?

It's very simple and easy to use, there's a number of apps implement it, even you can use a kitchen times unless you're in your company office :D.

Let's start explain how to use it:

Allocate a certain task you want to get it done.
Do it for 25 minutes.
And take a 5 minutes break.
Repeat step 2 & 3 4-times.
And then take 30 minutes beak.
And start from step 2 again, and if you finish the task start from the beginning.

Please don't panic like I said there's a lot of apps implement Pomodoro Technique, and that's make life more easily, I'll review one of the most app used for PT.

Focus Booster:

Focus Booster is my favorite pomodoro technique app, it's developed over Adobe Air so it is cross-platform, and it's free.

http://www.focusboosterapp.com/

The UI:

It's very simple just run the application and press the green play button and the timer will decreased until it reach 00:00 and the green bar increased and change its color to the degrees of red (orange and red).

When it reached 00:00, it'll fire tiny alarm to remind you that's your break time.

During break time the timer reset to 05:00 and decreased to 00:00 and the bar also decreased with it; when the timer reach 00:00 the same tiny alarm will fire to remind you to start you job/30 min break.

What I can do in the break time?

Anything you are like to do in your free time and not related to the task, you can check Twitter, Facebook, Emails, or even read regular blog posts, go out to get fresh air, go check your family, make your drink, take a shower, etc…

For me I like to make my coffee, go pray in the mosque, in the 30 min break I talk a walk, or sometimes check my Emails, Facebook, or Twitter.

So folks I wish this technique helps you in Get Things Done in more productive way; and remember Time is very important thing or our life actually it's our life, so spend it wisely.

Del.icio.us : GTD, productivity
Technorati : GTD, productivity

10 Things you need to know about sleep

2010-05-09T23:29:15.904+03:00

BBC created this phenomenal show which called "10 things you need to know about sleep" to gain better sleep experience and the relaxation to face the new day.

I'll put the video clips of every one of 10 things and the conclusion after it, so let's start:

Number 1: Warm Bath

> > >

Take a warm bath one hour before going to bed

Number 2: How to Beat Insomnia

> > >

To beat insomnia stay in bed only to sleep.

Number 3: When to Nap

> > >

Want to take a nap, take it in the afternoon "2 PM - 5 PM".

Number 4: How to stop Snoring

> > >

If you are a snorer don't worry there's a lot ways to stop this, but if you're a heavy snorer please consult your doctor.

Number 5: Don't mess with your sleep cycle

> > >

Don't drink Coffee or Alcohol more than 4 hours before bed.

Number 6: The Power of Daylight

> > >

Keep the curtains shut to block the daylight.

Number 7: Eat to Sleep

> > >

Protein meals perk you up, and Carbohydrate meals help you sleep.

Number 8: Beat Jet-lag

> > >

To avoid jet-lag avoid eating during the whole flight and drink when you'll arrive.

Number 9: Relax

> > >

If you've problem in sleeping try to tense and relax your muscles for 15 minutes.

Number 10: Herbal Potions

> > >

The smell of herbs may help you sleep.

Summary:

Take a warm bath one hour before going to bed.
To beat insomnia stay in bed only to sleep.
Want to take a nap, take it in the afternoon "2 PM - 5 PM"
If you are a snorer don't worry there's a lot ways to stop this, but if you're a heavy snorer please consult your doctor.
Don't drink Coffee or Alcohol more than 4 hours before bed.
Keep the curtains shut to block the daylight.
Protein meals perk you up, and Carbohydrate meals help you sleep.
To avoid jet-lag avoid eating during the whole flight and drink when you'll arrive.
If you've problem in sleeping try to tense and relax your muscles for 15 minutes.
The smell of herbs may help you sleep.

At last I hope and wish a deep sleeping at night, take care all.

Del.icio.us : Life, LifeStyle
Technorati : Life, LifeStyle

ASP.NET 4 webforms new feature: ClientIDMode

2010-05-04T21:17:52.214+03:00

Today we'll examine ClientIDMode the new feature of ASP.NET 4 which makes life easier on developers when writing client-side scripting/code like javascript or jQuery.

ClientIDMode control property:

You can assign ClientIDMode property for ASP.NET controls which is take 4 values

AutoID
Inherit
Predictable
Static

And I'll demonstrate what the different between those 4 values.

Demo:

We've simple ASP.NET 4 page with Master page, with one button on it, and We'll set the ClientIDMode for the button control and examine what's happen when ASP.NET render it to HTML.

AutoID:

<asp:Button ID="btnSubmit" runat="server" Text="Button" ClientIDMode="AutoID" /> >

The Rendered HTML:

id="ctl00_ContentPlaceHolder1_btnSubmit" />>

It's rendered like what ASP.NET 3.5 do, so if you want to renter control's ID like ASP.NET 3.5 set ClientIDMode to AutoID.

Inherit:

<asp:Button ID="btnSubmit" runat="server" Text="Button" ClientIDMode="Inherit" /> >

The Rendered HTML:

id="btnSubmit" /> >

Actually it tells the control to defer to the naming behavior mode of the parent container control

Predictable (default):

<asp:Button ID="btnSubmit" runat="server" Text="Button" ClientIDMode="Predictable" /> >

The Rendered HTML:

id="ContentPlaceHolder1_btnSubmit" /> >

Remove the ugly default auto generated ID prefix "ctl00"

Static:

<asp:Button ID="btnSubmit" runat="server" Text="Button" ClientIDMode="Static" /> >

The Rendered HTML:

id="btnSubmit" /> >

It'll rendered the ID like what you set for ID attribute

Where you can set the ClientIDMode:

Web.config:

You can set the ClientIDMode in web.config file inside page tag

< system.web> >

< pages ClientIDMode="Static" /> >

< compilation debug="true" targetFramework="4.0" /> >

system.web> >

configuration> >

Control:

Or you can set it for specific control, but remember the main control is inherit this property, and this what we do in the demo.

<asp:Button ID="btnSubmit" runat="server" Text="Button" ClientIDMode="Static" /> >

Page:

Or you can set the ClientIDMode on the page tag in the upper of ASPX file.

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Demo.aspx.cs" Inherits="ClientIDModeDemo.Demo" ClientIDMode="Static" %>

Interesting paragraph in 7-Habits of Highly Effective People

2010-05-02T19:13:04.652+03:00

Yesterday when I was reading 7 Habits of high Effective People, I read extremely interesting paragraph in habit no 2 "Begin with the end in mind" which talk about work-centered people

The paragraph:

Work-centered people may become "workaholics" driving themselves to produce at the sacrifice of health, relationships, and other important areas of their live. Their fundamental identity comes from their work-"I'm a doctor", "I'm a writer", "I'm an actor". Because their identity and sense of self-worth are wrapped up in their work, their security is vulnerable to anything that happens to prevent them from continuing in it. Their wisdom and power come In the limited areas of their work, rendering them ineffective in other areas of life.

My opinion:

I think he's right most of us "Geeks" can be categorized in this kind of people. How many of us work in night? Who doesn't work in the weekend? Who doesn't spend most of his time with machine whatever PC, MAC, Notebook, Workstation, Servers, etc.?

In other hand if you look and examine the life of the most effective Geeks in our community, you'll see they spend more time with their family and friend who can be not a geeky person why not?, they schedule their time to work in the early morning, organize their tasks, they eat, sleep, and do some sports to take care of their health.

This paragraph change my paradigm of working and been a workaholic and ignore important things of my life, actually this book is changing my life to the better way, It's the most selfhelp/selfdevelopment book I ever read.

Del.icio.us : life lifestyle
Technorati : life lifestyle

How to send tweets to email?

2010-04-15T16:39:48.703125+03:00

You can send your tweets to email by using the new Twitter-based service called TweetToEmail.

What is TweetToEmail?

Is a free service help you to send your tweets to your non-twitter contacts in their Email inbox, It's another application of integrate Twitter with another service Like Ping.fm do.

How is it work?

It's very simple, first you must sign-up on the Website and integrates your Twitter account.

Then Second create a contacts group give it a name and assign a HashTag for it from the list.

Third add contacts (Name, and Email) to this group.

The last thing you need yo do is to put that HashTag in the tweet you want to send to group's contacts email.

Let's give it a test

I add my Gmail email into group called Me and assigned #TM2 HashTag to it,

then I send a test tweet with #TM2 in it,

and *Boom* this tweet got into my email inbox.

One missing piece

The information on the Website is few, just a 3 steps with description I advice the Co-Founder "Ali Bin Yahia" to make an image review for the service to be more clear for any person.

Conclusion

It's very good and useful service in some situations, I encourage you to give it a test there's nothing to lose, and follow @tweettoemail for the latest information about the TweetToEmail service.

Del.icio.us : service, tweet, twitter
Technorati : service, tweet, twitter