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.绑定到GridGrid1.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.绑定到GridGrid1.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" οnclick="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来处理。