[ASP .NET] Instalando e utilizando Ajax Toolkit

Veja a seguir, como instalar o Ajax Toolkit no Visual Studio 2010[bb] e como utilizar o que há de mais interessante nesse poderoso conjunto de controles.

Com Ajax Toolkit é possível, por exemplo, adicionar de forma muito rápida calendários, upload de arquivo de foma dinâmica e até mesmo implementar a exibição de foto via gravatar, somente arrastando um objeto da toolbar.

Instalando o Ajax Toolkit

A instalação dos controles na toolbar do Visual Studio 2010 é tão simples quanto sua utilização. São 3 passos simples.

  1. Faça o download na página do projeto no codeplex (verifique a versão do .NET Framework) e descompacte o arquivo .zip.
  2. Com o Visual Studio aberto, clique como botão direito do mouse sobre a toolbar e clique no menu “Add Tab”, como mostra a imagem abaixo. Dê um nome amigável como “AjaxToolkit”
  3. Adicionar seção a toolbarAgora clique com o botão direito do mouse sobre a seção que criou na toolbar e clique no menu “Choose Items…”. Na janela que se abrir confira se a aba “.NET Framework Components” está seleciona, clique em “Browse…”, encontre o local onde extraiu os arquivos que baixou e selecione o arquivo “AjaxControlToolkit.dll”; por último clique em “Ok”. Pronto, agora todos os componentes do Ajax Toolkit estão na seção que você criou.Adicionando controle do Ajax Toolkit

Utilizando controles do Ajax Toolkit

Se você criou alguma página em ASP .NET utilizando o VS 2010, verá que o funcionamento para os novos controles será o mesmo. Basta arrastar um item da toolbar para a página e configurá-lo da maneira que desejar.

Abaixo mostro a utilização de dos controle do Ajax Toolkit: ConfirmButtonExtender e Gravatar. Veja o código abaixo.

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:Gravatar ID="Gravatar1" runat="server" Email="EMAIL QUE DESEJA EXIBIR IMAGEM" />

        <asp:Button ID="Button1" runat="server" Text="Button" />
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <asp:ConfirmButtonExtender ID="ConfirmButtonExtender1" runat="server" ConfirmText="Continuar com a ação?" TargetControlID="Button1"></asp:ConfirmButtonExtender>
    </form>
</body>
</html>

No exemplo acima, somente adicionei os controles, sem que estes executem alguma ação.

O primeiro controle, o asp:Gravatar, perceba que a implementação é muito fácil, sendo necessário somente, informar qual o Email que está vinculado ao Gravatar, que o avatar será exibido. Simples assim!
O segundo e meu preferido, asp:ConfirmButtonExtender, vinculado à um asp:Button, cria uma janela de confirmação quando o usuário clica sobre o botão. Chamo a atenção para as duas principais propriedades desse objeto:

  • TargetControlID: indica com qual o botão que o controle será vinculado
  • ConfirmText: qual mensagem será exibida ao usuário na janela de confirmação

Observação: o objeto “asp:ScriptManager” é necessário para o funcionamento do “ConfirmButtonExtender”.

Veja o resultado da página que criamos (para o teste, adicionei o meu email na propriedade doasp:Gravatar).

Algo que deve ser observado, é a chamada a biblioteca do Ajax Toolkit no inicio da página:

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

Repare que na propriedade TagPrefix foi colado “asp”, isso permite que os controles sejam declarados como “<asp:”. Caso não queira colocar essa declaração em cada página do site, altere o arquivo “web.config” do site e adicione as tags conforme exemplo. Observe que no exemplo abaixo não estão todas as tags que normalmente fazem parte no arquivo, as retirei para evidenciar as linhas referentes ao Ajax Toolkit. No seu arquivo somente adicione as linhas mostradas.

<configuration>
	<system.web>
  <compilation>
    <assemblies>
      <add assembly="AjaxControlToolkit, Version=3.5.40412.0, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e"/>
    </assemblies>
  </compilation>
  <pages>
    <controls>
      <add assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagPrefix="asp" />
    </controls>
  </pages>
	</system.web>
</configuration>

Muita atenção na propriedade “Version“, confira qual o versão do Ajax Toolkit que você baixou.

E por hoje é só galera. Espero que tenham ajudado!

Um comentário sobre “[ASP .NET] Instalando e utilizando Ajax Toolkit

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.