使用 Anthem.NET 框架的一個調試經歷

簡介：Anthem 是一個很好用的 Ajax 框架，支持 ASP.NET 1.1, 2.0。
因爲該框架的全部控件都繼承自 ASP.NET 自身的服務器控件，保留了幾乎全部這些控件的屬性和行爲（除了把它們的 PostBack 改成 CallBack 的無刷新調用以外）。因此學習曲線很平緩。

今天我在使用 Anthem 的時候碰到了一個比較麻煩的調試問題，記錄於此。

在下面的代碼中，我用了一個 Anthem.Repeater 控件。

         < asp:XmlDataSource  ID ="XmlDataSource2"  runat ="server"  XPath ="//NeedDocs/Doc"
        EnableCaching ="false" ></ asp:XmlDataSource >
         <table class="mytable" width="100%" cellspacing="0" cellpadding="0">
           < anthem:Repeater  ID ="rptNeedDocs"  runat ="server"  DataSourceID ="XmlDataSource2"
          AutoUpdateAfterCallBack ="False" >
             < HeaderTemplate >
               < tr  class ="formTitle" >
                 < td >
                  選中 </ td >
                 < td >
                  文件、圖紙名稱 </ td >
                 < td >
                  應送 </ td >
                 < td >
                  是否原件 </ td >
                 < td >
                  備註 </ td >
               </ tr >
             </ HeaderTemplate >
             < ItemTemplate >
               < tr >
                 < td >
                   < asp:CheckBox  ID ="chkDoc"  runat ="server"  Checked ="True"   />
                   < asp:HiddenField  ID ="hidDocId"  runat ="server"  Value ='<%#  XPath("@Id") % > ' />
                 </ td >
                 < td >
                   < asp:Label  ID ="lblDocName"  runat ="server"  Text ='<%#  XPath("@Name") % > ' />
                 </ td >
                 < td >
                   < asp:TextBox  ID ="txtQuantity"  runat ="server"  Text ='<%#  XPath("@Quantity") % > ' Width="30" />
                 </ td >
                 < td >
                   < asp:RadioButtonList  ID ="radiolist_IsOriginal"  runat ="server"  SelectedValue ='<%#  XPath("@IsOriginal") % > '
                    RepeatDirection="Horizontal">
                     < asp:ListItem  Value ="True" > 原件 </ asp:ListItem >
                     < asp:ListItem  Value ="False" > 副本 </ asp:ListItem >
                   </ asp:RadioButtonList >
                 </ td >
                 < td >
                   < asp:TextBox  ID ="txtComment"  runat ="server"  Text ='<%#  XPath("Comment") % > ' />
                 </ td >
               </ tr >
             </ ItemTemplate >
             < FooterTemplate >
             </ FooterTemplate >
           </ anthem:Repeater >
         </table>

這個代碼在運行時，有時候會出現一個 JS 錯誤：「未知的運行時錯誤」。
而該錯誤只在特定狀況下發生，在其餘相似狀況下正常。
幸好 VS 2005 提供了很是強大的客戶端腳本調試功能。我終於將錯誤定位到了 Anthem 產生的一行代碼上：

control.innerHTML  =  result.controls[controlID];

查了相關資料後發現，在 IE 下，對 innerHTML 屬性賦值的時候，會對所賦的值進行檢查。若是不是 well formed, 則可能會出現「未知的運行時錯誤」。

因而我判斷 anthem.Repeater 輸出的 HTML 出了問題。從上面代碼中高亮的兩行能夠看到，table 標籤在 Repeater 的外面。所以 Repeater 自己輸出的是一系列 tr, 並非 well formed 的一個總體。
因而我將 table 的標籤頭尾分別放入 Repeater 的 HeaderTemplate 和 FooterTemplate，問題解決。
（之因此先前把 table 標籤放到外面去了，是由於放在 HeaderTemplate 和 FooterTemplate 中的時候，不知道爲何 VS 的設計器不能切換到設計視圖了。而改爲這樣能夠解決問題。）

修改爲功後的代碼以下：

         < asp:XmlDataSource  ID ="XmlDataSource2"  runat ="server"  XPath ="//NeedDocs/Doc"
        EnableCaching ="false" ></ asp:XmlDataSource >
         < anthem:Repeater  ID ="rptNeedDocs"  runat ="server"  DataSourceID ="XmlDataSource2"  AutoUpdateAfterCallBack ="False" >
           < HeaderTemplate >
             <table class="mytable" width="100%" cellspacing="0" cellpadding="0">
               < tr  class ="formTitle" >
                 < td >
                  選中 </ td >
                 < td >
                  文件、圖紙名稱 </ td >
                 < td >
                  應送 </ td >
                 < td >
                  是否原件 </ td >
                 < td >
                  備註 </ td >
               </ tr >
           </ HeaderTemplate >
           < ItemTemplate >
             < tr >
               < td >
                 < asp:CheckBox  ID ="chkDoc"  runat ="server"  Checked ="True"   />
                 < asp:HiddenField  ID ="hidDocId"  runat ="server"  Value ='<%#  XPath("@Id") % > ' />
               </ td >
               < td >
                 < asp:Label  ID ="lblDocName"  runat ="server"  Text ='<%#  XPath("@Name") % > ' />
               </ td >
               < td >
                 < asp:TextBox  ID ="txtQuantity"  runat ="server"  Text ='<%#  XPath("@Quantity") % > ' Width="30" />
               </ td >
               < td >
                 < asp:RadioButtonList  ID ="radiolist_IsOriginal"  runat ="server"  SelectedValue ='<%#  XPath("@IsOriginal") % > '
                  RepeatDirection="Horizontal">
                   < asp:ListItem  Value ="True" > 原件 </ asp:ListItem >
                   < asp:ListItem  Value ="False" > 副本 </ asp:ListItem >
                 </ asp:RadioButtonList >
               </ td >
               < td >
                 < asp:TextBox  ID ="txtComment"  runat ="server"  Text ='<%#  XPath("Comment") % > ' />
               </ td >
             </ tr >
           </ ItemTemplate >
           < FooterTemplate >
             </table>
           </ FooterTemplate >
         </ anthem:Repeater >

通過此次的調試，我以爲 Ajax 除了帶來了界面上響應迅速的好處以外，由於引入大量 js，也增大了調試的難度，所以應用的時候仍是要根據狀況取捨。不能什麼都上 Ajax.

 

出處：http://www.cnblogs.com/RChen/archive/2006/08/06/anthem_debug.html