第08章 设计后台管理页.docx

第08章 设计后台管理页.docx

《第08章 设计后台管理页.docx》由会员分享，可在线阅读，更多相关《第08章 设计后台管理页.docx（18页珍藏版）》请在冰豆网上搜索。

第08章设计后台管理页

第8章设计后台管理页

在前三章，已实现了用户注册、登录，并实现了只有注册用户才有修改信息权利的网页。

一个注册用户才有的修改信息功能，本章中，将实现管理员登录功能，并在登录之后，以管理友情链接为例，完成添加、修改和删除网站内数据的功能。

后台管理页设计结果如图8.1所示。

图8.1本章设计结果

9.1创建管理员登录页

管理员登录页和用户登录页非常一致，只不过连接和数据表是“管理员表”、登录后跳转到的网页不同而已，因此，非常有必要借用之前的设计结果。

具体创建步骤为：

（1）打开网站。

（2）右击“解决方案资源管理器”中的“用户登录页.aspx”。

（3）在弹出在菜单中选择“复制”。

（4）右击“解决方案资源管理器”中的网站名“NewLong”。

（5）在弹出的菜单中选择“粘贴”。

（6）右击通过粘贴创建的文件“副本用户登录页.aspx”。

（7）在弹出的菜单中选择“重命名”，将其改名为“管理员登录页.aspx”。

（注意：

一定要正确书写文件的扩展名“.aspx”）。

（8）双击此文件，打开此页，以做必要的修改。

9.2修改管理员登录页

修改后的设计界面如图8.2所示。

图8.2管理员登录页界面

要将此页功能改为管理员登录，需要做如下改动：

9.2.1修改文字

（1）在属性窗口，选择“Document”，将Title属性改为“管理员登录”。

（2）把网页左上角的“用户名”改为“ID　”（一个全角空格）。

（3）把“密码”后的空格删除。

9.2.2重新配置数据源

具体步骤如图8.3所示：

（1）单击屏幕右侧的“AccessDataSourc1”单击其右侧的“

”按钮“配置数据源”“下一步”。

（2）选择“指定来自表…”，选择“管理员表”选中“ID”。

（3）单击“Where”。

（4）选择“ID”、Control、TextBox1、添加确定下一步完成是。

图8.3配置数据源1

配置“AccessDatasource2”，的步骤要稍复杂一些，黑体字为不同处。

具体步骤为：

（1）单击屏幕右侧的“AccessDataSourc2”单击其右侧的“

”按钮“配置数据源”“下一步”。

（2）选择“指定来自表…”，选择“管理员表”选中“ID”、“密码”。

（3）单击“Where”。

（4）选择“ID”、Control、TextBox1、添加选择“密码”、Control、TextBox2、添加确定下一步完成是。

9.2.3修改程序

双击“解决方案资源管理器”中的“管理员登录.aspx.cs”，打开此网页的配套C#程序，修改如图8.4所示的三处：

（1）修改提示：

将“用户名错”改为“ID错”。

（2）修改变量：

将“UserName”改为“ManagerID”。

（3）修改登录成功后的跳转去向：

将“修改注册信息页.aspx”,改为“后台管理员.aspx”。

图8.4修改配套程序

9.3创建后台管理页

“后台管理页”和“修改注册信息页”非常一致，只不过两者管理的数据不同。

从设计数据考虑，非常有必要借用之前的设计结果。

9.3.1通过复制创建网页

具体创建步骤为：

（1）保存并关闭已设计好的所有页面。

（2）右击“解决方案资源管理器”中的“修改注册信息页.aspx”。

（3）在弹出在菜单中选择“复制”。

（4）右击“解决方案资源管理器”中的网站名“NewLong”。

（5）在弹出的菜单中选择“粘贴”。

（6）右击通过粘贴创建的文件“复件修改注册信息页.aspx”。

（7）在弹出的菜单中选择“重命名”，将其改名为“后台管理页.aspx”。

（8）双击此文件，打开此页，以做必要的修改。

9.3.2修改网页标题

在属性窗口，选择“Document”，将Title属性改为“后台管理页”。

9.3.3修改程序

具体修改步骤如下：

（1）双击图8.5所示的“退出登录”，打开文件“后台管理页.aspx.cs”（见图8.6）。

（2）将程序中4个变量名“UserName”，都替换为“ManagerID”。

（3）将“用户登录页.aspx”，替换为“管理员登录页.aspx”。

图8.5修改登录程序

运行网页，如果程序修改正确，网页会首先跳转到“管理员登录页”，请管理员登录。

输入管理员号“001”、密码“123”。

观察是否能回到“后台管理页”。

9.4改造密码修改功能

切换到“后台管理页”设计界面。

会发现原来的网页修改的是用户密码。

现在要改为修改管理员密码。

具体实现步骤如下：

9.4.1重新配置数据源

重新配置步骤如图8.6所示：

（1）单击card2层内的数据源AccessDataSource2右侧的“

”按钮“配置数据源”“下一步”。

（2）选择“指定来自表…”，选择“管理员表”选中“*”。

（3）单击“Where”。

（4）选择ID、=、Session、输入ManagerID添加确定。

图8.6图8.7配置数据源2

（5）本步一定要小心慢做：

单击图8.6中的高级在弹出的界面中选中第一项“生成Insert…”确定下一步完成。

完成之后，屏幕会弹出一个对话框，询问：

是否要重新生成Card2层内的数据表（如图8.7所示），一定要单击“否”。

否则密码修改时的数据验证等控件还需要重新设置。

图8.7询问是否重新生成数据表

9.4.2修改数据更新语句

修改步骤如下：

（1）单击选定card2层中AccessDataSource2

（2）单击属性窗口中UpdateQuery右侧的按钮“

”，弹出图8.8所示界面。

图8.8错误的更生语句

（3）在此界面，将图中选定的内容，修改为图8.9所示内容。

图8.9正确的更新语句

9.4.3重新配置表格

数据源改变后，card2中的表格因无法和数据源对应而显示错误，为此需要重新配置表格，使其正常工作。

（1）单击card2层中表右上角菜单中的“编辑字段”，card2层内的表即会显示为图8.10所示样式。

图8.10重新设置表内字段

（2）如图8.10所示，选中“用户名”字段删除。

（3）从图上面选中“ID”字段单击“添加”按钮。

（4）单击两次向上按钮“

”，将ID列移到所有字段前面确定。

（5）在属性窗口，将DataKeyNames属性改为“ID”。

DataKey：

数据钥匙，专业词叫关键值，唯一值，一把钥匙开一把锁，在数据表中，一个用户名或一个管理员号只能有一个，不能重复，这种列就被称为DataKey列。

重新配置数据源后的表格如图8.11所示

图8.11重新配置数据源后的样式

9.5设计友情链接管理

9.5.1修改文字

要将选项卡标签“修改基本信息”改为“管理友情链接”，需要如下技巧：

（1）光标放在选项卡的标签“修改基本信息”六字中间。

（2）输入“管理友情链接”。

（3）再删除旧有文字。

经过这样三步，链接设置还会存在，如果直接在旧内容前，新录入文字会“挤掉”已设的链接。

9.5.2修改第一个卡片中的数据源控件

第一个卡片用于管理“友情链接”，因此，需要重新配置数据源。

配置步骤如图8.12所示：

（1）单击选中第一个卡片中的“AccessDataSourc1”。

（2）单击其右侧的“

”按钮“配置数据源”“下一步”。

（3）选择“指定来自表…”，选择“友情链接表”

（4）选中“*”。

（5）单击“高级”按钮。

（6）选择“生成Insert……”确定下一步完成是。

图8.12配置数据源2

9.5.3横向表格控件

第一个卡片内的纵向表格控件表头在左侧，它只能显示一条数据，为此需要更换为横向表格控件，表头在上面，下面是多条数据。

具体步骤如下：

（1）删除第一个卡内旧有表格控件。

（2）按回车键空出一行。

（3）从工具箱的“数据”组内，拖入一个

控件到第一个卡片的新空行内（见图8.13）。

图8.13添加横向表格控件

（4）设表数据源：

在弹出的菜单中，选择数据源为AccessDataSource1。

（5）设表功能：

选中“启用分页”、“启用编辑”、“启用删除”。

（6）设表宽度：

用鼠标拉宽表格至300px

（7）设表字号：

单击屏幕上方的字号选项，将表字号设为small（12pt）。

（8）设表行数：

在属性窗口，设置PageSize属性为5（即表行数为5，超过5行自动分页）。

运行网页，结果如图8.14所示。

从图中可以发现，表格尽管可以编辑、删除数据，但布局完全被破坏。

为此，需要对这个表进行高级设置。

图8.14表格运行效果

9.5.4横向表高级设置

所谓高级设置，主要是GridView的模板设计。

具体步骤如下：

（1）单击图8.13所示菜单中的“编辑列”，弹出图8.15所示的界面。

（2）在此界面中，删除“编号”列（编号列中的编号是自动生成的，没有实际作用）。

（3）将另外三列全部转为TemplateField确定。

图8.15删除“编号”列

（4）单击图8.13所示菜单中的“编辑模板”，出现一选择框（见图8.16）。

（5）在选择框中选择“Column0”列，屏幕显示图8.16左侧样式，即Column列的全部模板。

在此模板中，删除“编辑”，将“更新”拖到“删除”前。

图8.16编辑Column0（第0列）模板

（6）选择“网站名”列，屏幕显示图8.17样式。

即“网站名”列的全部模板。

在此模板中，删除Label，将文本框拖至原Label位置，并用鼠标将文本框宽度调整为80*16px。

图8.17编辑“网站名”列模板

（7）选择“网址”列，屏幕显示和图8.17同样样式。

在此模板中，删除Label，将文本框拖至原Label位置，并用鼠标调整其大小为120*16px。

（8）单击图8.17表格右上角的“

”，在弹出的菜单中选择“结束模板编辑”。

最终效果如图8.18所示。

图8.18模板编辑结果

9.5.5修改插入命令

表格下方的数据源AccessDataSource1自动生成的插入语句有误，导致产生错误的是数据库中“友情链接表”内的“编号”列是一种自动编号列，即每行的“编号”值是由数据库自动产生的，不是从文本框中填写进去的。

关于这一点，数据源并不知道，它的插入语句因此错误，需要手工修改。

具体修改步骤如下：

（1）选中表格下方的数据源AccessDataSource1。

（2）单击属性窗口中InsertQuery属性右侧的按钮“

”，弹出图8.19所示的界面。

图8.19插入命令设置界面

（3）在图8.19中，删除第1处的“[编号],”、删除第2处的“?

”、单击第3处的“编号”，再单击第4处的“

”，将其删除。

结果如图8.20所示。

图8.20修改后的插入设置

通过上述三步，插入语句中便没有了“编号”的踪迹，插入语句也就正确了。

9.5.6实现插入功能

具体步骤如下：

（1）从工具箱的“标准”组内，拖入一个按钮到表格上方。

（2）设此按钮的Text属性为“插入一条”、Height属性为20px。

（3）光标放在按钮前，设置左对齐。

（4）双击插入按钮，输入图8.21的第31～36行语句。

图8.21插入一条数据程序

运行网页，将会看到友情链接表内由于超过5行数据，自动分为了两页。

单击“更新”，可修改原有链接；

单击“删除”可删除一条数据。

单击“插入”可插入一条空白数据。

但这条数据不在第一行，而是在第2页最后一行。

这是因为如果不对数据排序，默认按数据添加先后排列。

9.5.7确认删除提示

运行网页时会发现，单击表第1列中的“删除”，会没有任何提示，直接将一条数据删除。

而且无法恢复。

任何人都有可能不小心删错或点击错，因此，应在删除前，给出一个询问对话框，在对话框中，如果点击“是”，则删除，如果点击“否”，则不做删除操作。

实现步骤如下：

（1）停止运行。

（2）单击图8.16所示菜单中的“Column0”列，进入模板编辑状态。

（3）单击选定“删除”。

（4）在属性窗口，设置OnClientClick属性为：

return（confirm（'确定要删除吗'））

（5）单击图8.17表格右上角的“

”，在弹出的菜单中选择“结束模板编辑”。

运行网页，单击“删除”，屏幕会弹出图8.22所示的界面。

图8.22设置OnClientClick属性后产生的界面

9.6设计后台管理功能

此项功能界面如图8.1右上角所示。

具体实现步骤如下：

9.6.1添加卡片

具体实现步骤为：

（1）向选项卡中添加两个层（见表8.1）。

表8.1选项卡中新建div及其属性表

添加位置

Id

定位

背景

left

top

position

Width

height

Backgroundcolor

title2右侧

Title3

absolute

100

20

divBox内

Card3

absolute

300

200

黄色

（1）在title3层内，键入文字“其它管理功能”。

（2）选定文字“其它管理功能”单击超链接按钮“

”在弹出界面内输入“#”。

（3）切换到源界面。

（4）找到：

其它管理功能