技巧：使用User Control做HTML生成

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

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

publicpartial?class?Comment
{
public?DateTime?CreateTime {?get;?set; }

public?string?Content {?get;?set; }
}

publicpartial?class?Comment
{
private?static?List<Comment> s_comments =?new?List<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(int?pageSize,?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:Repeaterrunat="server"?ID="rptComments">
<ItemTemplate>
時間：<%#(Container.DataItem?as?Comment).CreateTime.ToString()?%><br?/>
內容：<%#(Container.DataItem?as?Comment).Content?%>?
????</ItemTemplate>
<SeparatorTemplate>
<hr?/>
</SeparatorTemplate>
<FooterTemplate>
????????<hr?/>
????</FooterTemplate>
</asp:Repeater>
?
<%if?(this.PageIndex > 1)
{?%>
<a?href="/ViewItem.aspx?page=<%= this.PageIndex - 1?%>"?title="上一頁">上一頁</a> 
<%}?%>

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

publicpartial?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>

publicpartial?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"],?out?result);

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
內容：我們下午沒有課

這張頁面的功能非常簡單，那就是察看評論。當前評論的頁碼會使用QueryString的page項進行指定，然后在ViewItem.aspx里獲取到并且設置ItemComments.ascx控件的屬性。ItemComments控件會根據自身屬性來獲取數據，進行綁定，至于顯示內容，全都定義在ascx中了。由于需要分頁功能，這個評論控件中還包含了上一頁和下一頁的鏈接，他們鏈接的目標很簡單，就是ViewItem.aspx頁，并且加上頁碼的Query String而已。

功能是完成了，不過用著用著忽然覺得不妥，為什么呢？因為我們在翻頁，或者用戶發布評論的時候，整張頁面都刷新了。這可不好，要知道可能ViewItem頁中還有其他幾個顯示部分，它們可是不變的。而且如果其他幾個部分也需要分頁，那么可能就需要保留頁面上每一部分的當前頁碼，這樣開發的復雜性還是比較高的。

那么我們不如用AJAX吧。無論是用戶察看評論時進行翻頁還是發表評論，都不會對頁面上的其他內容造成影響。要開發這個功能，自然需要服務器端的支持，那么該怎么做呢？一般我們總是有兩種選擇：

服務器端返回JSON數據，在客戶端操作DOM進行呈現。
服務器端直接返回HTML內容，然后在客戶端設置容器（例如上面id為comments的div）。

不過無論采用哪種做法，“呈現”的邏輯一般總是另寫一遍（第一次的呈現邏輯寫在了ItemComments.ascx中）。如果使用第1種做法，那么呈現邏輯就需要在客戶端通過操作DOM進行呈現；如果使用第2種做法，那么就要在服務器端進行字符串拼接。無論哪種做法都違背了DRY原則，當ItemComments.ascx里的呈現方式修改時，另一處也要跟著修改。而且無論是操作DOM元素還是拼接字符串維護起來都比較麻煩，開發效率自然也就不高了。

如果我們能夠直接從ItemComments控件獲得HTML內容該多好啊——那么我們就這么做吧。請看如下代碼（GetComments.ashx）：

publicclass?GetComments?:?IHttpHandler
{
public?void?ProcessRequest(HttpContext?context)
{
context.Response.ContentType =?"text/plain";

ViewManager<ItemComments> viewManager =?new?ViewManager<ItemComments>();
ItemComments?control = viewManager.LoadViewControl("~/ItemComments.ascx");

control.PageIndex =?Int32.Parse(context.Request.QueryString["page"]);
control.PageSize = 3;

context.Response.Write(viewManager.RenderView(control));
}

public?bool?IsReusable { ... }
}

很簡單的代碼，不是嗎？創建對象，設置屬性，然后通過Response.Write輸出而已。實在沒什么大不了的——不過關鍵就在于ViewManager類，我們來看一下它是怎么實現的：

publicclass?ViewManager<T>?where?T :?UserControl
{
private?Page?m_pageHolder;

public?T LoadViewControl(string?path)
{
this.m_pageHolder =?new?Page();
return?(T)this.m_pageHolder.LoadControl(path);
}

public?string?RenderView(T control)
{
StringWriter?output =?new?StringWriter();

this.m_pageHolder.Controls.Add(control);
HttpContext.Current.Server.Execute(this.m_pageHolder, output,?false);

return?output.ToString();
}
}

ViewManager中只有兩個方法：LoadViewControl和RenderView。LoadViewControl方法的作用是創建一個Control實例并返回，RenderView方法的作用則就是生成HTML了。這個實現方式的技巧在于使用了一個新建的Page對象作為生成控件的“容器”，而最后其實我們是將Page對象的整個生命周期運行一遍，并且將結果輸出。由于這個空的Page對象不會產生任何其他代碼，因此我們得到的，就是用戶控件生成的代碼了。

不過要實現這個AJAX效果，還需要做兩件事情。

第一，就是簡單修改一下ItemComments控件中的翻頁鏈接，讓它被點擊時調用一個JavaScript函數。例如“上一頁”的代碼就會變成：

<ahref="/ViewItem.aspx?page=<%= this.PageIndex - 1?%>"?title="上一頁"
onclick="return getComments(<%= this.PageIndex - 1?%>);">上一頁</a>

第二，就是實現getComments這個客戶端方法。在這里我使用了prototype框架，好處就是能夠用相當簡潔的代碼來做到替換HTML的AJAX效果：

<scripttype="text/javascript"?language="javascript">
function?getComments(pageIndex)
{
new?Ajax.Updater(
"comments",
"/GetComments.ashx?page="?+ pageIndex +?"&t="?+?new?Date(),
{ method:?"get"?});?

return?false;?// IE only
}
</script>

大功告成。

其實就像之前所說的那樣，使用UserControl進行HTML代碼生成是一個十分常用的技巧。尤其在AJAX應用越來越普及的情況下，合理使用上面提到的方式可以方便的為我們的應用添加AJAX效果。而且很多情況下，我們即使不需要在頁面上顯示內容，也可以將內容使用UserControl進行編輯。因為編寫UserControl比拼接字符串的方式無論是在開發效率上還是可維護性上都高出許多。由于這個方式其實使用了WebForms這個久經考驗的模型，因此在執行效率方面也是相當高的。此外，就剛才的例子來說，使用UserCotrol進行HTML生成還有其他好處：