Using AJAX Textbox Extenders

Posted by DreamBig | 4:41 AM

Introduction

In this tutorial we will see some of the extenders provided by AJAX Toolkit. We can enhance the functionality of TextBox.

In this tutorial both ways of adding extenders are mentioned; i.e. in mark up source and in design time.

We will discuss the following textbox extenders:

  1. Watermark Extender
  2. Filtered TextBox
  3. Masked Edit TextBox and Masked Edit Validator
  4. Calendar Extender
  5. Validator Callout Extender
  6. Auto Complete Extender
  7. Password Strength Extender

1. Watermark Extender


Watermark is an untouchable text; that usually helps us for guidance. Consider you are typing your data (e.g. First name, last name, etc.) into the text box. You can have watermark text to guide you for the process.

The following image displays the watermark in the text box for searching.



As soon as you click inside the textbox to type, the watermark becomes invisible.

The following steps will help you to use watermark extender for the textbox.

  1. Add a textbox to the web page.
  2. Add extenders by clicking the arrow flag on the top right corner of the text box.
  3. Select Watermark Extender from the available list.
  4. Now in the property page of the textbox you can see the extender's property as in the following figure.

  5. As above you can change the property you wanted and you will get your watermark for your textbox.

The mark up source for the extender is as follows:

<asp:TextBox ID="txtWatermark" runat="server" Width="200px">asp:TextBox>
<cc1:TextBoxWatermarkExtender ID="txtWatermark_TextBoxWatermarkExtender" runat="server"
Enabled="True" TargetControlID="txtWatermark" WatermarkText="Type Your Search Here">
cc1:TextBoxWatermarkExtender>

2. Filtered TextBox

While developing an application we are more concerned about the user inputs. As we treat the user as crazy, meaning the user can give anything as input. While taking the search or query or the data, we need to filter it.

We can extend our textbox to filter the user input. The available filter type options are as follows:

  • Numbers (Only numbers can be taken as input.)
  • Uppercase letters (Only Uppercase letters can be taken into input)
  • Lowercase letters (Only Lowercase letters can be taken into input)
  • Custom (Character list can be added for customizing the user input)

The basic idea behind filtered text box is that, the user cannot type Invalid characters into the textbox. The following procedure is followed for achieving filtering.

  1. Add a textbox to the web page.
  2. Add extenders by clicking the arrow flag on the top right corner of the text box.
  3. Select Filtered Textbox Extender from the available list.
  4. Now in the property page of the textbox you can see the extender's property as in the following figure.

  5. As above you can change the property you wanted and you will get your filtered textbox.

The mark up source for the extender is as follows:

<asp:TextBox ID="txtFiltered01" runat="server" Width="200px">asp:TextBox>

<cc1:FilteredTextBoxExtender ID="txtFiltered01_FilteredTextBoxExtender" runat="server"

Enabled="True" FilterType="Numbers" TargetControlID="txtFiltered01">

cc1:FilteredTextBoxExtender>

3. Masked Edit TextBox and masked edit validator

In some cases you will be demanding a textbox which can take input as numbers only and it would be display as a valid date or valid number or even time. Here is the solution for you, masked edit extender for textbox provides you the textbox which can format user input into valid number, date and time.

We can mask a particular textbox for the following mask types:

  • Date
  • Number
  • Time
  • DateTIme

Consider the following figures, which displays date and number as masked type.

We can achieve masked edit textbox by following the below steps.

  1. Add a textbox to the web page.
  2. Add extenders by clicking the arrow flag on the top right corner of the text box.
  3. Select MaskedEdit Textbox Extender from the available list.
  4. Now in the property page of the textbox you can see the extender's property as in the following figure.

  5. As you can see from the above figure by changing some properties we can achieve the masked edit textbox.

The markup source for the extender is as follows.

<asp:TextBox ID="txtMaskedEdit" runat="server" Width="200px">asp:TextBox>

<cc1:MaskedEditExtender ID="txtMaskedEdit_MaskedEditExtender" runat="server"

Enabled="True" Mask="99/99/9999" MaskType="Date" TargetControlID="txtMaskedEdit"/>

<cc1:MaskedEditValidator ID="MaskedEditValidator1" runat="server" ControlExtender="txtMaskedEdit_MaskedEditExtender" ControlToValidate="txtMaskedEdit" Display="Dynamic" EmptyValueMessage="A Date is Required" InvalidValueMessage="The Date is Invalid" IsValidEmpty="False" TooltipMessage="Please Enter a Date"/>

4. Calendar Extender

This is an extender which provides a calendar control dynamically and provides the date when it is chosen.

We can use a particular textbox to show the calendar dynamically. The following figure describes our requirement.

The following steps are to be followed to achieve the above.

  1. Add a textbox to the web page.
  2. Add extenders by clicking the arrow flag on the top right corner of the text box.
  3. Select Calendar extender for textbox from the available list.
  4. Now in the property page of the textbox you can see the extender's property as in the following figure.

  5. As from the above figure you can see we can change specific properties the calendar can be popped up. Note that to use image to pop up calendar use PopupButtonId property.

The mark up source for the extender is shown below.

<asp:TextBox ID="txtMaskedEditButton" runat="server" Width="200px">asp:TextBox>

<cc1:CalendarExtender ID="txtMaskedEditButton_CalendarExtender" runat="server" Enabled="True"

Format="dd/MM/yyyy" PopupButtonID="imgCalendar" TargetControlID="txtMaskedEditButton"/>

<asp:Image ID="imgCalendar" runat="server" ImageUrl="~/Calendar.JPG" />

5. Validator Callout Extender

This extender is not exactly related to textbox, but it is related to Required Field Validator control. You could remember the Required Field Validator when it shows the error message it shows the message as it is labeled. Here adding this extender we can make the message as a callout.

The figure below describes the whole picture of using this.

Looks great isn't it. To use this extender you have to follow the below steps.

  1. Add a textbox to the web page.
  2. Add a RequiredFieldValidator and associate it with the target textbox.
  3. Add extenders by clicking the arrow flag on the top right corner of the RequiredFieldValidator.
  4. Select ValidatorCallout extender for RequiredFieldValidator from the available list.
  5. Now in the property page of the RequiredFieldValidator you can see the extender's property as in the following figure.

The markup source for the extender is shown below.

<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtCalloutValidator"

Display="None" ErrorMessage="Field cannot be empty"/>

<cc1:ValidatorCalloutExtender ID="RequiredFieldValidator1_ValidatorCalloutExtender"

runat="server" Enabled="True" TargetControlID="RequiredFieldValidator1"/>

6. Auto Complete Extender

This is an extender which helps the user to find out suggestions. You might have visited Google's suggestion page. It looks like the following figure.

Link: http://www.google.com/webhp?complete=1&hl=en



This is being used along with web service, which gives the related words for the search text.

We will use a simple version of this. The following figure shows about the basic idea about using the extender.



To achieve AutoComplete extender work for our textbox we need to have the Web Service where the logic for the word suggestion is written. We will use a simple logic.

The following code is for the Web Service.

[WebService(Namespace = "http://tempuri.org/")]

[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

[System.Web.Script.Services.ScriptService]

public class AutoComplete : WebService

{

public AutoComplete()

{

}

[WebMethod]

public string[] GetCompletionList(string prefixText, int count)

{

if (count == 0)

{

count = 10;

}

Random random = new Random();

List<string> items = new List<string>(count);

for (int i = 0; i <>

{

char c1 = (char)random.Next(65, 90);

char c2 = (char)random.Next(97, 122);

char c3 = (char)random.Next(97, 122);

items.Add(prefixText + c1 + c2 + c3);

}

return items.ToArray();

}

}

Now to add this extender to the textbox you need to follow the below steps.

  1. Add a textbox to the web page.
  2. Add extenders by clicking the arrow flag on the top right corner of the text box.
  3. Select AutoComplete extender for textbox from the available list.
  4. Now in the property page of the textbox you can see the extender's property as in the following figure.

The markup source for the above extender is as follows.

<asp:TextBox ID="TextBox1" runat="server" Width="200px" />

<cc1:AutoCompleteExtender ID="TextBox1_AutoCompleteExtender" runat="server"

Enabled="True" TargetControlID="TextBox1" ServicePath="AutoComplete.asmx"

ServiceMethod="GetCompletionList" MinimumPrefixLength="2" CompletionInterval="1000"

EnableCaching="true" CompletionSetCount="12"/>

7. Password Strength Extender

This is an excellent extender available for textbox. Usually for passwords we are not sure whether it is a strong password or not. Now AJAX is providing the extender for this, through this we can allow how many characters have to be allowed.

The following figure displays a sample password strength extender's work.

To use this extender in your textbox you need to follow the below steps:

  1. Add a textbox to the web page.
  2. Add extenders by clicking the arrow flag on the top right corner of the text box.
  3. Select PasswordStrength extender for textbox from the available list.
  4. Now in the property page of the textbox you can see the extender's property as in the following figure.

  5. We can have the Strength Indicator in two types such as Progress Indicator and Text Indicator.

The markup source for the extender is as followed:

<asp:TextBox ID="TextBox1" runat="server" Width="200px"/>

<cc1:PasswordStrength ID="TextBox1_PasswordStrength" runat="server"

Enabled="True" TargetControlID="TextBox1" DisplayPosition="RightSide"

StrengthIndicatorType="Text" PreferredPasswordLength="6" PrefixText="Strength: "

TextStrengthDescriptions="Very Poor; Weak; Average; Strong; Excellent"

MinimumNumericCharacters="2" MinimumLowerCaseCharacters="2"

MinimumUpperCaseCharacters="1" MinimumSymbolCharacters="1"

HelpStatusLabelID="Label1� TextCssClass="textIndicator"/>


Read More...

Nominate Yourself for the Microsoft MVP Award (India)

Posted by DreamBig | 1:51 AM

Microsoft awards the Most Valuable Professional (MVP) status to select individuals who are seen as active participants in technical communities like blogs, Internet forums, user groups, wikis, conferences, etc.

You neither have to be a geek nor an expert in Microsoft specific technologies to win an MVP award.

For instance, a technology blogger who writes about web applications or consumer software can be a perfect MVP candidate. You can check the MVP directory to know all about the current batch of MVPs and their area of expertise.

Now if you are based in India and like to become a MVP, please go ahead and fill the nomination form available on the MVP India site before April 18.

The MVP awards are announced every quarter so if you are not selected in the first attempt, you can re-nominate yourself in 3 months.

I have applied for Microsoft MVP and it definitely helps because you can try software betas even before they are released to public, you get access to private newsgroups and there’s plenty of learning material (including ebooks, webcasts, etc.) to enhance your existing skills. This PDF has more information about the Microsoft MVP Award.

Read More...

JAAGO RE! ONE BILLION VOTES INDIA

Posted by DreamBig | 9:29 PM

I took the first step!!!

I REGISTERED TO VOTE online. Right here! And got several BENEFITS on registering.

Now, I get:

- Updates on my voter registration status

- Voting and election related news for my city

- Even reminders on Election Day with my polling booth details!

Besides which, I got an opportunity to VOLUNTEER so I am spreading the word and also running my personal registration drive!
Why vote you say? Well, how else will you make your voice heard?
We all have ISSUES with the way things function. Let’s do something about it!

BE THE CHANGE YOU WANT SEE

Register to vote now! It's easier than you think.

REGISTER ONLINE at www.jaagore.com


Read More...

ThinkDigit.com - Think Digital

Posted by DreamBig | 11:09 PM

ThinkDigit.com - Your Online Technology Navigator

ThinkDigit.com - managed by 9dot9 Media is one of the hottest Tech Sites around.

For any of your tech related issues like software/hardware reviews,updates,issues,downloads & etc..,ThinkDigit.com is the place to be. The site includes various sections like Product Reviews,discussion forums,blog watch,downloads,free classified ads,videos,tech Q&A,iPoll & Subscribe.

Out of all this sections I personally would recommend you to visit the Product Reviews sections - which has some excellent hardware & software products reviews - Be it laptops,mobiles,digicams,CPUs,Motherboards, or anything you can get a perfect review for it.

Another must visit section are the discussion forums - For any of your tech queries the entire online tech community is there to help you - Like a hardware or software problem,buying tips,etc..

Visit the discussion forums here - http://http://www.thinkdigit.com/forum/

The best of the lot is the Classifieds sections where anyone can post free classified ads - for buying or selling products new & used like laptops,mobiles,digicams,Desktop PCs,Memory cards,CPU's & anything techy..

Visit the free classified ads section here - http://www.thinkdigit.com/digital_market.php

It also includes an introductory advertising offer:

Introductory classifieds advertising offer:

1. Online advertising offer for Rs. 5,000:
a. 125 x 125 pixels banner ad in the classifieds section of thinkdigit.

2. Combo Pack advertising offer(thinkdigit and in Digit Magazine) for Rs. 8,000:
a. 125 x 125 pixels banner ad in the classifieds section of thinkdigit.
b. 6 x 9 cm ad spot in the Digit magazine in either of the two sections:
i. Classified
ii. Web-Watch (Classified section for online businesses)

For any advertising enquiries in print or online, please contact us at business@thinkdigit.com

A great way to promote your products & services.

Also you can directly subscribe to the Digit Magazine online from the Subscribe section.

Although the site is cool but one improvement If I had to suggest would be that It's a Tech site so they should be more futuristic with their wes site design & approach & use the latest technology.

Other than that the information that ThinkDigit is providing is awesome...

So all you guys out there...dont miss to visit & register to ThinkDigit.com

Read More...

Forum NOKIA DEVELOPER CONFERENCE '2009, INDIA

Posted by DreamBig | 8:43 PM






It's back...Forum Nokia Developer Conference 2009, in Bangalore on January 20th, 2009..

Nokia Developer Conference 2009 is a movement by Forum Nokia to share and demonstrate the technological advancements & opportunities in the field of Mobile VAS.

With the rapid expansion of mobile phones, tele-density and Next Generation Network (NGN) services many more such novelties are in store for Indian population with mobile phone services and broadband services at the centre of innovation. Telecommunications had traditionally been a voice communication service. The services today have moved beyond their fundamental role of voice communications to a spectrum of non-core services, which in telecommunication parlance is called Value Added Services (VAS).

While we are witnessing an unprecedented growth in the Mobile space, the time is conducive for the developers (Mobile & IT) to dream, leverage the growth by creating applications that benefits millions. Dream. Create. Benefit

In all, Nokia Developer Conference 09 promises to bring developers a Forum where best minds in the industry meet and discuss the evolution of the MOBILE VAS INDUSTRY and what the future holds. Hence, from trends to technology to developer evangelization, you can expect all at the Nokia Developer Conference 2009.

So, whether you are a IT or Mobile Application developer, an aggregator, an operator, a content provider, a game developer, an IT or Internet company, a publisher, a retailer or even an analyst, You can’t afford to miss the Infinite Possibilities at Nokia Developer Conference 2009.


Meet the industry experts and have a networking lunch with your peers at Nokia Developer Conference 2009. You even stand a chance to win cool mobile and other gifts from Forum Nokia.

Register Now to avail special discounts and be a part of INFINITE POSSIBILITIES.


It's time to dream big and explore infinite possibilities — and it's time to benefit from these possibilities. Register at Nokia Developer Conference 2009 for technology presentations, solutions to mobile application developers challenges, insights from industry experts, growth projections for the mobile industry, and more. Nokia Developer Conference 2009 is where real stories and original thinking will be shared, where collaborations can lead to innovation, and where you can bond with like-minded peers, create partnerships, and benefit in a big way.

There will be sessions on whole lot of topics which include Mobile VAS Industry & its future.
Also the evolution of Mobile Technology like the technology used by mobile application developers (Java,Symbian,OpenSource & others) ,its advents & what all applications can be developed using them, with industry experts & experienced developers showcasing their talent & expertise. On the whole a lot of things that no one can miss it.

So be there to experience it.

Click to Register & know the details.

Visit http://www.nokiadevcon.in & http://www.nokiadevcon.in/session.html for further details.

Read More...