首先我们先新建一个母版。其他的页面可以继承母版的头、尾和侧边导航栏。好处包括降低代码重复率和复杂度、保证页面美观统一以及可以把导航栏跳转行为全部在母版页面中完成。
我最终想要建立一个教学信息系统,上面可以进行选课、考试查看、课表查看、申请创新创业项目等等。
一、 建立一个新母版
- 在解决方案资源管理器中选择“添加”---“新建项”---“Web Forms母版页”,新建一个母版;
- (我想要的页面有四部分,第一部分是上面的头部,包括一些基本的信息如学校logo、名称等;第二部分是中间左侧的导航栏,可以在里面选择相应的功能页面;第三部分是中间右侧的内容框,用于放置每个页面的不同功能区域;第四部分是页尾,用于填写一些联系方式等等内容。页面的跳转在母版的导航栏设置好,后面直接继承即可。)设想完毕,开始设计。新建一个3*2的表格,将第一行和第三行的单元格合并,调节中间单元格宽窄;
- 在四个区域各添加一个ContentPlaceHolder;
- 在第二行左侧的格子中添加TreeView,增加节点,可以在节点编辑中添加图标及跳转页面。我实现的页面效果如下:
(是的,新时代霍格沃茨学生也上网)
二、 添加子页面
- 母版的行为没有多少,主要是调节调节调节高度位置什么的。唯一的设置在TreeView里,在母版里设置每个选项点击之后到哪个子页面,由于在设置导航栏的时候就已经大概知道有多少功能了,所以我是直接添加了大量的空功能页面,把所有节点的目标位置设置好(其实等实际操作时逐一完成也完全可以)如下图点击消息通知进入Message.aspx页面(尚未完全完成);
- 详细说明一个子页面的建立过程。新建一个web forms页面(基于母版),点击确定后会让你选择想要的master母版,选择想要的即可。建立完成后,在设计页面会出现母版的构建。在每一个小部分的右侧会有一个小小的箭头,可以选择是否要基于母版。对我的需求而言,上、下、左三个部分我是完全基于母版即可。
三、 遇到的问题
- 子页面不能显示母版的内容:主要需要注意两点,第一是占位符的写法(不过如果是自动生成的页面的话一般不太需要手动调整),第二是第一次使用不太清楚的一点是需要在子页面中需要继承每一部分分别选择“使用默认页面”(也就是默认使用母版的内容);
- 出现编译错误: CS1061: 'site2_master' does not contain a definition for 'TreeView1_SelectedNodeChanged' and no accessible extension method 'TreeView1_SelectedNodeChanged' accepting a first argument of type 'site2_master' could be found (are you missing a using directive or an assembly reference?),也就是说无法正确识别treeview中的OnSelectedNodeChanged="TreeView1_SelectedNodeChanged,这个其实也很简单,是因为我还没有在.cs中定义相关函数。直接双击treeview跳转即可,不需要立刻填充什么内容。
- 目前尚存的一个问题是,选择节点后自动隐藏选择的节点,我目前还没有调整为选择节点后是不隐藏选择的节点,后续继续修改吧。