使用 AJAX.NET 的 TreeView 和上下文菜单

• 下载源代码 - 22.02 KB
• 下载截图 - 50.89 KB

引言

这段示例代码使用 AJAX.NET 和 JavaScript 动态构建树形视图。它允许添加、编辑和删除树节点。它还演示了如何使用 UpdatePanel 从客户端刷新。

背景

如果我们想要生成一个提供更多灵活性和控制的树形视图，那么可以使用这段代码。

Using the Code

这段代码的前提条件是 VS2005、SQL2000 和 AJAX.NET（带有 DLL System.Web.Extensions，版本=1.0.61025.0）。请使用 App_Data 文件夹中提供的数据库脚本，该脚本会创建此演示所需的表和存储过程。

我们需要定义一个 DIV 占位符用于 TreeView，这样树在增长时就不会拉伸或生成滚动条。

<div style="height:200px; width:300px; overflow-y:scroll;"></div> 

我们需要一个根节点，从该节点开始构建我们的树。这个根节点是不可编辑和不可删除的。这是唯一的 static 节点，其余子节点将具有相同的结构，并动态包含在内。“displayMenu(0, 'Root')”显示上下文菜单，“0”表示 categoryid 或树节点数据库 ID。对于子节点，它将大于 0（零）。其余处理将是 Web 服务交互和更新网格。

<table width="100%" id="tblRoot">
            <tr valign='top'>
                <td width="20px"><img src="Images/Plus.gif" 
		id="img_1" title="Expand" 
                   border="0" onClick="CollapseOrExpand(this, 0, 'Root');"/></td>
                <td oncontextmenu="displayMenu(0, 'Root');return false;">Root</td>
            </tr>
</table>

以下代码用于从客户端调用 Web 服务。

<asp:ScriptManager ID="ScriptManager1" runat="server">
    <Services>
        <asp:ServiceReference Path="~/TreeViewWS.asmx" />
    </Services>
</asp:ScriptManager>

为了在对网格进行任何修改时更新 gridview，我们需要刷新包含 gridview 的 updatepanel。这可以通过使用以下 JavaScript 代码来触发。

__doPostBack(HdnCurrentFileID, '');

由于我们已经在 updatepanel 中为这个隐藏变量设置了触发器，这将回发面板并刷新网格。

关注点

最有趣和最糟糕的部分是处理我们在编码时遇到的 JavaScript 错误，特别是当我们的 Web 方法抛出异常时，使用“debugger”关键字可以快速调试 JavaScript 代码。

生成上下文菜单并传递相应的节点详细信息，如 Id、Desc，将会很有趣。

最后但并非最不重要的一点，AJAX Web 服务调用和刷新网格的 updatepanel 值得一提，因为它大大简化了编码工作。

向 AJAX 致敬！