第10章 发布新闻.docx

1、第10章 发布新闻第10章 发布新闻新闻上传后，下一步设计任务就是如何让浏览者看到新闻条目页、并实现单击某条目后，看到新闻详情。这就是所谓的“发布新闻”。10.1 创建新闻条目页创建步骤如下：(1) 打开网站，进入设计状态。(2) 单击“解决方案资源管理器”中的网站名“NewLong”。(3) 单击屏幕上方的添加新项按钮“”，屏幕弹出图10.1所示的界面。图10.1 添加新网页(4) 在图10.1中，输入网页名“新闻条目页.aspx”、选定“选择母版页”“添加”“确定”。之后，屏幕出现此页设计界面。(5) 向ContentPlaceHoder1中，拖入一个div。(6) 设置此层属性，具体见表

2、10.1。表10.1 层属性设置表Id定位背景块positionwidthheightBackgroundcolortext-aligndivMainAbsolute650400白色center10.2 设计显示新闻条目页本书用一个网页来显示某类新闻条目，设计效果如图10.2所示。图10.2 新闻条目页设计效果10.2.1 添加显示控件在divMain中按回车空出一行。从工具箱的“数据”组中，拖出一个到网页内的divMain内。10.2.2 设置此控件的数据源(1) 如图10.3所示，单击：选择数据源新建数据源”。(2) 选择：Access数据库确定浏览找到news.mdb下一步选择“新闻表”

3、只选中图中“新闻编号”、“新闻标题”、“发布时间”、“点击次数”四项。图10.3 设置数据源的表项(3) 单击Where，如图10.4所示，选择：新闻类别、=、QueryString、输入：类别、添加“确定”。这一步设置的原因是：当网页运行时，单击图10.4左侧菜单“新闻与焦点”时，会跳转到“新闻条目页.aspx?类别=新闻”（参见4.3.2节）。即跳转到本页，并给本页一个QueryString类型的变量“类别”，其值为“新闻”。本页数据源会根据这一变量的值，筛选出符合条件的数据。并供给表格，于是，本页表内就会只显示出类别为“新闻”的数据。 如果单击图10.4左侧菜单“售后服务”时，会跳转到“

4、新闻条目页.aspx?类别=售后服务”，同样，本页表中，只会显示出类别为“售后服务”的数据。(4) 单击Order by（即排序依据），如图10.5所示： 选择：发布时间、降序“确定”下一步完成。图10.4 设置数据筛选条件图10.5 设置数据排序依据10.2.3 设置表格总体外观具体设置步骤为：(1) 设置表格宽度：用鼠标拉大表格宽度到500px。(2) 设置表内内容左对齐：在属性窗口，设置表格的RowStyleHorizontalAlign：Left。(3) 设置表头不显示：在属性窗口，设置表格的ShowHeader：False。(4) 设置表格颜色：单击表格右上角的“”单击弹出菜单中的第

5、一项“自动套用格式”选择“专业型”确定。(5) 设置表格页码：单击表格右上角的“”单击选中弹出菜单中“启用分页”。在属性窗口，设PageSize：11。(6) 去掉无需显示列：如图10.3所示，单击表格右上角的“”单击“编辑列”，弹出图10.6所示的界面分别单击选定界面左下侧的“新闻编号”、“点击次数”单击按钮“”。图10.6 表列设置界面10.2.4 设置表列外观(1) 设置新闻标题列如图10.6所示： 选定界面左下侧的“新闻标题”。 在界面右侧，设ItemStyle/Width：400px 单击“将此字段转换为TemplateField”。(2) 设置发布时间列如图10.7所示： 选定界面

6、左下侧的“发布时间” 在界面右侧，设DataFormatString： 0:yyyy-MM-dd。注意：M为大写，表示月份（Month），如果M小写，则表示分钟(minute) 设其HtmlEncode属性为False（这样日期格式才有效）。图10.7 设置时间格式10.2.5 更换标题显示控件浏览者的习惯是：点击新闻标题，跳转到相应的新闻详情页。要实现这一目的，需要通过编辑模板实现。具体设计步骤如下：(1) 单击表格右上角的“”单击弹出菜单中的“编辑模板”。因为只有“新闻标题”一个模板字段，所以，屏幕展示出此字段的模板（见图10.8）。图10.8 新闻标题模板(2) 删除模板中的标签。这个标

7、签就是原来用于显示新闻标题的控件。(3) 从工具箱的“标准”组内，拖入一个超链接控件（HyperLink）到原标签处。(4) 单击“编辑DataBindings”。弹出图10.9所示界面。(5) 选中“显示所有属性”(6) 单击界面左侧Text(7) 在界面右侧，选定“新闻标题”，这样，超链接上显示的文字即会是新闻标题。10.2.6 设置跳转到新闻详情页单击图10.9设置界面左侧上方的NavigateUrl（跳转到网址）在界面右侧，选定“自定义绑定”输入：新闻详情页.aspx?ID= + Eval(新闻编号)输入时一定要注意，全部为英文标点，否则，浏览者单击新闻标题时，无法跳转到新闻详情页，并

8、显示相应新闻详情。Eval的功能是从数据库中取出某项值。10.2.7 设置点击次数提示具体设计步骤为：单击图10.9所示设置界面左侧下方的ToolTip在界面右侧，选定“自定义绑定”输入：点击次数： + Eval(点击次数)这样，浏览者鼠标指向标题时，就会鼠标指针处，显示此条新闻的“点击次数：xx”。这里的xx为点击次数。图10.9 设置字段对应表项10.2.8 在新窗口显示新闻详情很多浏览者喜欢在点击新闻后，另出现一个窗口，在新窗口中浏览新闻，而新闻条目页还存在。实现这一要求的步骤如下：(1) 单击“确定”按钮，结束图10.9的设置工作。(2) 在属性窗口，设置超链接控件的Target：_B

9、lank。10.3 设计显示新闻详情页 本书示例将用一个网页显示某个新闻的详情。10.3.1 创建新闻详情页创建步骤如下：(1) 关闭“新闻条目页.aspx”。(2) 单击“解决方案资源管理器”中的网站名“NewLong”。(3) 单击屏幕上方的添加新项按钮“”，在弹出界面中输入网页名“新闻详情页.aspx”、选定“选择母版页”“添加”“确定”。之后，屏幕出现此页设计界面。(4) 向ContentPlaceHoder1中，拖入一个div。(5) 设置此层属性，具体见表10.2。表10.2 层属性设置表Id定位背景块positionwidthheightBackgroundcolortext-a

10、ligndivMainAbsolute650400白色center本网页最终设计效果如图10.10所示。图10.10 新闻条目页运行效果10.3.2 添加显示控件在divMain中按回车空出一行。从工具箱的“数据”组中，拖出一个控件到网页内的divMain内。（注意，这是本书第一次使用本控件）10.3.3 设置此控件的数据源(1) 单击控件右上角的按钮“”， 单击弹出菜单的：选择数据源新建数据源”。(2) 选择：Access数据库确定浏览找到news.mdb下一步选择“新闻表”选中“*”。(3) 单击Where选择：新闻编号、=、QueryString、输入：ID、添加“确定”。(4) 单击“

11、高级”，选中“生成Insert”“确定”下一步完成。操作结果如图10.11所示。图10.11 添加控件效果10.3.4 设置表格外观具体设置步骤为：(1) 设置表格宽度：在属性窗口，设置表格属性Width：90%。(2) 单击表格右上角的“”单击弹出菜单中的“编辑模板”(3) 从工具箱中，拖入三个div到模板内第一个字前（不需要设每个层的属性，其位置一也不是绝对定位，而是普通位置，即相当于网页内众多文字中的一个文字）。(4) 如图10.12所示，将有关文字和控件分别拖至三个Div内，余下的文字和控件删除。(5) 设新闻标题所在div居中对齐、新闻内容所在div左对齐，新闻出处所在div右对齐。

12、图10.12 将部分原有文字和控件放入层10.3.5 设置表内数据外观(1) 单击选定“新闻标题”设其字号：x-large(24pt)、红色。(2) 圈定出处层的所有内容，设其字号：small(12pt)。(3) 选定内容层。在属性窗口，设置内容层的层属性： Style/定位/height:200px。 Style/布局/Overflow：auto（即如果内容多于层大小，则自动出现滚动条）。10.3.6 处理点击次数浏览者每点击一次，数据库中的点击次数就应累加一次。为此，需要如下设置。(1) 修改数据源选中表下方的AccessDataSource1单击属性窗口中的UpdateQuery，弹出图

13、10.13所示界面。在此界面中：1 修改上部语句为：UPDATE 新闻表 SET 点击次数 = 点击次数 + 1 WHERE 新闻编号 = ?在修改语句时，一定要使用英文标点，注意词间空格。2 删除界面左下角所有项。3 单击界面中部的“刷新参数”按钮，界面左下侧会出现一个“？”（见图10.14）。4 设置“？”的参数源为QueryString、ID。设置结果如图10.14所示。图10.13 数据表更新语句图10.14 修改后的数据表更新语句(2) 输入命令双击“解决方案资源管理器”中的“新闻详情页.aspx.cs”，打开程序录入窗口，输入图10.15所示的1627行程序。图10.15 数据表更

14、新命令程序解释：第17行：如果表格的条目数为0，则返回，即不再执行下面的语句。第18行：这一行较长，需要从中间开始阅读和理解：在DataList1的第0条数据中查找控件，其名为“新闻标题Label”，这个控件是一个标签，将标签中的文字设为网页标题。第2027行：尝试让数据源执行更新数据（即执行点击次数=点击次数+1），如果有异常，则抓住异常，并将异常信息写到网页内。10.3.7 理解控件切换到新闻详情页的设计界面，结束模板编辑，会发现表格控件变成如图10.16所示难看样式。这是正确的，因为它是在示意表格中有多条数据，每条数据由于很长，所以表格显得很长。对于本章而言，浏览者每次打开本页，只有一条对应新闻可显示，因此，也就永远不会出现图中10.16所示混乱场面。图10.16 结束模板编辑后设计效果