Criando ancoras em HTML e Javascript

Para entender o que é âncora, imagine a seguinte situação, ao clicar em um link “topo” ao final da página, o usuário será direcionado ao início da página. Perceba que, o conceito de âncora é simples, são links estabelecidos em qualquer parte do documento, que servirão como “marcadores de locais”.
Será exemplificado duas formas de se criar âncoras, mas para ambas deve-se conter:
  • Um local definido na página que será a âncora;
  • Um link para direcionar ao local específico;
Âncora em HTML
Primeiramente deve-se definir o local de destino. Você deve incluir a seguinte tag exatamente no local onde quer que o link vá:
<div id="topo"></div>

Deve-se definir o identificador do local (neste caso uma div) marcador da página. Em seguida, pode-se utilizar a tag “a” para criar um link onde irá direcionar para o ponto onde foi definido (div topo).
<a href="#topo">ir topo</a>
Observe que, no href foi colocado o símbolo “#” acompanhado do identificador do componente para qual a página será direcionada, este símbolo fará com que o navegador entenda que o link direcionará uma âncora.
Âncora em Javascript
Da mesma maneira que o HTML, deve-se definir o local de destino e o link da âncora, a diferença , que será utilizado um método Javascript para direcionar a âncora, e utilizar o método onlick no lugar do href, observe.
<script type="text/javascript">
    function ancora(objID) {
        document.getElementById(objID).focus();
    }
</script>


<div id="topo"></div>
<a onclick="ancora('topo');" ></a>
Veja que, o método onlick direciona à função “ancora” e é passado o nome do componente a qual será direcionada a página. Dentro da função, utilizando o getElementById, o componente é “focado”, assim ocorrendo o processo de âncora.
Podem ser incluídas quantas âncoras quiser na mesma página, apenas deve-se diferenciá-las pelo nome.

Selecionar varios registros – CheckBox em GridView

Durante o desenvolvimento de seus projetos, você já pode ter passado pela seguinte situação: tem-se uma coleção de dados exibidas em um GridView e deseja selecionar um ou vários registros para efetuar alguma ação. Nesse artigo, veremos como selecionar vários Checkbox, repetido nas colunas de um GridView e capturar o valor do identificador dessas colunas.
Análise da aplicação
Primeiramente, deve-se entender que, são “n” situações possíveis onde se necessita selecionar vários checkbox, porém, neste exemplo em questão, teremos um gridview contendo algumas categorias, onde se devem selecionar as que terão relacionamento com um determinado cliente. Lembrando que, o foco do artigo não é a criação da aplicação (incluindo criação de banco e inserção de dados).
Populando o GridView
Supondo que tenhamos uma tabela tbCategoria com os seguintes campos: Id (int) e Nome (nvarchar(100)). Os dados desta tabela serão exibidos através de um GridView, que terá as colunas respectivas aos campos e um CheckBox, vejam na figura 1:
Figura 1 – GridView Categorias
Abaixo segue código de criação:
<asp:GridView ID="gvSubCategoria" runat="server" CellPadding="4" DataKeyNames="Id"
        ForeColor="#333333" Width="230px" AutoGenerateColumns="False" GridLines="None"
        DataSourceID="sdsCategorias">
        <RowStyle BackColor="#E3EAEB" />
        <Columns>
            <asp:TemplateField HeaderText="Categorias">
                <ItemTemplate>
                    <asp:CheckBox ID="cbItem" runat="server" />
                    <asp:Label ID="lblIdCategoria" runat="server" Text='<%# Eval("Id") %>' Style="font-family: Arial;
                        font-size: small"></asp:Label>
                    <asp:Label ID="lblNomeCategoria" runat="server" Text='<%# Eval("Nome") %>' Style="font-family: Arial;
                        font-size: small"></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
        <FooterStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
        <PagerStyle BackColor="#666666" ForeColor="White" HorizontalAlign="Center" />
        <SelectedRowStyle BackColor="#C5BBAF" Font-Bold="True" ForeColor="#333333" />
        <HeaderStyle BackColor="#7088c5" Font-Bold="True" ForeColor="White" />
        <EditRowStyle BackColor="#7C6F57" />
        <AlternatingRowStyle BackColor="White" />
    </asp:GridView>
    <asp:SqlDataSource ID="sdsCategorias" runat="server" ConnectionString="<%$ ConnectionStrings:csArtigo %>"
        SelectCommand="SELECT [Id], [Nome] FROM [tbCategoria]"></asp:SqlDataSource>
O código acima cria um GridView customizado, preenchido através do SqlDataSource “sdsCategorias”, e suas colunas foram criadas dentro de um TemplateField, com intuído de criar um CheckBox “cbItem”, para cada linha de resultado da busca. Pronto, agora que o grid foi preenchido, adicionaremos um button “btnCadastrar”, onde este irá capturar os “id”s das linhas foram selecionadas através do CheckBox.
Após adicionar o botão, em seu método onclick, adicione o seguinte código:
for (int i = 0; i <= gvCategoria.Rows.Count - 1; i++)
        {
            GridViewRow dgItem = gvCategoria.Rows[i];
            CheckBox cb = (CheckBox)dgItem.FindControl("cbItem");

            if (cb.Checked)
            {
                Label lblId = (Label)dgItem.FindControl("lblIdCategoria");
                Label lblNome = (Label)dgItem.FindControl("lblNomeCategoria");
                Response.Write(lblId.Text + " - " + lblNome.Text + "<br />");
            }

        }
Percebam que, foi criado um laço de repetição onde irá percorrer todo resultado exibido no GridView, linha por linha. Foi criado um dgItem do tipo GridViewRow, para que, através do método FindControl possa encontrar o CheckBox “cbItem”.
Utilizando a instrução de controle “if” verificamos se este CheckBox está selecionado, caso esteja, serão criadas duas Labels (lembrando que são Labels por que no GridView foram adicionadas Labels para armazenar os valores de Id e Nome) que receberão seus valores, novamente utilizando o método FindControl do dgItem.
Por fim, foi utilizado o Response.Write para “imprimir” os valores selecionados na grid.
Observe na figura 2 a aplição completa:

Figura 2 – Gridview selecionado
Veja abaixo o código completo do exemplo:
Aspx
<asp:GridView ID="gvCategoria" runat="server" CellPadding="4" DataKeyNames="Id"
        ForeColor="#333333" Width="230px" AutoGenerateColumns="False" GridLines="None"
        DataSourceID="sdsCategorias">
        <RowStyle BackColor="#E3EAEB" />
        <Columns>
            <asp:TemplateField HeaderText="Categorias">
                <ItemTemplate>
                    <asp:CheckBox ID="cbItem" runat="server" />
                    <asp:Label ID="lblIdCategoria" runat="server" Text='<%# Eval("Id") %>' Style="font-family: Arial;
                        font-size: small"></asp:Label>
                    <asp:Label ID="lblNomeCategoria" runat="server" Text='<%# Eval("Nome") %>' Style="font-family: Arial;
                        font-size: small"></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
        <FooterStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
        <PagerStyle BackColor="#666666" ForeColor="White" HorizontalAlign="Center" />
        <SelectedRowStyle BackColor="#C5BBAF" Font-Bold="True" ForeColor="#333333" />
        <HeaderStyle BackColor="#7088c5" Font-Bold="True" ForeColor="White" />
        <EditRowStyle BackColor="#7C6F57" />
        <AlternatingRowStyle BackColor="White" />
    </asp:GridView>
    <asp:SqlDataSource ID="sdsCategorias" runat="server" ConnectionString="<%$ ConnectionStrings:csArtigo %>"
        SelectCommand="SELECT [Id], [Nome] FROM [tbCategoria]"></asp:SqlDataSource>
    <br />
    <asp:Button ID="btnCadastrar" runat="server" Text="Cadastrar"
        onclick="btnCadastrar_Click" />
C#
protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void btnCadastrar_Click(object sender, EventArgs e)
    {
        for (int i = 0; i <= gvCategoria.Rows.Count - 1; i++)
        {
            GridViewRow dgItem = gvCategoria.Rows[i];
            CheckBox cb = (CheckBox)dgItem.FindControl("cbItem");

            if (cb.Checked)
            {
                Label lblId = (Label)dgItem.FindControl("lblIdCategoria");
                Label lblNome = (Label)dgItem.FindControl("lblNomeCategoria");
                Response.Write(lblId.Text + " - " + lblNome.Text + "<br />");
            }

        }
    }
Foi criado assim, um GridView que contem caixas de seleção, e um botão, que escreve na tela os valores que foram selecionados no grid.

Ajax – Conhecendo seus componentes (Parte 1)

Ajax pode-se dizer que é uma revolução no conceito de aplicações pra web, essa tecnologia foi implementada nos anos 2000, e permite aperfeiçoar o trafico de dados entre um servidor web e um browser. Utiliza um protocolo XML HTTP para fazer uma comunicação assíncrona com o servidor, isso significa que, com o Ajax, apenas uma “porção” da tela será atualizada, somente o que desejar, sem a necessidade de atualizar toda a página quando quiser realizar uma ação. Com ele é possível criar aplicações muito mais leves e amigáveis, pois os PostBacks deixam de existir.
Quando se fala em Ajax, para facilitar o serviço, a Microsoft disponibiliza o ASP.NET AJAX Control Toolkit, que é composto por uma série de controles com recursos Ajax. Ao decorrer dos artigos postados neste blog, serão detalhados alguns destes controles. Neste artigo será explicado como instalar o ajaxControltoolKit, o que é e como utilizar os controles UpdatePanel e ModalPopUpExtender.
Instalando o AJAX Control Toolkit
Para instalar o AjaxControlToolKit, você pode baixá-lo em http://ajaxcontroltoolkit.codeplex.com/ e siga os passos de instalação, ou simplesmente baixar os arquivos DLL clicando aqui , e colocá-lo na pasta BIN de seu projeto.
Colocando os arquivos na pasta BIN, após criar o projeto, na página em que irá utilizar o AJAX, deve-se informar que a mesma ela irá trabalhar com o Ajax Control Toolkit, portanto deve ser feita uma chamada do mesmo antes de abrir a tag HTML, veja:
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
Repare que, foi informado o valor “cc1” para a TegPrefix, portanto toda chamada de controles do Ajax Control Toolkit na pagina será feita através desta Tag.
Para trabalhar com o Ajax, deve-se inserir na página o ScriptManager, pois este é responsável por gerenciar os PostBacks que serão realizados e transformar em requisições XML HTTP. Dentro do form, insira:
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
Agora, serão detalhados alguns controles do AJAX Control Toolkit:
UpdatePanel
O controle UpdatePanel permite criar aplicações web onde seja possível atualizar apenas a área que está delimitada pelo componente, ou seja, pode-se atualizar parcialmente o site sem necessidade de carregar novamente a página usando um PostBack.
Não há limite de UpdatePanel que se pode usar em uma página, portanto, pode-se definir regiões específicas de uma página, que podem ser atualizadas sem realizar um Refresh por completo.
Propriedades do UpdatePanel
Abaixo serão citadas algumas propriedades mais usuais.
  • UpdateMode: Esta propriedade obtém ou indica quando um conteúdo dentro do UpdatePanel é atualizado;
  • ChildrenAsTriggers: Por padrão definida como True, indica quando acontece um PostBack de um UpdatePanel filho;
  • Triggers: Permite disparar uma atualização dentro do UpdatePanel, como exemplo, se faz necessário quando deseja enviar imagem para o servidor utilizando o FileUpload;
Exemplificando
Será codificada uma área que atualizará uma informação em um determinado local do site. O Exemplo a ser mostrado, é simples e intuitivo, onde o usuário clicará em um botão, e a informações que ele digitar em um Textbox será adicionado em uma Label. O detalhe é que este estará dentro de um UpdatePanel, para que, o preenchimento da Label seja realizado sem o PostBack da página.
Para isso, crie um novo projeto, e no webform, adicione o ScriptManager, pois como foi dito no artigo “CascadingDropDown passo a Passo”, este é responsável por gerenciar os PostBacks que serão feitos na página e transformar em requisições XML HTTP. Adicione também 1 Label, 1 Textbox e 1 Button, veja abaixo o código:
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:Label ID="lblValor" runat="server" Text=""></asp:Label>
<br />
<asp:TextBox ID="txtValor" runat="server"></asp:TextBox>
<asp:Button ID="btnValor" runat="server" Text="Add" />
Vá a modo “Design” em seu Visual Studio e dê duplo clique sobre o botão, para que este gere automaticamente o método onclick. Neste método realize a ação de adicionar o texto informado no Textbox na Label, da seguinte maneira:
lblValor.Text = txtValor.Text;
Simples, porém quando executar, perceba que ao clicar no botão, a página é atualizada por completo, para realizar o carregamento apenas do local desejado, sem que a página realize um PostBack, coloque os componentes que deseja atualizar dentro de um UpdatePanel, veja abaixo:
<asp:UpdatePanel ID="upValor" runat="server">
<ContentTemplate>
<asp:Label ID="lblValor" runat="server" Text=""></asp:Label>
<br />
<asp:TextBox ID="txtValor" runat="server"></asp:TextBox>
<asp:Button ID="btnValor" runat="server" Text="Add"            
     OnClick="btnValor_Click" />
</ContentTemplate>
</asp:UpdatePanel>
Executando o projeto pressionando o botão “Add”, observe o comportamento da página. Perceba que usando o UpdatePanel o as ações do botão não exigem que a página atualize por completo, tornando assim a interação com o usuário mais rápida e dinâmica.
ModalPopUpExtender
Com o ModalPopUpExtender é permitido criar popups em aplicações AJAX, janelas “modais” que sobrepõe a outros controles, algo que não é possível fazer em aplicações web tradicionais, porém, utilizando-o é muito simples simular essas janelas popups através de Panel , e qualquer controle pode ser adicionado à este Panel, também é possível customizá-lo da forma desejada.
Propriedades do ModalPopUpExtender
Algumas propriedades serão descritas abaixo:
  • TargetControlID - O ID do componente que irá ativar a janela modal;
  • PopupControlID - O ID do componente que será a janela modal;
  • DropShadow - Configurado como “true” realiza um efeito de sombreamento;
  • OkControlID - O ID do componente que irá descartar a janela modal;
  • OnOkScript - Executa um script do lado do cliente, irá ocorrer quando o modal popup for indeferido com o OkControlID;
  • CancelControlID - O ID do componente que irá cancelar a janela modal;
  • OnCancelScript - Irá executar quando o modal popup for indeferido com o CancelControlID.
Exemplificando
Será criada uma página onde conterá um link, que quando clicado, irá abrir uma janela modal simples, onde conterá uma Label informativa e um botão de fechar. Exemplo criado simplesmente com objetivo de mostrar o funcionamento do ModalPopUpExtender.
Utilizando o mesmo projeto citado no exemplo acima, crie uma nova página, adicione o ScriptManager, coloque um Hyperlink na página com id “hlModal”, adicione um Panel, com id “pnlModal” (customize-o da maneira que achar melhor), dentro do Panel, adicione uma Label e um Button, com IDs “lblInfo” e “btnFechar” respectivamente, observe na Figura 1.
Figura 1 – Utilizando o ModalPopUpExtender
Próximo passo é fazer com que o “pnlModal” se torne uma janela popup , e apareça somente quando o usuário clicar sobre o Hyperlink “hlModal”, para isso basta adicionar o ModalPopupExtender na página, como mostra o código abaixo:
<ajax:ModalPopupExtender ID="mpeModal" runat="server"  
    TargetControlID="hlModal" DropShadow="true"
    OkControlID="btnFechar" PopupControlID="pnlModal"> 
</ajax:ModalPopupExtender>
Perceba que, foram configuradas as seguintes propriedades: TargetControlID, DropShadow, OkControlID e PopupControlID, de acordo com cada componente que foi adicionado na página. Compile a aplicação e perceba que inicialmente o pnlModal está invisível, e que quando clica-se sobre o link “hlModal”, o Panel aparece como um popup.
Com o texto acima descrito, pode-se perceber que, utilizando à tecnologia AJAX, as páginas Web ficaram de certa forma mais eficientes, direta e objetiva. Cria-se aplicações mais leves e amigáveis, pois o usuário não precisa aguardar a página ser recarregada a cada requisição de dados com o servidor.

Paginando dados utilizando Datalist

Utilizando o Visual Studio 2008, percebe-se que, os controles GridView, FormView e DetailsView já possuem o recurso de paginação integrado, porém, o Datalist não fornece wizards para paginação, sendo assim, a mesma deve ser criada de forma customizada utilizando o objeto PagedDataSource.
Perceba que, o exemplo que será mostrado neste artigo, permitirá uma paginação onde possui os botões “next” e “preview”, bem como os links para cada pagina criada e uma legenda informativa dizendo qual página está selecionada, veja na Figura 1 abaixo:
Figura 1 – Paginação Datalist
Figura 1 – Paginação Datalist
Confira as propriedades do PagedDataSource, perceba que existem outras propriedades como isFirstPage (ir para primeira página) e isLastPage (ir para última página).
Com o PagedDataSource, será permitido utilizá-lo em conjunto ao Datalist, Repeater, Dropdownlist, dentre outros, basta associar a ele uma fonte de dados e quantas informações por página este irá exibir, perceba pelo exemplo abaixo, utilizando um sqlDataSource:
Aspx:

<div style="float: left">
     <asp:Label ID="lblPaginasTopo" runat="server" Text="" ForeColor="Black" Font-Size="14px">         
     </asp:Label>
</div>
<div style="float: left; padding-left: 20px;">
     <asp:ImageButton ID="btnPrevTopo" runat="server" AlternateText="Voltar" OnClick="btnPrev_Click"
                    ImageUrl="~/design/bgBack.gif" Width="19px" Height="19px" />
     <asp:LinkButton ID="divLinks" runat="server" OnClick="link_Click"></asp:LinkButton>
     <asp:ImageButton ID="btnNextTopo" runat="server" AlternateText="Próximo" OnClick="btnNext_Click"
           ImageUrl="~/design/bgNext.gif" Width="19px" Height="19px" />
</div>

C#:
protected void Page_Load(object sender, EventArgs e)
  {
        GetData();
        if (!Page.IsPostBack)
        {
            GetData();
            if (ViewState["PagedDataSource"] != null)
            {
              createPaging((int)ViewState["PagedDataSource"]);
            }
        }
        else
        {
            if (ViewState["PagedDataSource"] != null)
            {
                createPaging((int)ViewState["PagedDataSource"]);
            }
        }
    }
    private void GetData()
    {
        PagedDataSource pgds = new PagedDataSource();   
pgds.AllowPaging = true;
        pgds.DataSource = sdsResultado.Select(DataSourceSelectArguments.Empty);     
        pgds.PageSize = 10;
     pgds.AllowPaging = true;
pgds.CurrentPageIndex = PaginaAtual;
       btnNextTopo.Enabled = !pgds.IsLastPage;
        btnPrevTopo.Enabled = !pgds.IsFirstPage;
      
lblPaginasTopo.Text = string.Concat("Página ", (PaginaAtual + 1).ToString(), " de ", pgds.PageCount.ToString());
        ViewState["PagedDataSource"] = pgds.PageCount;
       
dlResultado.DataSource = pgds;
        dlResultado.DataBind();
    }
    public int PaginaAtual
    {
        get
        {
            object o = this.ViewState["PaginaAtual"];
            if (o == null || (int)o < 0)
                return 0;
            else
                return (int)o;
        }
        set
        {
            this.ViewState["PaginaAtual"] = value;
        }
    }
    protected void createPaging(int pgds)
    {
        for (int i = 0; i < pgds; i++)
        {
            LinkButton link = new LinkButton();
            link.Text = (i + 1).ToString();
            link.ID = string.Concat("txt_", i.ToString());
            link.Click += new EventHandler(link_Click);
            divLinks.Controls.Add(link);
            LiteralControl space = new LiteralControl("&nbsp;");
            divLinks.Controls.Add(space);
        }
    }
    protected void link_Click(object sender, EventArgs e)
    {
        LinkButton link = (LinkButton)sender;
        PaginaAtual = Convert.ToInt32(link.Text) - 1;
        GetData();
    }
    protected void btnPrev_Click(object sender, ImageClickEventArgs e)
    {
        PaginaAtual--;
        GetData();
    }
    protected void btnNext_Click(object sender, ImageClickEventArgs e)
    {
        PaginaAtual++;
        GetData();
    }
Perceba que, na criação da página aspx, foram adicionados os seguintes componentes:


  • 1 Label - “lblPaginasTopo” , para que no método GetData(), esta receba o texto informando
    em qual página está o resultado da consulta;




  • 2 ImageButton - “btnPrevTopo” e “btnNextTopo”, sendo estes os botões de “preview”
    e “next”, que através de seus metodos de OnClick irão “navegar” pelo resultado;




  • 1 – LinkButton, “divLinks” que irá receber, através do método “createPaging” o link
    para cada página que foi encontrada de paginação.



  • Observando o método GetData(), perceba que “sdsResultado” é um sqlDataSource que contém o resultado de uma determinada consulta, e que “pgds.PageSize” irá informar quantos resultados por página serão exibidos.
    Com o texto acima, pode-se realizar uma simples, rápida e eficiente paginação de dados utilizando sqlDatasource em conjunto com Datalist.