最近在制作一套ASP.NET控件，已初见雏形

先简单介绍下，这是最近我在开发的一套供自己使用的ASP.NET控件，它扩展了原有的ASP.NET控件的功能，结合了Jquery，用于开发XX管理系统出境最多的数据浏览，查询页面。我的最终目地是如同使用原生态的ASP.NET控件开发WEBFORM一样，只需要拖拖控件，设置设置属性，就可以制作出具备AJAX效果的页面，同时，它不会破坏WEBFORM原有的机制，我仍然可以拖一个按钮，然后给它一个回传事件。当然，它不像强大的ASP.NET AJAX或者Anthem，它不具备如此的通过性。接下来我会介绍它的使用和效果，欢迎各位给本菜鸟一些意见，它可能还上不了厅堂。

---

想法的来源

做这套控件的想法来源于我对开发的认识改变，从最初的拖控件，到后来的脚本泛滥，最后回归于拖控件，如何既能保持拖控件的快速开发又能保存富脚本的良好用户体验，ASP.NET AJAX或者Anthem都不在我的考虑范围，那么，自己做吧，给自己找点事做，挺好，最近很闲。。。。

---

接下来才是正文

先来看下面这样一个页面：

 

这是我给我女朋友做的一个简单的订单管理系统中的一个普通的页面，它由3部分组成，我给框出来了，当然还有几个添加，删除，修改按钮没截出来。最上面的两个RADIO，相当于tab页的功能，当点击其中一个时，它会跳转到另一个页面。中间的是一些查询功能，这个地球人都知道了。下面的是一个列表和一些分页的按钮，这个地球人也知道了。这个原始页面只用到了最简单的ASP.NET控件和一个负责分页的用户控件。一切功能都是回传的。

---

 

接下来开始改造，并换成我自己的控件。

• 首先我把页面上的第二和第三部分放到一个DIV中，id为“tab1”

<div runat ="server" id ="tab1">
//。。。。。。。。。。。。。。。。
</div>

• 接下来我把这个页面对应的另一个tab页内容复制到这个页面，也放入一个DIV中，原先是两个独立的ASPX页面，现在是都在一个上了。
• 先拖入一个额外的控件吧，它负责生成所有的动态脚本。那些固定的脚本，如一些类，已经写在一个JS文件中，引入即可。

  <xxf:PageManager ID="pm1" runat="server"  >
    </xxf:PageManager>

• 更换radio控件，现在是这样的，新的控件继承自radio

<xxf:TabRadio runat ="server" ID="Radio1" GroupName ="tab" DivId ="tab1" Hidden ="True" Checked ="true" /><label for ="Radio1">订单列表</label> 
      <xxf:TabRadio runat ="server" ID="Radio2" GroupName ="tab" DivId ="tab2"  Hidden ="True" /><label for ="Radio2">产品列表</label>

 

DivId属性对应的就是刚才上面新插入的DIV了，Checked属性用于指示页面载入后哪个tab先显示。

• 更换“查询”按钮，新的控件继承自button，它有一个新的属性，用于指示它对应的分页控件。

 

<xxf:SelectButton ID="button1" runat="server" Text="查询" PageBreakControl ="pb2" />

• 更换repeater控件，现在它是这样子的

  <xxf:Repeater ID="Repeater2" runat="server"onasynbind="Repeater2_AsynBind" >

  onasynbind事件用于绑定数据，它的代码如下，当分页切换和点击查询按钮时，都会进到这个事件函数中来。就跟平常的WEBFORM一样获取参数和绑定数据

          protected void Repeater2_AsynBind(object sender, EventArgs e)
          {
              IProduce_ProductRepository produce_productRep = IoC.Resolve<IProduce_ProductRepository>();
              string orderid = tbOrderid.Text;
              string clientid = tbClientid.Text;
              Repeater2.DataSource = produce_productRep.GetDetailList(false, clientid, orderid, pb2.Break_Param, pb2.Sort_Param);
              Repeater2.DataBind(pb2 .Break_Param.DataCount);
          }

 

• 最后更换分页用户控件，我删掉了所有的后台代码，让它继承一个我的控件

    public partial class PageBreak : PageBreakBase
    {

    }

分页控件不能封装太死，因为每个项目它的HTML代码都不一样，它自然有一些前台的事件函数，比如

                <td width="50" ><img src="../_images/page_first_1.gif" alt ="首页" onclick ="<%=this.ScriptId %>.firstPage()" /></td>

---

以上就是所有要做的。这里没法演示，但现在，最初那个所有功能需要回传的页面，已经不存在回传这回事了。页面载入后，根据RADIO的选中情况，显示页面，AJAX方式载入数据。切换radio时，只有第一次显示才会加载数据，（当然，根据需要切换的时候也可以每次都加载）。分页是ajax的，查询是ajax的。而我不需要写任何脚本，后台代码也依然是我熟悉的WEBFORM事件模式。而且目前的功能，我只需要生成少量的脚本，比如这个页面

script type="text/javascript"> 
//<![CDATA[
var _Radio1 = new Xxf.Tab("tab1");
_Radio1.subscribe(pb1.dataBind,pb1);$(document).ready(function(){_Radio1.show();});
var _Radio2 = new Xxf.Tab("tab2");
function button1_select(){pb2.param['tbClientid']=$('#tbClientid').val();pb2.param['tbOrderid']=$('#tbOrderid').val();pb2.dataBind();}_Radio2.subscribe(pb2.dataBind,pb2);//]]>
</script>

---

没了

以上就是所有的介绍了，希望大家能给点意见。