在上一节中我们基于创建了一个网页应用程序，并且通过修改页面某一部分的文字，大致了解了各个程序文件的作用。

这一节我们开始添加内容，首先需要添加的就是分类树控件，上一节提到过，分类树控件需要用到Ant UI框架，所以我们首先要集成Ant环境。

Ant 环境集成

我的参考资料均来自Ant官网（注1），鼓励有一定基础和学习能力的人自行参考。对于初学者，Ant官网给出了以下建议：

本文假设您具有 HTML、CSS 的基本知识，并完全掌握了正确的开发方式。如果您刚开始学习 .NET 或 ，将 UI 框架作为您的第一步可能不是最好的主意。

我的教程是针对初学者的，所以如果你能仔细阅读这部分教程，我相信你可以。

环境要求

强烈推荐，如果是其他版本的VS，不知道会不会有这样那样的问题。

集成步骤

1. 切换到包管理器控制台

首次使用时，需要等待一段时间直到出现PM>。

2. 安装软件包

首先输入：cd .Web..WASM，然后回车。这样就会进入当前项目目录。如果成功的话，不会有任何提示，再出现一行PM>，就代表成功了。

然后输入：add，回车，你会看到一堆内容，只要没有深红色字体就是正确的，同样，如果再出现一行PM>，就是成功了。

这就代表安装成功了。

我们进入解决方案视图中的依赖项，看到包下有一个，再次确认成功。

3. 导入样式

添加/.html

   

这两行语句如下：

如果按照官网的参考，Anti 的 UI 框架就安装好了。但是还剩两步，没有下面的步骤是无法使用的。我会继续补充。

4. 引入命名空间

将@;添加到命名空间引用。

5.添加服务

在.cs中添加..();来启动服务，注意代码行的位置。

以上就是集成Ant的全部操作，如果按F5可以正常打开网站展示页面，则说明配置成功。

接下来我们需要对其进行测试。

环境测试

在 下方添加一个按钮。

然后运行它，我们会看到这种样式的按钮，测试通过。

以上都是准备工作，接下来就要开始做私信里的功能了：界面的整体布局。

界面整体布局

影响布局最大的因素是用户的操作习惯，这与传统程序不同，用户的操作习惯是希望顶部有一个菜单栏，所以功能入口可以堆放在菜单上。但是很少看到有顶部菜单的网站，一般我们看到的是左侧导航，右侧内容。

因此我们也需要遵循一般网页程序的用户习惯，将菜单移到左侧导航。由于我们的小项目功能比较简单，所以还是沿用现有的三个导航菜单，分别是：内容管理、系统设置、关于。当然我这里只是做教程演示，大家可以结合具体的项目进行拓展。

上述导航文本可以在.文件中进行修改，如下所示：

内容管理页面对应到 页面，然后我们将 中的不相关内容全部删除，运行效果如下：

现在我们已经完成了所有的准备工作，那么如何添加分类树呢？首先，我们需要参考 Ant 关于树的文档。从文档中我们可以看到，树是用 Tree 来表示的。

然后在.页面中，从Ant官网复制测试数据：

运行后的效果：

现在，我们可以显示树形控件的内容了。但是，这些数据是通过 HTML 静态指定的，那么我们如何通过程序动态添加它呢？我们将在下一节继续。

注1：今日头条不允许外链，我在私信回复里更新了蚂蚁官网地址，请通过下方私信获取链接。

----------------------------------

本教程项目源码已添加为开源项目，代码内容会跟随教程实时更新，有兴趣的可以关注我获取最及时的更新。

私人笔记可以获得相关链接；

如果大家在阅读过程中发现有什么不明白或者不满意的地方，可以在评论区留言，我会记下来，在后续的教程中找机会讲。

如果教程有帮助的话，请关注，转发，传播一下，我还要你们的支持才能开专栏啊！