简介: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.