Usuário com melhor resposta
Caixa de noticias com imagens e textos.

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
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!!!
- Marcado como Resposta Giovani Cr quarta-feira, 18 de dezembro de 2013 14:37
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?
-
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, obrigado pela resposta.
Eu pesquisei e não achei nada com o GridView, você teria alguma exemplo?
-
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!!!
- Marcado como Resposta Giovani Cr quarta-feira, 18 de dezembro de 2013 14:37