簡介: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 2
005 提供了非常強大的客戶端腳本調試功能。我終於將錯誤定位到了 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" />
&
nbsp; <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