Gravatar Control in AJAX Using ASP.NET


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

AJAX Rating Control

DropShadowExtender Control in AJAX Using ASP.NET

RangeValidator Control With AJAX Using ASP.NET

ASP.Net AJAX GridView Loading using C#

Up Next
    Ebook Download
    View all
    Learn
    View all