Temos dois exemplos um pegando o conteúdo de RSS e montando uma lista via javascript, no segundo caso que renderiza o HTML é um WebControl contendo um Repeater, então vamos para o código.
Antes de mais nada crie um novo projeto Web e monte o mesmo com a estrutura abaixo.
O FeederLoader.cs representa o Proxy entre a fonte de dados e a requisição AJAX, nela usamos o WebClient para baixar um RSS e devolvemos para o navegador, e o código dela e este:
public class FeederLoader
{
public FeederLoader()
{
}
public string Load(string url)
{
WebClient client = new WebClient();
byte[] buffer = client.DownloadData(url);
return UTF8Encoding.UTF8.GetString(buffer);
}
O método Load baixa o conteúdo da url usando o WebClient e devolve como uma String UTF-8.
Partimos agora para o Handler FeederJS.ashx
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/xml";
FeederLoader Loader = new FeederLoader();
System.Threading.Thread.Sleep(1000); //só pra ficar cool
string rss = Loader.Load("http://newbie-x11.blogspot.com/feeds/posts/default?alt=rss");
context.Response.Write(rss);
context.Response.End();
}
No método ProcessRequest usamos o FeederLoad pra baixar o RSS deste blog :-] , e devolver para o XML navegador.
Agora a página Web, EmJavaScript.aspx
<style type="text/css">
.Loading
{
background-image: url('images/loader.gif');
background-repeat:no-repeat;
}
</style>
<div id="master">
<div id="static">
Como as vezes tenho uma alta enorme de creatividade não vou escrever nada aqui.
</div>
<div id="dynamic">
</div>
</div>
<div>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var ajaxOption = {
type: "GET",
url: "handlers/FeederJS.ashx",
dataType : "xml",
success : function(data){
var html = "<ul>"
$(data).find('item').each(function(){
var titulo = $(this).find('title').text();
html += "<li>"+titulo+"</li>";
});
html += "</ul>";
$("#dynamic").append(html);
$("#dynamic").attr("class","");
}
};
$("#dynamic").attr("class","Loading");
$.ajax(ajaxOption);
});
</script>
</div>
Acima antes de fazer a requisição em AJAX , mudamos o CSS do elemento que abriga o conteúdo dinâmico para a classe que contem a imagem carregando, na Requisição (success), fazemos o loop no xml e montamos uma lista, preenchemos o conteudo carregado no elemento, e removo a classe de CSS .Loading, e Badabum..
Agora se você não quer ficar montando conteudo via JavaScript demonstro abaixo com poucas modificações, fazemos a mesma coisa só que usando o um Repeater e um User Control, vamos lá crie o Controle, então adicione um novo Web User Control com o nome de Listageml.ascx, e o código dele segue abaixo.
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Listageml.ascx.cs" Inherits="controles_Listageml" %>
<div>
<asp:Repeater ID="Repeater1" runat="server">
<HeaderTemplate>
<ul>
</HeaderTemplate>
<ItemTemplate>
<li>
<%# Eval("title") %>
</li>
</ItemTemplate>
<FooterTemplate>
</ul></FooterTemplate>
</asp:Repeater>
</div>
O .cs:protected void Page_Load(object sender, EventArgs e)
{
XmlTextReader reader = new XmlTextReader("http://g1.globo.com/Rss2/0,,AS0-5597,00.xml");
DataSet ds = new DataSet();
ds.ReadXml(reader);
Repeater1.DataSource = ds.Tables["item"];
Repeater1.DataBind();
}
Creio que não seja necessário comentar o bloco acima, agora vamos ao Handler FeederASP.ashx, que tem modificações significativas:
public void ProcessRequest (HttpContext context) {
Page page = new Page();
UserControl ctl = (UserControl)page.LoadControl("~/controles/Listageml.ascx");
StringWriter writer = new StringWriter();
System.Threading.Thread.Sleep(1000); //só pra ficar cool
page.Controls.Add(ctl);
HttpContext.Current.Server.Execute(page, writer, false);
context.Response.ContentType = "text/plain";
context.Response.Write(writer.ToString());
context.Response.End();
}
Acima usamos estas linhas malucas para renderizar o HTML do controle, se tiver a necessidade de passar parâmetros para o controle pode usar os atributos, mas compensa dar um passeio pelo Google e ler sobe WebControls.
Passamos agora para o arquivo EmASP.aspx, a única mudança é no Java script:
<script type="text/javascript">
$(document).ready(function(){
var ajaxOption = {
type: "GET",
url: "handlers/FeederASP.ashx",
dataType : "text",
success : function(data){
$("#dynamic").append(data);
$("#dynamic").attr("class","");
}
};
$("#dynamic").attr("class","Loading");
$.ajax(ajaxOption);
});
</script>Simplificou bastante, aqui só pegamos o conteúdo pronto e colocamos no elemento.
Pronto é isso, pode baixar o código fonte aqui.