Demo:
To simulate FaceBook exactly, and extend the html inside a rendered page we can use AJAX, JQuery, Generic handler and a very simple web control.
Here is a sample that I had a play with
PS: Web control been hosted in a assembly called Active.Web.UI.Controls. You must host your web controls in appropriate place and add a reference accordingly
Web Control and Domain Objects
public class PostView : WebControl
{
public Post Post { get; set; }
public PostView()
{
Post = new Post();
}
public override void RenderBeginTag(HtmlTextWriter writer)
{
writer.Write(string.Format("<div class=\"{0}\">", this.GetType().Name));
}
protected override void RenderContents(HtmlTextWriter writer)
{
StringBuilder sb = new StringBuilder();
sb.AppendFormat(
"<div class=\"Header\"><h3>{0}</h3></div>", this.Post.Title);
sb.AppendFormat(
"<div class=\"Content\"><p>{0}</p></div>", this.Post.Content);
writer.Write(sb.ToString());
}
public override void RenderEndTag(HtmlTextWriter writer)
{
writer.Write("</div>");
}
}
[Serializable]
public class Post
{
public string Title { get; set; }
public string Content { get; set; }
}
[Serializable]
public class Posts : List<Post>
{
public Posts(string postId)
{
for (int i = 0; i < 25; i++)
this.Add(new Post() {
Title = string.Format("Post {0}",(i + 1)),
Content = @"There are important differences between plain text files
created by a text editor, and document files created by word processors
such as Microsoft Word, WordPerfect, or OpenOffice.org. Briefly: A plain
text file is represented and edited by showing all the characters as they
are present in the file. The only characters usable for 'mark-up' are the
control characters of the used character set; in practice this is newline,
tab and formfeed. The most commonly used character set is ASCII,
especially recently, as plain text files are more used for programming and
configuration and less frequently used for documentation than in the past.
Documents created by a word processor generally contain fileformat-
specific ""control characters"" beyond what is defined in the character
set. These enable functions like bold, italic, fonts, columns, tables,
etc. These and other common page formatting symbols were once associated
only with desktop publishing but are now commonplace in the simplest word
processor.Word processors can usually edit a plain text file and save in
the plain text file format. However one must take care to tell the program
that this is what is wanted. This is especially important in cases such as
source code, HTML, and configuration and control files. Otherwise the file
will contain those ""special characters"" unique to the word processor's
file format and will not be handled correctly by the utility the files
ere intended for." });
}
}
Generic Hander - Named PostHandler.ashx
public class PostHandler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
int limit = int.Parse(context.Request.QueryString.Get("uBound"));
string postId = context.Request.QueryString.Get("postId");
Posts posts = new Posts(postId);
StringBuilder sb = new StringBuilder();
if (limit > 5)
{
sb.AppendFormat("::{0};", limit + 5 > posts.Count ? false : true);
for (int i = limit - 5; i < limit; i++)
{
StringBuilder s = new StringBuilder();
StringWriter tw = new StringWriter(s);
HtmlTextWriter htw = new HtmlTextWriter(tw);
(new PostView() { Post = posts[i] }).RenderControl(htw);
sb.Append(s.ToString());
}
}
context.Response.Write(sb.ToString());
}
public bool IsReusable
{
get
{
return false;
}
}
}
TestPage
<%@ Page Language="C#" AutoEventWireup="true" %>
<%@ Import Namespace="Active.Web.UI.Controls" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Page</title>
<script src="Scripts/jquery-1.4.1.min.js"
type="text/javascript" language="javascript"></script>
<script runat="server">
private string postId = "pid1234556";
private string startupScript = @"
var limit = 5;
function ShowMorePosts() {{
limit = limit + 5;
$.ajax({{
url: 'Handlers/PostHandler.ashx?uBound=' + limit + ""&postId={0}"",
success: function (data) {{
if (data.match(""^"" + ""::True;"")
!= ""::True;"") $("".ShowMorePosts"").remove();
data = data.replace(/::true;/i, """");
data = data.replace(/::false;/i, """");
$("".PostList"").append(data);
}}
}});
}}
";
protected override void OnInit(EventArgs e)
{
Posts posts = new Posts(this.postId);
base.OnInit(e);
for (int i = 0; i < 5 && i < posts.Count; i++)
this.pnlPostList.Controls.Add(new PostView() { Post = posts[i] });
}
protected override void OnLoad(EventArgs e)
{
base.OnLoad(e);
this.Page.ClientScript.RegisterStartupScript(
this.GetType(), this.GetType().Name,
string.Format(this.startupScript, this.postId), true);
}
</script>
</head>
<body>
Test Page
<form runat="server" id="form1">
<asp:Panel runat="server" ID="pnlPostList" CssClass="PostList" />
<a href="javascript:ShowMorePosts()"
title="Show More Posts"
class="ShowMorePosts">Show More Posts</a>
</form>
</body>
</html>
