DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX詳解 >> 技巧及說明:使用UserControl做HTML生成
技巧及說明:使用UserControl做HTML生成
編輯:AJAX詳解     

User Control大家肯定不會陌生,在使用ASP.Net的過程中,除了ASPx頁面,最常見的就莫過於ascx了。ascx是一個有獨立邏輯的組件,提供了強大的復用特性,合理使用,能夠大大提高開發效率。通過User Control直接生成Html內容其實已經是一個比較常用的技巧了(尤其在AJax時代),不過網絡上這方面的內容比較少,很多人還是在苦苦地拼接字符串,因此在這裡我通過一個實例簡單介紹一下這個技巧。

  對一個對象(文章,圖片,音樂,etc.)進行評論是應用中最常見的功能之一。首先,我們定義一個Comment類,以及其中會用到的“獲取”方法:

public partial class Comment
{
    public DateTime CreateTime { get; set; }
 
    public string Content { get; set; }
}
 
public partial class Comment
{
    private static List<Comment> s_comments = newList<Comment>
    {
        new Comment
        {
            CreateTime = DateTime.Parse("2007-1-1"),
            Content = "今天天氣不錯"
        },
        new Comment
        {
            CreateTime = DateTime.Parse("2007-1-2"),
            Content = "挺風和日麗的"
        },
        new Comment
        {
            CreateTime = DateTime.Parse("2007-1-3"),
            Content = "我們下午沒有課"
        },
        new Comment
        {
            CreateTime = DateTime.Parse("2007-1-1"),
            Content = "這的確挺爽的"
        }
    };
 
    public static List<Comment> GetComments(intpageSize, int pageIndex, out int totalCount)
    {
        totalCount = s_comments.Count;
 
        List<Comment> comments = new List<Comment>(pageSize);
 
        for (int i = pageSize * (pageIndex - 1);
            i < pageSize * pageIndex && i < s_comments.Count; i++)
        {
            comments.Add(s_comments[i]);
        }
 
        return comments;
    }
}

  為了顯示一個評論列表,我們可以使用一個用戶控件(ItemComments.ASPx)來封裝。自然,分頁也是必不可少的:

<ASP:Repeater runat="server" ID="rptComments">
    <ItemTemplate>
        時間:<%# (Container.DataItem asComment).CreateTime.ToString() %><br />
        內容:<%# (Container.DataItem asComment).Content %> 
    </ItemTemplate>
    <SeparatorTemplate>
        <hr />
    </SeparatorTemplate>
    <FooterTemplate>
        <hr />
    </FooterTemplate>
</ASP:Repeater>
 
<% if (this.PageIndex > 1)
   { %>
        <a href="/VIEwItem.ASPx?page=<%= this.PageIndex - 1 %>" title="上一頁">上一頁</a>&nbsp;
<% } %>

<% if (this.PageIndex * this.PageSize <this.TotalCount)
   { %>
        <a href="/VIEwItem.ASPx?page=<%= this.PageIndex + 1 %>" title="上一頁">下一頁</a>
<% } %>

public partial class ItemComments : System.Web.UI.UserControl
{
    protected override void OnPreRender(EventArgs e)
    {
        base.OnPreRender(e);
 
        this.rptComments.DataSource =Comment.GetComments(this.PageSize,
            this.PageIndex, out this.m_totalCount);
        this.DataBind();
    }
 
    public int PageIndex { get; set; }
 
    public int PageSize { get; set; }
 
    private int m_totalCount;
    public int TotalCount
    {
        get
        {
            return this.m_totalCount;
        }
    }

  然後再頁面(VIEwItem.ASPx)中使用這個組件:

<div id="comments"><demo:ItemCommentsID="itemComments" runat="server" /></div>

public partial class VIEwItem : System.Web.UI.Page
{
    protected void Page_Load(object sender,EventArgs e)
    {
        this.itemComments.PageIndex =this.PageIndex;
    }
 
    protected int PageIndex
    {
        get
        {
            int result = 0;
           Int32.TryParse(this.Request.QueryString["page"], outresult);
 
            return result > 0 ? result : 1;
        }
    }

  打開VIEwItem.ASPx之後效果如下:

時間:2007/1/1 0:00:00
內容:今天天氣不錯
時間:2007/1/2 0:00:00
內容:挺風和日麗的
時間:2007/1/3 0:00:00
內容:我們下午沒有課
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved