簡介: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