none
Caixa de noticias com imagens e textos. RRS feed

  • Pergunta

  • Bom dia a todos.

    Estou precisando fazer uma situação na intranet da empresa, e como não tenho um bom conhecimento em desenvolvimento web, estou meio perdido.

    Tenho uma tabela chamada

    tblIntraOperacoesNews 

    Campos:
    CodOperacoesNews int
    DescOperacoesNewsTitulo varchar(1000)
    DescOperacoesNews varchar(8000)
    ImgOperacoesNews image


    Preciso colocar uma rotação de noticias com imagens na pagina Default.aspx


    Eu gostaria de ter algo parecido com o site da IG.

    Com a diferença que na minha pagina deve ficar assim e só com 5 notícias e deve ficar dessa forma.

    Eu procurei algumas coisas na internet, mas não achei algo parecido

    quinta-feira, 12 de dezembro de 2013 14:07

Respostas

  • Exemplo:

    ASPX:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebPainel.aspx.cs" Inherits="WebApplication1.WebPainel" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ScriptManager ID="ScriptManager1" EnableScriptGlobalization="true" runat="server"></asp:ScriptManager>
            <div>
                <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" ClientIDMode="AutoID" EnableViewState="true"  ViewStateMode="Enabled" runat="server">
                    <ContentTemplate>
                        <asp:GridView runat="server" ID="GridPainel"
                            AllowPaging="True" ItemType="WebApplication1.Models.Painel"
                            AutoGenerateColumns="False"
                            BorderStyle="Solid"
                            CellPadding="1"
                            CellSpacing="1"
                            Height="160px"
                            Width="292px" OnPageIndexChanging="GridPainel_PageIndexChanging" PageSize="1">
                            <Columns>
                                <asp:TemplateField>
                                    <ItemTemplate>
                                        <div>
                                            <asp:Image ImageUrl='<%# Eval("Url") %>' runat="server" /></div>
                                        <div>
                                            <asp:Label Text='<%#Eval("Title") %>' runat="server" /></div>
                                    </ItemTemplate>
                                </asp:TemplateField>
                            </Columns>
                            <PagerSettings Position="Bottom" 
                                PageButtonCount="5" 
                                FirstPageText="Primeira" 
                                LastPageText="Última" 
                                NextPageText="Próxima"
                                PreviousPageText="Voltar"
                                Mode="NextPrevious" />                                                
                        </asp:GridView> 
                        <table style="width:292px">
                            <tr>                            
                                <td style="width:50%; text-align:left;"><button type="button" onclick="VoltarGrid()"><< Voltar</button></td>                              
                                <td style="width:50%; text-align:right;"><button type="button" onclick="AvancarGrid()">Avançar >></button></td>
                            </tr>
                        </table>                   
                    </ContentTemplate>                
                </asp:UpdatePanel>  
                
            </div>
        </form>
        <script>
            function AvancarGrid() {
                __doPostBack('GridPainel', 'Page$Next');
            }
            function VoltarGrid() {
                __doPostBack('GridPainel', 'Page$Prev');
            }        
        </script>
    </body>
    </html>
    

    Tela Exibida:

    Código para Geração da tela em Cs - Classe utilizada e Codebebind da pagina

    Classe

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    
    namespace WebApplication1.Models
    {
        public class Painel
        {
            public string Url { get; set; }
            public string Title { get; set; }
        }
        public class Paineis : ICollection<Painel>
        {
            private ICollection<Painel> painel;
            public Paineis(){
                this.painel = new List<Painel>();            
            }   
            public void Add(Painel item)
            {
                this.painel.Add(item);
            }
    
            public void Clear()
            {
                this.painel.Clear();
            }
    
            public bool Contains(Painel item)
            {
                return this.painel.Contains(item);
            }
    
            public void CopyTo(Painel[] array, int arrayIndex)
            {
                this.painel.CopyTo(array, arrayIndex);
            }
    
            public int Count
            {
                get { return this.painel.Count(); }
            }
    
            public bool IsReadOnly
            {
                get { return false; }
            }
    
            public bool Remove(Painel item)
            {
                return this.painel.Remove(item);
            }
    
            public IEnumerator<Painel> GetEnumerator()
            {
                return this.painel.GetEnumerator();
            }
    
            System.Collections.IEnumerator System.Collections.IEnumerable.GetEnumerator()
            {
                return this.GetEnumerator();
            }
        }
    }

    Código

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using WebApplication1.Models;
    
    namespace WebApplication1
    {
        public partial class WebPainel : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!IsPostBack)
                {
                    Carregar_Grid();
                }
            }                         
            private void Carregar_Grid()
            {
                Paineis paineis = new Paineis();
                paineis.Add(new Painel() { Url = "~/Imagens/1.jpg", Title = "Imagem 1" });
                paineis.Add(new Painel() { Url = "~/Imagens/2.jpg", Title = "Imagem 2" });
                paineis.Add(new Painel() { Url = "~/Imagens/3.jpg", Title = "Imagem 3" });
                paineis.Add(new Painel() { Url = "~/Imagens/4.jpg", Title = "Imagem 4" });
    
                GridPainel.DataSource = paineis.ToList();
                GridPainel.DataBind();
            }
    
            protected void GridPainel_PageIndexChanging(object sender, GridViewPageEventArgs e)
            {
                GridPainel.PageIndex = e.NewPageIndex;
                Carregar_Grid();
            }
        }
    }

    A tela está em ajax com ScriptManager e Update Panel!

    Seria uma forma!

    A outra seria com http://www.asp.net/ajaxlibrary/AjaxControlToolkitSampleSite/

    com esse componente: http://www.asp.net/AjaxLibrary/AjaxControlToolkitSampleSite/SlideShow/SlideShow.aspx

    Bom ai eu acho que você consegue escolher!!!


    Fulvio Cezar Canducci Dias

    • Marcado como Resposta Giovani Cr quarta-feira, 18 de dezembro de 2013 14:37
    sexta-feira, 13 de dezembro de 2013 19:11

Todas as Respostas

  • Amigo não é dificil o problema maior e que você está aprendendo neh!

    mais isso ai é simples de mais amigo, é uma paginação de um GridView com esse Layout no modo Template !!!

    Ou então usar um maneira com JavaScript que ao clica carrega o Indice 2 e assim vai!

    Não sei como te ajudar?


    Fulvio Cezar Canducci Dias

    sexta-feira, 13 de dezembro de 2013 01:17
  • Amigo não é dificil o problema maior e que você está aprendendo neh!

    mais isso ai é simples de mais amigo, é uma paginação de um GridView com esse Layout no modo Template !!!

    Ou então usar um maneira com JavaScript que ao clica carrega o Indice 2 e assim vai!

    Não sei como te ajudar?


    Fulvio Cezar Canducci Dias

    Fulvio, obrigado pela resposta.

    Eu pesquisei e não achei nada com o GridView, você teria alguma exemplo?

    sexta-feira, 13 de dezembro de 2013 17:55
  • Exemplo:

    ASPX:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebPainel.aspx.cs" Inherits="WebApplication1.WebPainel" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ScriptManager ID="ScriptManager1" EnableScriptGlobalization="true" runat="server"></asp:ScriptManager>
            <div>
                <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" ClientIDMode="AutoID" EnableViewState="true"  ViewStateMode="Enabled" runat="server">
                    <ContentTemplate>
                        <asp:GridView runat="server" ID="GridPainel"
                            AllowPaging="True" ItemType="WebApplication1.Models.Painel"
                            AutoGenerateColumns="False"
                            BorderStyle="Solid"
                            CellPadding="1"
                            CellSpacing="1"
                            Height="160px"
                            Width="292px" OnPageIndexChanging="GridPainel_PageIndexChanging" PageSize="1">
                            <Columns>
                                <asp:TemplateField>
                                    <ItemTemplate>
                                        <div>
                                            <asp:Image ImageUrl='<%# Eval("Url") %>' runat="server" /></div>
                                        <div>
                                            <asp:Label Text='<%#Eval("Title") %>' runat="server" /></div>
                                    </ItemTemplate>
                                </asp:TemplateField>
                            </Columns>
                            <PagerSettings Position="Bottom" 
                                PageButtonCount="5" 
                                FirstPageText="Primeira" 
                                LastPageText="Última" 
                                NextPageText="Próxima"
                                PreviousPageText="Voltar"
                                Mode="NextPrevious" />                                                
                        </asp:GridView> 
                        <table style="width:292px">
                            <tr>                            
                                <td style="width:50%; text-align:left;"><button type="button" onclick="VoltarGrid()"><< Voltar</button></td>                              
                                <td style="width:50%; text-align:right;"><button type="button" onclick="AvancarGrid()">Avançar >></button></td>
                            </tr>
                        </table>                   
                    </ContentTemplate>                
                </asp:UpdatePanel>  
                
            </div>
        </form>
        <script>
            function AvancarGrid() {
                __doPostBack('GridPainel', 'Page$Next');
            }
            function VoltarGrid() {
                __doPostBack('GridPainel', 'Page$Prev');
            }        
        </script>
    </body>
    </html>
    

    Tela Exibida:

    Código para Geração da tela em Cs - Classe utilizada e Codebebind da pagina

    Classe

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    
    namespace WebApplication1.Models
    {
        public class Painel
        {
            public string Url { get; set; }
            public string Title { get; set; }
        }
        public class Paineis : ICollection<Painel>
        {
            private ICollection<Painel> painel;
            public Paineis(){
                this.painel = new List<Painel>();            
            }   
            public void Add(Painel item)
            {
                this.painel.Add(item);
            }
    
            public void Clear()
            {
                this.painel.Clear();
            }
    
            public bool Contains(Painel item)
            {
                return this.painel.Contains(item);
            }
    
            public void CopyTo(Painel[] array, int arrayIndex)
            {
                this.painel.CopyTo(array, arrayIndex);
            }
    
            public int Count
            {
                get { return this.painel.Count(); }
            }
    
            public bool IsReadOnly
            {
                get { return false; }
            }
    
            public bool Remove(Painel item)
            {
                return this.painel.Remove(item);
            }
    
            public IEnumerator<Painel> GetEnumerator()
            {
                return this.painel.GetEnumerator();
            }
    
            System.Collections.IEnumerator System.Collections.IEnumerable.GetEnumerator()
            {
                return this.GetEnumerator();
            }
        }
    }

    Código

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using WebApplication1.Models;
    
    namespace WebApplication1
    {
        public partial class WebPainel : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!IsPostBack)
                {
                    Carregar_Grid();
                }
            }                         
            private void Carregar_Grid()
            {
                Paineis paineis = new Paineis();
                paineis.Add(new Painel() { Url = "~/Imagens/1.jpg", Title = "Imagem 1" });
                paineis.Add(new Painel() { Url = "~/Imagens/2.jpg", Title = "Imagem 2" });
                paineis.Add(new Painel() { Url = "~/Imagens/3.jpg", Title = "Imagem 3" });
                paineis.Add(new Painel() { Url = "~/Imagens/4.jpg", Title = "Imagem 4" });
    
                GridPainel.DataSource = paineis.ToList();
                GridPainel.DataBind();
            }
    
            protected void GridPainel_PageIndexChanging(object sender, GridViewPageEventArgs e)
            {
                GridPainel.PageIndex = e.NewPageIndex;
                Carregar_Grid();
            }
        }
    }

    A tela está em ajax com ScriptManager e Update Panel!

    Seria uma forma!

    A outra seria com http://www.asp.net/ajaxlibrary/AjaxControlToolkitSampleSite/

    com esse componente: http://www.asp.net/AjaxLibrary/AjaxControlToolkitSampleSite/SlideShow/SlideShow.aspx

    Bom ai eu acho que você consegue escolher!!!


    Fulvio Cezar Canducci Dias

    • Marcado como Resposta Giovani Cr quarta-feira, 18 de dezembro de 2013 14:37
    sexta-feira, 13 de dezembro de 2013 19:11