项目7 网站后台管理

2020-02-27 163浏览

1.项项目目 77 网网站站后后台台管管理理《 ASP.NET 动态网页设计项目教程》主编：郭建东
2.教学目标知识教学目标  在线编辑器的应用  母版页创建及应用  使用 ADO.NET 编程更新、插入数据库信息  使用数据控件更新、删除数据库信息  将样式应用到数据控件及模板字段中技能培养目标：  掌握母版页的应用  通过 ADO.NET 编程插入、删除和更新数据库信息  使用数据控件插入、删除和更新数据信息
3.• 网站需要专门的特定权限的后台管理员对网站进行维护管理，除了安全性管理外，还需要定期对数据库信息进行添加、修改和删除等功能。为方便后台管理员对网站的管理，引入了在线编辑器，使管理员对数据进行插入和修改操作时如同在 WORD 文档一样方便。本任务介绍后台页面的开发技术，包括数据控件的应用和 ADO.NET 编程管理数据库。
4.任务 1 在线编辑器应用任务描述： • 在线编辑器有可见即可得功能，使得后台管理更加简单方便。本任务介绍如何使用在线编辑器进行数据信息的录入编辑。以 CuteEditor for ASP.NET 为例，掌握在线编辑器的使用。
5.1.1 关键知识：在线编辑器关键知识： • 网站的管理员后台管理模块主要包括管理员权限管理、身份校验、用户管理及数据库数据的添加、删除和修改，对静态页面的维护等。新闻发布或大段文字图片录入、更新等功能的管理模块，往往添加在线编辑器，直观方便帮助管理员进行数据信息的录入编辑。目前，常用的在线编辑器有 CuteEditor 、 FCKeditor 、 FreeTextBox 等，这些外部编辑器通过简单的配置，可添加到 Visual Studio.NET 的工具箱中，像普通的服务器控件一样方便使用。 • 以 CuteEditor for ASP.NET 在线编辑器为例，它建立在 Html 基础之上，简单易用，提供类似 Word 文字编辑器的所见即所得功能，还集成了文件（包括图片、文档等）上传、媒体（包括视频、声音等）文件直接插入等非常实用的功能模块。
6.在线编辑器图 7-1 在线编辑器工具箱图 7-2 CuteEditor 在线编辑器
7.1.2 使用在线编辑器设计页面步骤见教材任务
8.任务 2 后台管理员主页面设计任务描述： • 后台管理包括数据库信息的插入、编辑和删除功能，这些功能布局在页面的右侧栏，头部、导航、左侧栏和页脚界面布局都一样，因此先创建母版页，其它页面基于这个母版页创建。
9.2.1 关键知识： ContentPlaceHolder 控件 • 在母版页中一般有二个 ContentPlaceHolder 控件 • 一个位于标签内，允许用户使用母版页创建的页面中添加样式的引用、脚本文件的引用等。 • 另一个 ContentPlaceHolder 控件位于内容页的可编辑区内，可编辑区如果不止一个，则可以母版页中继续添加 ContentPlaceHolder 控件。 • 依据母版页创建的内容页，用户可在 ContentPlaceHolder 控件中添加任意的网页元素，并可以在控件内添加层、样式等进行页面布局。
10.2.2.1 创建管理员母版页管理员母版页效果图如下，步骤见教材任务：
11.2.2 创建母版页并应用于管理员主页面管理员主页面效果图如下，步骤见教材任务
12.任务 3 使用 ADO.NET 编程插入新闻内容任务描述： • 往数据库中插入信息，可以通过控件完成，在配置数据源时配置成带插入删除和更新功能，然后结合数据控件可完成数据库信息的管理操作。另外还可以通过编程方式实现，用编程方式插入信息，界面布局更加灵活，效率更加高。本任务通过 ADO.NET 编程方式往数据库表 files 中插入信息。
13.3.1 关键知识：数据库连接步骤 ① 在类别级新建连接字符串，获取配置文件 web.config 中的数据库配置连接字符串（如果没有需要自己写，参考项目 6 任务 3 ）； ② 建 SqlConnection 类对象 conn ，并实例化； ③ 打开 conn 连接 conn.Open() ； ④ 进行数据库访问； ⑤ 关闭数据库连接 conn.Close();
14.3.2 使用 ADO.NET 编程插入信息到数据库步骤如下：一、创建基于母版页的插入页面二、添加标题层三、添加样式四、布局静态页面五、编辑插入事件代码六、运行网页，插入图片信息
15.3.2 使用 ADO.NET 编程插入信息到数据库效果图如下：
16.任务 4 更新修改新闻内容 • 任务描述： • 数据库信息插入到表中后，可能会出现各种原因需要对标题、内容等进行修改，本任务使得管理员可在查看新闻标题后选择其中需要修改的标题，进入修改页面修改新闻内容或标题或发布者信息。
17.4.1 关键知识：数据控件的高级应用
18.4.1 关键知识：数据控件的高级应用
19.4.2.1 利用数据控件修改数据库内容使用数据控件显示并在数据控件中修改数据库内容步骤如下：一、创建基于母版页的更新修改页面二、添加标题层三、添加样式四、配置数据源控件五、编辑数据控件六、运行效果
20.4.2.1 利用数据控件修改数据库内容效果图如下：
21.4.2.1 利用数据控件修改数据库内容
22.4.2.2 利用 ADO.NET 编程更新数据库内容使用 ADO.NET 编程方式更新数据库内容步骤如下： 1. 创建基于母版页的更新修改页面 2. 添加标题层 3. 配置数据源控件 4. 添加并编辑数据控件 5. 布局更新内容界面 6. 编辑 ADO.NET 事件代码 7. 运行效果
23.4.2.2 利用 ADO.NET 编程更新数据库内容 • 运行效果如图所示：
24.任务 5 删除新闻内容 • 任务描述： • 管理员台后对数据库的管理除了插入和修改信息外，还可以对信息进行删除，本任务使用数据控件删除数据库中信息。
25.5.1 关键知识：数据控件的删除事件 • 数据控件的删除事件 – 数据控件绑定到数据源后，在数据控件中添加模板字段，在模板字段中添加按钮，设置按钮的 CommandName 属性名为 Delete ，则点击该按钮可触发该数据控件的行删除事件，其中 GridView 控件触发 RowDeleting 事件， DataList 控件触发 DeleteCommand 事件， FromView 控件和 DetailsView 控件触发的是 ItemDeleting 事件。 • 数据控件的删除后事件 – GridView 控件、 FromView 控件和 DetailsView 控件还提供了删除后要处理的事件， GridView 控件对应的删除后处理事件名称为 RowDeleted 事件， FromView 控件和 DetailsView 控件对应的删除后处理事件名称为 ItemDeleted 事件。
26.5.2.1 利用数据控件删除数据库内容使用数据控件进行数据库信息的删除步骤如下： 1. 创建基于母版页的更新修改页面 2. 添加标题层 3. 配置数据源控件 4. GridView 数据控件 5. 检查是否有外键记录信息，并作相关处理 6. 编辑删除记录后事件 7. 七运行效果
27.5.2.1 利用数据控件删除数据库内容 • 运行效果如下图：