Gravatar Control in AJAX Using ASP.NET

Davin Martyn
12y
23.6k
0
0
100
Article

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.

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.

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.