最近在制作一套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>

---

沒了

以上就是所有的介紹了，希望大家能給點意見。