Monday, February 22, 2010

Read more panel like facebook wall : Asp.Net


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 { getset; }
    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 { getset; }
    public string Content { getset; }
}
 
[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>
 
 
 
 
 
 

1 comment:

Girish said...

I was looking for such tutorial.
Nice Post. Thank You

Azure Storage Account Types

Defferent Types of Blobs Block blobs store text and binary data. Block blobs are made up of blocks of data that can be managed individually...