ASP.NET技巧：使用 Anthem.NET 架構的一個調試經曆

asp.net|技巧

　　簡介：Anthem 是一個很好用的 Ajax 架構，支援 ASP.NET 1.1, 2.0。

　　由於該架構的所有控制項都繼承自 ASP.NET 自身的伺服器控制項，保留了幾乎所有這些控制項的屬性和行為（除了把它們的 PostBack 改為 CallBack 的無重新整理調用之外）。所以學習曲線很平緩。

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

　　在下面的代碼中，我用了一個 Anthem.重複器控制項。

        <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.