Fenil Desai's Blog: AJAX

Showing posts with label AJAX. Show all posts

ASP.NET AJAX Tutorials List

Posted by The Opening Batsman in Thursday, May 13, 2010

Here's a list of some good tutorial links on AJAX & ASP.NET AJAX.....

Hope everyone like's it.

Ajax, Asp.net Ajax, jQuery – Misconceptions and Facts

Posted by The Opening Batsman in Tuesday, January 5, 2010

There seems to be some confusion among a lot of developers about Asp.net Ajax. This article will hopefully clear some doubts regarding what it is, what it isn’t and where jQuery comes in.
Ajax
Ajax stands for Asynchronous JavaScript And Xml. Ajax is used to asynchronously make a server side request from a web page. It does not need a full page refresh (a full postback in Asp.net terms) and can result in a few benefits:
1. The user does not have to see the whole page flash blank for every little thing that requires server side processing.
2. Only the required data is sent from the server to the client in response to an Ajax request. This reduces network traffic.
3. Only the required data is processed. So processing of other parts of the page is not needed. This reduces the server workload.
Microsoft created the XMLHTTP ActiveX control way back in 1999. Other browsers have added similar functionality in a native object called XmlHttpRequest (XHR). These objects are used to create and carry out Ajax requests. The technology was being used before the term Ajax officially came into being, and it became widely known when Google used it with GMail and Google Maps. Jesse James Garrett coined the name Ajax feeling the need for an appropriate shorthand. Presumably, he thought of the name while taking a shower in 2005.
Although the name suggests JavaScript and XML – and initially XML was used to transfer the data – nowadays data can be passed in other formats as well as XML. For instance, it’s very common to pass data between the server and client using JSON (JavaScript Object Notation). And although the XHR object is usually used to make Ajax calls, other methods like using an IFrame or dynamically created tags can also beseen.

What Ajax Can’t Do

There are a few limitations to Ajax calls. The major ones are:

1.It can’t make a cross domain call. The request must be made to a urlwithin the same domain. So, if your domain is www.yoursite.com, therequest must go to a url within www.yoursite.com. It can’t go towww.darth-vader.com or anywhere else. [There are workarounds, likeusing JSONP – although whether JSONP is Ajax is subject to speculation.]

2. It can never ever upload a file to the server.

3. It can’t access files on the client machine.

4. Any other limitations that JavaScript has.

Asp.net Ajax

Asp.net Ajax is Microsoft’s framework for Ajax and JavaScript development. Although it’s name is Asp.net Ajax, it can do much much more than justAjax. It has always consisted of client side JavaScript and integrationinto Asp.net WebForms. This has been a main point of confusion andcaused many people to think that Asp.net Ajax can only be used fromAsp.net. Along with that, there’s also the Asp.net Ajax Control Toolkit(ACT), which adds a bunch of functionality and features on top ofAsp.net Ajax. If this all seems confusing, it’s probably because it is.And Microsoft has addressed this. The Asp.net Ajax framework hasrecently been reorganized and the new version is currently in Beta. Tomake things simpler, these are now the key aspects of Asp.net Ajax:

Asp.netAjax Library: This is a reorganization or the existing client sidefeatures (along with quite a few new ones) of Asp.net Ajax. This is astand alone JavaScript library just like jQuery, scriptaculous,mootools etc. Although called Asp.net Ajax, it is in fact an entireJavaScript library that supports Object Oriented JavaScript, clienttemplates, web service calls, animation, JSONP and a whole host ofother things. It can be used with server side Asp.net, Asp.net MVC –even plain Html. Want to use it on a php page? Go right on ahead. Itwill work perfectly without .Net even installed on the server. This iscompletely client side, with no server dependencies. To add to that,the Asp.net Ajax Control Toolkit (ACT) has been incorporated into thislibrary. So, you can use stuff like the CalenderExtender,ModalPopupExtender, HoverMenuExtender etc. without needing to useAsp.net. The Asp.net Ajax Library project is open source and maintainedby the Codeplex Foundation (Microsoft recently donated the project tothe Codeplex Foundation). You can find more information about thelibrary (including detailed tutorials) at http://www.asp.net/ajaxlibrary/.

ServerSide Asp.net: Asp.net Ajax has rich server side integration intoAsp.net. To utilize these features, you will need to be using Asp.net.The ScriptManager, UpdatePanel, UpdateProgress and other controls allowdevelopers to use features like partial page updates, managing browserhistory, script combining, web service script registration etc. withouthaving to write any JavaScript. Asp.net Ajax enables Ajax featureswhile retaining drag and drop RAD functionality in WebForms. It alsoprovides an infrastructure on which to build extender controls, scriptcontrols and components – custom server controls that use the Asp.netAjax Library (the client side library mentioned above) – and takes careof registering the required scripts and resources at runtime. All thedeveloper using the control needs to do is drag and drop the controlonto a WebForms page with a ScriptManager and set the properties. Theframework will do the rest.

AjaxControl Toolkit: The Ajax Control Toolkit (ACT) adds a bunch offeatures and controls to Asp.net Ajax. Previously, this was a standalone project hosted at codeplex. It was primarily used in WebFormsscenarios. With the new-and-currently-in-beta version, the ACT has beenincorporated into the Asp.net Ajax Library. All the controls of thetoolkit are all present and can be used entirely from script. The ACTalso has some server side components which can be used to make customAsp.net Ajax server side control development easier. In addition, theserver side components provide drag and drop functionality to all thecontrols and extenders in the client side ACT library. This makes usingthe controls easier in a WebForms environment, taking advantage of theScriptManager control. While very easy to use with WebForms, it’s alsovery simple to use entirely from script (like in Asp.net MVC or plainHtml). This has been a major improvement in the latest beta as it wasquite cumbersome to use the toolkit before.

jQuery: jQuery is another JavaScript library, just like the Asp.net Ajax library. It’s free, open source and the brainchild of John Resig,who initially released it in 2006. So why are we talking about it here?Well, jQuery has quite a few benefits and is a great JavaScriptlibrary. It’s very lightweight, has some awesome selector syntax aswell as chaining support for expressions. Again, why am I mentioningthis here? The Asp.net Ajax team was looking to incorporate similarfeatures in the client side library of Asp.net Ajax. jQuery was gainingreal popularity at that time. It could do complex JavaScript tasks withvery little code. The motto of jQuery is “write less, do more”.Microsoft was also pushing the early versions of Asp.net MVC. Asp.netMVC really needed a JavaScript library that could handle Ajax, JSON andclient side manipulation in a simple manner. More and more developersstarted using jQuery for this. It was decided that jQuery would beofficially considered a part of Asp.net development. It was initiallyincluded into the Asp.net MVC project template, and since then has beenincluded in Asp.net Ajax as well. All the controls in the ACT now workseamlessly with jQuery (in the latest beta of the Ajax Library).Microsoft also pledged bug reports, patches, tests etc. to the jQueryproject. One thing to note is that although jQuery support is includedin the Asp.net Ajax Library, you do not need to be using jQuery to useAsp.net Ajax (or even the client side Asp.net Ajax Library). Microsoftrecommends using them both together as it will make development easierwith less need to reinvent the wheel. jQuery is already a rocketpowered missile in a tiny package. As such, jQuery complements Asp.netAjax and using one does not force you to restrain from the other.

MicrosoftAjax Content Delivery Network (CDN): Microsoft has CDN servers aroundthe globe. And it hosts all of the JavaScript files in the MicrosoftAjax Library (including those for the ACT), jQuery, jQuery validationplug-in and the Asp.net Ajax scripts for Asp.net MVC on these servers.The files are cached and delivered to users of your website from theirnearest location. This has a a few benefits:
- The files reach the website user faster.
- Thefiles, once delivered, are cached on the browser too. Any other domainthat uses the same file causes the browser to use the local cachedversion (since the file’s url is the CDN url, the domain remainsconstant). Hence, other websites using the CDN will load faster too.
- The files are delivered from Microsoft’s servers. This reduces your server network bandwidth usage and reduces costs for you.
- TheCDN supports Http and Https. This means website users won’t get a peskymessage asking them whether or not they want to show non-secure items.

You can learn more about the CDN here: http://www.asp.net/ajaxlibrary/CDN.ashx

Sothat’s it for an overview of what Asp.net Ajax actually is. If you wishto learn more, you can find a whole host of resources here: http://www.asp.net/ajax/

Using AJAX Textbox Extenders

Posted by The Opening Batsman in Friday, January 1, 2010

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:

Watermark Extender

Filtered TextBox

Masked Edit TextBox and Masked Edit Validator

Calendar Extender

Validator Callout Extender

Auto Complete Extender

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.

Add a textbox to the web page.

Add extenders by clicking the arrow flag on the top right corner of the text box.

Select Watermark Extender from the available list.

Now in the property page of the textbox you can see the extender's property as in the following figure.

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.

Add a textbox to the web page.

Add extenders by clicking the arrow flag on the top right corner of the text box.

Select Filtered Textbox Extender from the available list.

Now in the property page of the textbox you can see the extender's property as in the following figure.

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.

Add a textbox to the web page.

Add extenders by clicking the arrow flag on the top right corner of the text box.

Select MaskedEdit Textbox Extender from the available list.

Now in the property page of the textbox you can see the extender's property as in the following figure.

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.

Add a textbox to the web page.

Add extenders by clicking the arrow flag on the top right corner of the text box.

Select Calendar extender for textbox from the available list.

Now in the property page of the textbox you can see the extender's property as in the following figure.

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.

Add a textbox to the web page.

Add a RequiredFieldValidator and associate it with the target textbox.

Add extenders by clicking the arrow flag on the top right corner of the RequiredFieldValidator.

Select ValidatorCallout extender for RequiredFieldValidator from the available list.

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.

Add a textbox to the web page.

Add extenders by clicking the arrow flag on the top right corner of the text box.

Select AutoComplete extender for textbox from the available list.

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:

Add a textbox to the web page.

Add extenders by clicking the arrow flag on the top right corner of the text box.

Select PasswordStrength extender for textbox from the available list.

Now in the property page of the textbox you can see the extender's property as in the following figure.

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"/>

Fenil Desai's Blog

ASP.NET AJAX Tutorials List

AJAX

Ajax, Asp.net Ajax, jQuery – Misconceptions and Facts

Using AJAX Textbox Extenders

Feeds

Search

Categories

Archives

Top Commentators