FineUIPro控制元件庫

FineUIPro是一套基於jQuery的專業ASP.NET控制元件庫，始於2008年的開源版FineUI控制元件庫。

當年為了提升專案的開發效率，降低程式碼複雜度，減少對CSS和JavaScript的依賴，我們提出了"No JavaScript, No CSS, No UpdatePanel，No ViewState，No WebServices"的口號，現在看起來仍然激動人心。

首先，JavaScript靈活性與複雜性使得大型專案的開發備受挑戰，FineUIPro嘗試使用伺服器端的強型別語言（C#，VB.NET）來代替大部分的JavaScript實現，不僅可以利用IDE的強大功能（智慧提示，程式碼重構），而且強型別語言的編譯時錯誤檢查也是一個加分項。

其次，FineUIPro提供統一的控制元件集合和頁面主題，使得我們無需在程式碼中自定義CSS樣式，不僅減少編碼和除錯CSS的工作量，而且能夠保持整個專案中頁面風格的統一和美觀。

最後，FineUIPro內建了AJAX的互動支援，使得我們無需寫一行JavaScript程式碼，就能把整個頁面的回發變為AJAX過程。另外，FineUIPro也內建了IFrame支援，有助於在頁面層級對程式碼進行解耦合。

那麼，FineUIPro是如何工作的呢？FineUIPro的控制元件使用和原生的ASP.NET控制元件有哪些異同點？FineUIPro的AJAX互動過程又是什麼樣子的呢？

為了回答這些問題，我們將分別使用FineUIPro和ASP.NET控制元件來實現一個伺服器端分頁的表格頁面。

ASP.NET的表格控制元件

首先來看下ASP.NET的原生GridView控制元件定義：

<asp:GridView ID="Grid1" Title="表格" Width="800px" DataKeyNames="Id,Name" ShowBorder="true"
	runat="server" EnableCheckBoxSelect="True" AutoGenerateColumns="False">
	<Columns>
		<asp:BoundField DataField="Name" DataFormatString="{0}" HeaderText="姓名" />
		<asp:TemplateField HeaderText="性別">
			<ItemTemplate>
				<asp:Label ID="Label2" runat="server" Text='<%# GetGender(Eval("Gender")) %>'></asp:Label>
			</ItemTemplate>
		</asp:TemplateField>
		<asp:BoundField DataField="EntranceYear" HeaderText="入學年份" />
		<asp:CheckBoxField DataField="AtSchool" HeaderText="是否在校" />
		<asp:HyperLinkField HeaderText="所學專業" DataTextField="Major"
			DataTextFormatString="{0}" DataNavigateUrlFields="Major" DataNavigateUrlFormatString="http://gsa.ustc.edu.cn/search?q={0}"
			Target="_blank" />
		<asp:ImageField DataImageUrlField="Group" DataImageUrlFormatString="~/res/images/16/{0}.png"
			HeaderText="分組">
		</asp:ImageField>
	</Columns>
</asp:GridView>

由於GridView並不支援伺服器端分頁，因此我們沒有設定表格的AllowPaging和PageSize屬性，而是自定義了兩個按鈕來實現伺服器端分頁：

<asp:Button ID="btnPrevious" CommandName="Previous" runat="server" OnCommand="OnPageButtonClick" Text="Previous" />
<asp:Button ID="btnNext" runat="server" CommandName="Next" OnCommand="OnPageButtonClick" Text="Next" />
Page
<asp:Label runat="server" ID="lblCurrentPage"></asp:Label>
of
<asp:Label runat="server" ID="lblTotalPages"></asp:Label>　　

頁面第一次開啟時需要載入表格資料：

protected void Page_Load(object sender, EventArgs e)
{
	if (!IsPostBack)
	{
		BindGrid();
	}
}

private void BindGrid()
{
	// 1.設定總項數
	int recordCount = GetTotalCount();

	// 2.獲取當前分頁資料
	DataTable table = GetPagedDataTable(CurrentPageIndex, PAGE_SIZE);

	// 3.繫結到Grid
	Grid1.DataSource = table;
	Grid1.DataBind();

	UpdatePageControls(recordCount);
}　　

繫結表格資料分為如下幾個步驟：

1. 獲取總記錄數

2. 獲取當前分頁資料

3. 繫結分頁資料到表格

其實，表格物件對當前分頁狀態一無所知（第幾頁，總共有幾頁），我們需要自己在頁面上儲存這些資料：

private int CurrentPageIndex
{
	get
	{
		var pageIndexState = ViewState["CurrentPageIndex"];
		if (pageIndexState == null)
		{
			return 0;
		}
		else
		{
			return Convert.ToInt32(pageIndexState);
		}
	}
	set
	{
		ViewState["CurrentPageIndex"] = value;
	}
}
private const int PAGE_SIZE = 5;

private int CalculatePageCount(int recordCount)
{
	int pageCount = recordCount / PAGE_SIZE;
	if (recordCount % PAGE_SIZE != 0)
	{
		pageCount++;
	}
	return pageCount;
}　　

將當前表格分頁索引CurrentPageIndex儲存到ViewState中，以便在後續的頁面回發中獲取分頁索引。

總頁數可以根據當前分頁索引和每頁記錄數計算而來，我們將其邏輯封裝到CalculatePageCount方法中。

最後，來看下UpdatePageControls方法：

private void UpdatePageControls(int recordCount)
{
	int pageCount = CalculatePageCount(recordCount);

	lblTotalPages.Text = pageCount.ToString();
	lblCurrentPage.Text = (CurrentPageIndex + 1).ToString();
	if (CurrentPageIndex == 0)
	{
		btnPrevious.Enabled = false;

		if (pageCount > 0)
		{
			btnNext.Enabled = true;
		}
		else
		{
			btnNext.Enabled = false;
		}
	}
	else
	{
		btnPrevious.Enabled = true;

		if (CurrentPageIndex == pageCount - 1)
		{
			btnNext.Enabled = false;
		}
		else
		{
			btnNext.Enabled = true;
		}
	}
}　　

根據當前表格分頁索引和總頁面設定分頁按鈕的狀態。

此時執行頁面，顯示效果：

點選Next按鈕時，會發起一個頁面回發到後臺事件：

protected void OnPageButtonClick(object sender, CommandEventArgs e)
{
	switch (e.CommandName)
	{
		case "Previous":
			CurrentPageIndex--;
			break;
		case "Next":
			CurrentPageIndex++;
			break;
	}

	BindGrid();
}　　

在分頁按鈕的點選事件中，首先根據e.CommandName來判斷點選了哪個按鈕，然後從ViewState中讀取當前表格分頁索引，最後重新繫結表格資料。

點選Next後頁面截圖如下：

此時頁面的回發是Form表單的POST過程，因此會導致整個頁面的重新整理，使用者體驗並不好。

FineUIPro的表格控制元件

FineUIPro中的大部分實現程式碼和GridView的實現程式碼一樣。

不過由於FineUIPro表格預設支援伺服器端分頁，因此無需在後臺通過ViewState儲存表格分頁索引，也無需自己動手更新分頁按鈕的狀態，因此程式碼要簡單的多。

<f:PageManager ID="PageManager1" AjaxLoadingType="Mask" runat="server" />
<f:Grid ID="Grid1" Title="表格" Width="800px" DataKeyNames="Id,Name" ShowBorder="true" ShowHeader="true"
	AllowPaging="true" IsDatabasePaging="true" PageSize="5" runat="server" EnableCheckBoxSelect="True"
	OnPageIndexChange="Grid1_PageIndexChange">
	<Columns>
		<f:RowNumberField />
		<f:BoundField DataField="Name" DataFormatString="{0}" HeaderText="姓名" />
		<f:TemplateField HeaderText="性別">
			<ItemTemplate>
				<asp:Label ID="Label2" runat="server" Text='<%# GetGender(Eval("Gender")) %>'></asp:Label>
			</ItemTemplate>
		</f:TemplateField>
		<f:BoundField DataField="EntranceYear" HeaderText="入學年份" />
		<f:CheckBoxField RenderAsStaticField="true" DataField="AtSchool" HeaderText="是否在校" />
		<f:HyperLinkField HeaderText="所學專業" DataTextField="Major"
			DataTextFormatString="{0}" DataNavigateUrlFields="Major" DataNavigateUrlFormatString="http://gsa.ustc.edu.cn/search?q={0}" UrlEncode="true"
			Target="_blank" ExpandUnusedSpace="True" />
		<f:ImageField DataImageUrlField="Group" DataImageUrlFormatString="~/res/images/16/{0}.png"
			HeaderText="分組">
		</f:ImageField>
	</Columns>
</f:Grid>　　

這個表格定義和之前的GridView很類似，有幾點不同的地方：

1. PageManager是每一個使用FineUIPro控制元件的頁面都需要的，其中的AjaxLoadingType用來定義AJAX回發的提示型別。

2. 表格控制元件的AllowPaging，IsDatabasePaging，PageSize用來指定伺服器端分頁和分頁記錄大小，這樣就無需自己維護分頁資訊了。

3. 表格控制元件的PageIndexChanged用來定義伺服器端分頁事件。

表格列還有一些特定的屬性，實現不同的顯示效果：

4.1. 表格列定義了RowNumberField，用來顯示行序號。

4.2 CheckBoxField的RenderAsStaticField用來指定複選框的顯示樣式。

4.3 HyperLinkField的ExpandUnusedSpace用來定義本列寬度佔據所有未使用空間。

後臺資料繫結程式碼很簡單：

protected void Page_Load(object sender, EventArgs e)
{
	if (!IsPostBack)
	{
		BindGrid();
	}
}

private void BindGrid()
{
	// 1.設定總項數
	Grid1.RecordCount = GetTotalCount();

	// 2.獲取當前分頁資料
	DataTable table = GetPagedDataTable(Grid1.PageIndex, Grid1.PageSize);

	// 3.繫結到Grid
	Grid1.DataSource = table;
	Grid1.DataBind();
}　　

此時頁面顯示效果：

由於FineUIPro內建了很多主題，因此我們可以在Web.config中設定不同的主題，得到不同的顯示效果：

分頁事件處理函式也很簡單：

protected void Grid1_PageIndexChange(object sender, GridPageEventArgs e)
{
	BindGrid();
}　　

由於FineUIPro表格自行管理分頁資訊，因此我們只需要重新繫結資料即可。

此時點選下一頁，頁面截圖：

此時的回發是AJAX POST過程，整個頁面不會重新整理，在回發過程中，FineUIPro會顯示一個回發提示動畫：

如果僅從程式碼和執行效果對比，我們可以看出FineUIPro的表格控制元件相比ASP.NET原生控制元件，有如下優點：

1. 程式碼有90%和原生控制元件保持一致

2. 程式碼更少（得益於FineUIPro表格對伺服器端分頁的內建支援）

3. 頁面顯示效果更美觀大方，並且可以通過全域性配置切換不同的顯示樣式

4. 分頁過程是AJAX部分重新整理，並內建了提示動畫

另外，全部示例程式碼沒有一行JavaScript和CSS程式碼，但是實際上FineUIPro卻是嚴重依賴JavaScript和CSS來實現頁面效果和互動。

下面我們會深入分析兩個示例的異同。

頁面渲染的對比

雖然兩個示例的大部分ASPX和C#程式碼一模一樣，但是從一開始兩者的實現方式就完全不同。

ASP.NET的表格控制元件

首先來看下ASP.NET表格控制元件生成的頁面HTML程式碼：

簡化後看的更清楚：

<table>
    <tr>
        <th scope="col">姓名</th>
        <th scope="col">性別</th>
        <th scope="col">入學年份</th>
        <th scope="col">是否在校</th>
        <th scope="col">所學專業</th>
        <th scope="col">分組</th>
    </tr>
    <tr>
        <td>陳萍萍</td>
        <td><span id="Grid1_ctl02_Label2">女</span></td>
        <td>2000</td>
        <td><input type="checkbox" checked="checked" disabled="disabled" /></td>
        <td><a href="http://gsa.ustc.edu.cn/search?q=計算機應用技術" target="_blank">計算機應用技術</a></td>
        <td><img src="../res/images/16/1.png" /></td>
    </tr>
</table>

<input type="button" name="btnPrevious" value="Previous" id="btnPrevious" disabled="disabled" />
<input type="button" name="btnNext" value="Next" onclick="javascript:__doPostBack('btnNext','')" id="btnNext" /> 
Page
<span id="lblCurrentPage">1</span> 
of
<span id="lblTotalPages">5</span>　　

可以看出：

1. ASP.NET表格渲染到頁面上是<table>標籤，並且包含了當前頁的全部資料

2. 分頁按鈕最終呼叫的__doPostBack函式，這個函式我們並不陌生，幾乎每個頁面都包含這樣一個預設的定義

<script type="text/javascript">
var theForm = document.forms['form1'];
if (!theForm) {
    theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
</script>　　

毫無疑問，呼叫此回發函數，其實就是對頁面上全域性表單物件的提交（theForm.submit()），這將會是整個頁面的重新整理。

FineUIPro的表格控制元件

FineUIPro表格控制元件生成的頁面HTML程式碼：

簡化一下：

<div id="Grid1_wrapper">
    <div id="Grid1_tpls" class="f-grid-tpls f-hidden">
        <div class="f-grid-tpl" id="Grid1_ftpl_frow0_2">
            <span id="Grid1_ftpl_frow0_2_Label2">女</span>
        </div>
		...
    </div>
</div>

<script type="text/javascript">
	F.load(function() {

		new F.Grid({
			renderTo: '#Grid1_wrapper',
			title: '表格',
			data: [{
				"f0": ["", "陳萍萍", "#@[email protected]#ftpl_frow0_2", "2000", "<i class=\"f-icon f-iconfont f-grid-static-checkbox f-checked\"></i>", "<a href=\"http://gsa.ustc.edu.cn/search?q=%e8%ae%a1%e7%ae%97%e6%9c%ba%e5%ba%94%e7%94%a8%e6%8a%80%e6%9c%af\" target=\"_blank\">計算機應用技術</a>", "<img src=\"/res/images/16/1.png\" class=\"f-grid-imagefield\"></img>"],
				"f1": [101, "陳萍萍"],
				"f6": "frow0"
			}],
			paging: true,
			databasePaging: true,
			pageSize: 5,
			pageIndex: 0,
			recordCount: 22,
			listeners: {
				paging: function(event, pageIndex, oldPageIndex) {
					__doPostBack('Grid1', 'Page$' + pageIndex + '$' + oldPageIndex);
				}
			}
		});
	});
</script>　　

可以看出：

1. 表格資料在JavaScript程式碼中，並渲染到頁面上一個容器（Grid1_wrapper）

2. 分頁事件同樣觸發的是__doPostBack事件

兩相對比，我們可以得出如下結論：

1. ASP.NET表格控制元件直接渲染為table標籤（包含資料）

2. FineUIPro表格控制元件會在頁面上生成一個div佔位符，然後通過JavaScript來渲染出表格控制元件

FineUIPro的做法更加靈活，並且可以實現更加複雜的顯示效果，看下生成的DOM結構：

只所以有這麼多的層次結構，是有很多原因的，簡單來說：

1. FineUIPro中表格是從面板繼承下來的，所以最外層的div節點是面板相關的

div.f-panel
        ->div.f-panel-header
        ->div.f-panel-bodyct
                ->div.f-panel-body

2. f-panel-body裡面的層次才是表格的特定結構

div.f-panel-body

        ->div.f-grid-inner

                ->div.f-grid-headerct

                ->div.f-grid-bodyct

                        ->table.f-grid-table

表格的這個特定DOM層次結構在啟用列鎖定時會變的更加複雜，如下所示：

啟用列鎖定時，f-grid-inner裡面會分裂成兩部分，分別對應於鎖定表格和主表格，FineUIPro會負責這兩部分的同步工作。

由此可知，ASP.NET表格控制元件直接渲染table節點和資料的方式僅適合於簡單的形式，而FineUIPro為了更加好看的介面效果和更加複雜的邏輯實現，必須通過JavaScript來渲染介面和資料。而這一切對於開發人員都是透明的，FineUIPro開發人員只需要寫ASPX表格和C#程式碼即可，剩下的交給我們。

頁面回發的對比

前面分析可知，ASP.NET表格和FineUIPro的分頁回發都是呼叫的__doPostBack函式，為什麼一個是整個頁面重新整理，而另一個是AJAX部分重新整理？

這是因為FineUIPro耍了個小把戲，重寫了__doPostBack函式，翻開FineUIPro的客戶端JavaScript原始碼：

function _fjs_doPostBack(eventTarget, eventArgument, options) {
	$.ajax({
		type: 'POST',
		url: url,
		data: formDataBeforeAJAX,
		dataType: 'text',
		headers: {
			'X-FineUI-Ajax': true
		},
		success: function (data) {
		},
		error: function (xhr, textStatus) {
		},
		complete: function (xhr, textStatus) {
			ajaxComplete(xhr.responseText, textStatus, xhr);
		}
	});
}
	
(function() {
	if (!isUND(__doPostBack)) {
		__originalDoPostBack = __doPostBack;
		__doPostBack = _fjs_doPostBack;
	}
})();　　

這是簡化後的程式碼，可以看到FineUIPro重新賦值：__doPostBack=_fjs_doPostBack;

而在_fjs_doPostBack中，呼叫了jQuery.ajax來發起AJAX請求，當然實際的實現要複雜的多，FineUIPro讓這一切變得透明起來，開發人員甚至不用寫一行JavaScript程式碼就能享受jQuery.ajax的無重新整理回發。

ASP.NET表格的回發（整個頁面重新整理）

瀏覽器中F12，開啟Network選項卡，觀察ASP.NET表格的分頁回發過程：

可以看出：

1. ASP.NET表格頁面回發是整個頁面重新整理，返回的是完整的HTML標籤（包含html,head,body....）

2. 由於是頁面重新渲染，所以頁面資源會重新載入，比如common.css檔案

FineUIPro表格的回發（AJAX部分重新整理）

瀏覽器中F12，開啟Network選項卡，觀察FineUIPro表格的分頁回發過程：

可以看出，請求引數中包含X-Requested-With=XMLHttpRequest引數，說明這是一個AJAX部分重新整理過程

返回的響應正文如下所示：

這是一段JavaScript程式碼，其中包含表格當前頁的資料，並通過表格的客戶端API函式來重現載入表格資料。

由於是部分重新整理，頁面資源無需重新載入，整個頁面DOM節點也無需重建，而且響應正文的大小也要小很多。

原始碼下載

下載後放到FineUIPro官網示例原始碼中即可：

小結

經過上述分析，我們可以得知，FineUIPro使用JavaScript來渲染頁面，並且使用jQuery.ajax來更新頁面控制元件。

對於開發人員來說這一切都是透明的，開發人員只需要關注ASPX和C#程式碼，關注自己的業務既可以了，剩下的都丟給FineUIPro來處理。