Mostruário de fotos com Asp.net e C#(csharp)

Nesse artigo mostrarei como fazer um mostruário de fotos utilizando asp.net com C# e javascript.

Em primeiro lugar, crie um banco de dados e adicione a tabela a seguir:

Create table Mostruario(
            ID int identity,
Titulo varchar(50),
Arquivo varchar(200),
Constraint pk_Mostruario primary key(ID)) 

Insira alguns registros no banco. Na coluna arquivo, insira um caminho de uma imagem de preferência coloque assim:
            /Imagem/Mostruario/Figura.jpg

Depois de criada, entre no VisualStudio 2005 e crie um novo WebSite.

No Default.aspx, arraste no Design da página um componente do tipo Repeater, que está na aba Data da Toolbox.Agora vá para o Source da página. Observe que o Repeater foi inserido desse jeito:

<asp:Repeater ID="rptCadernos" runat="server" OnItemDataBound="rptCadernos_ItemDataBound">

<ItemTemplate>
<div id="caderno" runat="server">
    <asp:Image ID="img" runat="server"
       ImageUrl=<%#Eval("arquivo") %> Width="100px" Height="100px" /><br />
    <asp:Label ID="lbltitulo" runat="server" Text=<%# Eval("titulo") %>></asp:Label>
    <br /><br />
    <asp:HyperLink id="hlkAnterior" runat="server">Anterior</asp:HyperLink>
    <asp:HyperLink id="hlkProximo" runat="server">Próximo</asp:HyperLink>
  </div>
</ItemTemplate>      
</asp:Repeater>

Repare que eu adicionei uma tag chamada ItemTemplate. Ela é responsável em preencher os itens no repeater. Adicionei também três componentes:
um componente do tipo imagem, na qual mostrará a imagem. Para mostrá-la, será preenchido pelo comando Eval o dado do caminho da imagem que está cadastrado no banco.Um componente do tipo label que virá do banco também por meio da coluna titulo e dois componentes do tipo hyperlink, na qual serão utilizados para a navegação das imagens.

Adicione também um componenate literal antes do Repeater e dê o nome de litScript. É nele que será inserido o código javascript que iremos criar dinamicamente.
Feito isso, pressione F7 para ir no code behind da página.Antes do PageLoad da página, declare duas variáveis do tipo string e instancie um DataSet:

string strScript = "";
string link = "";
DataSet ds = new DataSet();

Crie um método que carregará a tabela Mostruario, como a seguir:

public void CarregarRepeater()
{
    string SQL = "Select * from Mostruario";
    //Adapte com sua conexão
    string conexao = "Data Source=Uismar;Initial
          Catalog=ArtigoDevMedia;Persist Security Info=True;User
          ID=userImagem;Password=1010";

SqlConnection conn = new SqlConnection(conexao);
SqlDataAdapter da = new SqlDataAdapter(SQL,conn);   

da.Fill(ds);
rptCadernos.DataSource = ds.Tables[0];
    rptCadernos.DataBind();
}

No PageLoad da página escreva o seguinte código:

protected void Page_Load(object sender, EventArgs e)
{
CarregarRepeater();
}

Volte para o Design da página e clique no componente repeater.Nos eventos dele, dê um duplo clique no evento ItemDataBound. No codebehind da página ele criou a seguinte linha de código:

protected void rptCadernos_ItemDataBound(object sender, RepeaterItemEventArgs e)
{

}

protected void rptCadernos_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
/* Cria um tipo HtmlGenericControl onde vai procurar a div
        inserida no ItemTemplate do Repeater*/

HtmlGenericControl div=(HtmlGenericControl)e.Item.FindControl("caderno");

if (e.Item.ItemIndex > -1)
{
//Cria um tipo Hyperlink
            HyperLink hlkProximo = (HyperLink)e.Item.FindControl("hlkProximo");
HyperLink hlkAnterior = (HyperLink)e.Item.FindControl("hlkAnterior");

/*cria duas string.Elas são responsáveis em capturar o ClientID(ID do
              controle)na qual soma mais um no caso de clicar no hyperlink
              proximo e subtrai menos um  no caso de clicar nohyperlink
              anterior*/

string LinkProximo = div.ClientID.Replace(e.Item.ItemIndex.ToString()
            + "_caderno", Convert.ToString(e.Item.ItemIndex + 1) + "_caderno");

string LinkAnterior =
            div.ClientID.Replace(e.Item.ItemIndex.ToString() + "_caderno",
            Convert.ToString(e.Item.ItemIndex - 1) + "_caderno");

//O NavigateUrl recebe a função javascript que está sendo criada

hlkProximo.NavigateUrl = "javascript:Fotos(" + LinkProximo + ")";
hlkAnterior.NavigateUrl = "javascript:Fotos(" + LinkAnterior + ")";

//Se o ItemIndex for zero significa que não há hyperlink anterior.

if (e.Item.ItemIndex == 0)
hlkAnterior.Visible = false;

// Se o ItemIndex for igual ao ultimo registro não há hyperlink
               proximo

if (e.Item.ItemIndex == ds.Tables[0].Rows.Count - 1)
hlkProximo.Visible = false;

// Na primeira vez ele começa a montar o script

if (strScript == string.Empty)
{
//Passa o link da primeira imagem

link = div.ClientID;
strScript = "<script type=text/javascript>";
strScript += "function Fotos(Div){" ;
}

Image img = (Image)e.Item.FindControl("img");

/*Passa o caminho da imagem.É preferível mapear no IIS

sua página, assim você passa a URL da imagem*/

img.ImageUrl = "http://localhost" + img.ImageUrl;

//Esconde o resto das imagens

strScript += "document.getElementById(" + div.ClientID +
                         ").style.display = none;";

}
}

Complemente o PageLoad com o seguinte código, após a chamada do método CarregarRepeater():

// Se a div não for nula, ele mostra a imagem

strScript += "if (Div != null){document.getElementById(Div).style.display = block;}}";

strScript += " window.onload=function() { Fotos(" + link+");}";

/* A literal recebe o script montado dinamicamente
e a tag que fecha o comando javascript*/

litScript.Text = strScript + "</script>";

Execute a aplicação. O resultado será parecido com a imagem abaixo.