Introduction
Ajax (Asynchronous JavaScript and XML) is a new web development technique for interactive websites. With AJAX help we can develop web applications and retrieve small amounts of data from a web server. AJAX consists of a different type of technology.
- JavaScript
- XML
- Asynchronous Call to the server
Gravatar
A Gravatar is associated with an email address. We can visit Gravatar.com and upload an image and associate the image with your email address. The Gravatar control is an ASP.NET AJAX control that enables you to use gravatar images on web forms. If a user has not uploaded an image to Gravatar.com then you can auto-generate a unique image for the user from the user email address.
Four type of auto-generated images support Gravator
- Identicon
- MonsterId
- Wavatar
- Retro
Properties
- ClientIDMode
- Enabled
- EnableTheme
- EnableViewState
Step 1 : Open Visual Studio 2010
- Go to File->New->WebSite
- Select ASP.NET WebSite
Step 2 : Go to Solution Explorer and right-click.
- Select Add->New Item
- Select WebForm
- Default.aspx page open
Step 3 : Open the Default.aspx page and click in [Design option].
- Drag and drop ScriptManager, TextBox
Step 4 : Go to the Default.aspx[Source] page and drag the Gravatar Control from the Toolbox.
![gravator4.jpg]()
Step 5 : Now the simple code is shown for the Gravatar Control.
Code
<asp:Gravatar ID="Gravatar1" runat="server">
Step 6 : Now in the Default.aspx[Source] option register the Gravatar control code with TagPrefix.
Syntax
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
Step 7 : Now we define the Gravatar control's Email property.
Code
<asp:Gravatar ID="Gravatar1" runat="server" Email="[email protected]" DefaultImageBehavior="MonsterId" />
Step 8 : Now go to the Deault.aspx[Design] option and AddExtender control BallonPopupExtender.
![garvator3.jpg]()
Code
<asp:BalloonPopupExtender ID="Gravatar1_BalloonPopupExtender" runat="server" BalloonPopupControlID="TextBox1" CustomCssUrl="" DynamicServicePath="" Enabled="True"
ExtenderControlID="" TargetControlID="Gravatar1">
</asp:BalloonPopupExtender>
Step 9 : Now write the code in the Default.aspx[Source] option.
<head runat="server">
<title>my ajax application</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Gravatar ID="Gravatar1" runat="server" Email="[email protected]" DefaultImageBehavior="MonsterId" />
<asp:BalloonPopupExtender ID="Gravatar1_BalloonPopupExtender" runat="server" BalloonPopupControlID="TextBox1" CustomCssUrl="" DynamicServicePath="" Enabled="True"
ExtenderControlID="" TargetControlID="Gravatar1">
</asp:BalloonPopupExtender>
</div>
</form>
</body>
</html>
Step 10 : Now press F5 and run the application.
![garvator.jpg]()
When we click on this image then following Balloon Popup window opens.
![garvator2.jpg]()
Resource