我在做采购系统时，因为使用了ASP.NET AJAX的UpdatePanel的控件，可以使得页面局部刷新显示。但是使用起来问题还是很多。
下面列出了一种情况，花了将近5个小时才算解决，虽然不是很完美，但是对于一般应用应该够了。
应用背景：在采购系统里，因为一个产品可以有多个供应商，同样一个供应商可以有多个产品。所以产品和供应商是多对多的关系。
在产品页面，用户选择一个产品，我们希望他可以选择供应商。如下图，选择“得利纸业”，然后在单击“关联供应商”，就弹出供应商页面，让用户选择供应商。
其实，如果是采用刷新技术，这种功能很好实现。让父页面刷新一下，解决方法还是非常简单的。常规的解决方法大都是用 window.open()弹出子页面，
然后在子页面关闭时，刷新父页面就完成了。但是，因为父页面全刷新，用户体验非常差。
刚开始，我感觉问题很简单，bootstrap有model模板（详见 http://v3.bootcss.com/javascript/） ，代码类似如下
<a href="#" class="btn btn-sm bg-green btn-flat" data-toggle="modal" data-target=".bs-example-modal-lg">关联供应商</a>
用户单击关联供应商时，弹出在产品列表页面的一个层。（注意：是层，所以这里没有父-子页面，为的就是局部刷新），代码类似如下
<asp:UpdatePanel ID="UpdatePanel5" runat="server">
<ContentTemplate>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<asp:linkbutton Text="分类A" runat=server id="c1" />
<asp:linkbutton Text="分类B" runat=server id="c21" />
<asp:gridview runat="server" id="prod"></asp:gridview>
<asp:Button ID="btn_connection_supply" runat="server" Text="关联供应商" OnClick="btn_connection_supply_Click" />
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
弹出的层，放到UpdatePanel里，在UpdatePanel，左边是ASP.NET LinkButton显示分类名称，右边是GridView显示分类结果，下部一个Button，单击“关联供应商”，
感觉很完美。但是实际测试，问题来了。当用户单击左边分类名称时，白色弹框消失了，用户根本没有时间选择右边的商户列表，更麻烦的是白色消失后，弹出的阴影背景还在，整个页面像死在那里了。只有重新刷新页面。
问题出现了，就开始想办法解决。首先想，用户单击左边Linkbutton，因为是异步回发，最简单的方式，是在回发回来时，仍然让白色的供应商页面显示。查了一下Bootstrap，发现有函数
Bootstrap提供了show函数，可以显示调用，让弹窗显示。
因此，我在LinkButton里，调用了此方法，代码类似如下
ScriptManager.RegisterStartupScript(button, typeof(LinkButton),
"init", "$(".pop").show(true);", true);
很奇怪，跟踪了返回解决，发现虽然服务器执行了，客户端没有执行。我记得我在做日志系统时，这个代码是执行了，唯一的区别是：
在采购系统里，我将UpdatePanel的 ChildrenAsTriggers设置为"False" UpdateMode设置"Conditional" ，为的就是不让子刷新时，父跟着刷新。
看了Bootstrap无法解决了，只能够通过ScriptManager解决， Sys.WebForms.PageRequestManager提供了一系列的Request客户端页面生命周期，详见
https://msdn.microsoft.com/zh-cn/library/bb311028.aspx
所以，我在LinkButton的返回时，执行endRequest
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function () {
$(".model").show(true)
});
然而，这种情况得到了相反的结果，白色页面关不掉了。正常情况下，用户在单击“确认管理供应商”时，页面就应该关闭，现在又关不掉了。
看来，我还要区分endrequest的请类似，其另外一种方法是：应该可以判断用户提交的Button类型。函数原型如下. 其实这里还有一个问题没有解决，如果GridView供应商分页，同样单击上一页，下一页，也会出现这个问题。看来问题越来越多。
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function (send,arg) {
$(".model").show(true)
});
此时，我已经精疲力尽，算了，不做了，去吃饭了。
吃过饭后，突然想出来一个方法：为什么要服务器分页，不是有JS 的DataTable，以前用过他，他本身就可以客户端分页啊。
去http://www.datatables.net/ 看一下演示（注：DataTable默认使用Google提供Jquery CDN，因为大陆屏蔽了Google，所以演示站点无法打开，可以在Host里增加配置解决。）
dataTable默认提供客户端分页，只要table增加一个id，就可以自动分页，排序，模糊查询
$('#tbl_supply2').DataTable(
{
}
)
可是DataTable，就在我认为已经好的时候，问题又来了。再我测试时，选择了产品，单击“关联供应商”时，系统调用 $('#tbl_supply2').DataTable() 。但是可能用户没做任何操作关闭了弹窗，又再次单击了“关联供应商”。
此处会出现一个错误“DataTable已经被初始化”。原来用户第一次单击关联供应商时，DataTable进行了初始化。再次单击时，因为已经初始化了，所以会出错。这个问题解决起来会比较简单，只要在document.Ready()里进行进行初始化就可以了。经过测试发现，因为在产品列表里，也用了AJAX，在异步回发时，页面结构已经改变，所以Ready()事件里执行会有问题。
赶快看看DataTable的接口。后来在其API里提供里找到了相关介绍 http://datatables.net/reference/option/destroy 可以利用其destroy参数
代码只要更改为：
$('#tbl_supply2').DataTable( { destroy: true } )
就可以了。
因此，最后的函数如下：增加了Ordering参数，禁止排序，lengthMenu设置分页为5或者10。
function pageSupply() { $('#tbl_supply2').DataTable( { destroy: true, "ordering": false, "info": false, "lengthMenu": [5, 10] } ) };
最后的页面就是完成的页面 可以去演示 http://demo.dotnetcms.org/purchase/ 查看。 另外，说说不完美的，因为是客户端分页，所以大量数据可能会影响性能。
以前给一个客户端，他们有2000多个用户列表使用DataTable分页，用户打开时，2000多行分页经常会卡。不过，在采购系统里，应该不会有2000个供应商，对于应付一二百个
供应商，DataTable 客户端分页排序，还是绰绰有余的。
