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.

Confira outros conte�dos:

Por Uismar Em 2007

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

Nesse artigo mostrarei como fazer um visualizador de imagem utilizando Asp.net com C# e Javascript. Poder� ser utilizado como demonstrativo de imagens de not�cias, de cat�logo de fotos entre outros.

Confira outros conte�dos: