FineUIPro控件库深度解析

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": ["", "陈萍萍", "#@TPL@#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官网示例源代码中即可：

https://files.cnblogs.com/files/sanshi/fineuipro_database_paging.zip

小结

经过上述分析，我们可以得知，FineUIPro使用JavaScript来渲染页面，并且使用jQuery.ajax来更新页面控件。

对于开发人员来说这一切都是透明的，开发人员只需要关注ASPX和C#代码，关注自己的业务既可以了，剩下的都丢给FineUIPro来处理。