新闻管理模块设计方案gridview控件与ado.net高级应用.ppt

1、动态网页设计教程美工与技术徐延章徐延章 编著编著第第15章章 新闻管理模块设计新闻管理模块设计GridView控件与控件与ADO.NET高级应用高级应用第第1 15 5章章 新闻管理模块设计新闻管理模块设计GridViewGridView控件与控件与ADO.NETADO.NET高级应用高级应用v 新闻管理模块是一个综合新闻和内容管理的模块，是基于B/S模式的网络信息管理系统，新闻管理提供新闻的发布，审核，删除，浏览等功能，是大多数网站后台的主要功能模块，通过设计新闻管理模块，读者可以延伸设计例如用户管理、信息管理等模块。将美工与技术一起讲在本章也有明显的体现，本章美工设计采用流行的DIV+CS

2、S模式设计，紧跟时代潮流，体现技术的要求。动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社第第1 15 5章章 新闻管理模块设计新闻管理模块设计GridViewGridView控件与控件与ADO.NETADO.NET高级应用高级应用动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社15.1 新闻管理界面的设计新闻管理界面的设计115.2 新闻管理数据库的设计新闻管理数据库的设计215.3 新闻管理功能的实现新闻管理功能的实现GridView控件的使用控件的使用315.4 新闻发布功能的实现新闻发布功能的实现415.5 新闻浏览功能的实现新闻浏览功能的实现515

3、.6 新闻管理模块界面的美化新闻管理模块界面的美化2 615.7 新闻管理模块高级设计新闻管理模块高级设计ADO.NET数据操纵数据操纵715.1 新闻管理界面的设计新闻管理界面的设计v 新闻管理模块主要包括新闻管理、新闻发布、新闻浏览等页面，我们在一致性原则的指导下，进行新闻管理界面的美工设计。动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社15.1.1 美工的界面设计美工的界面设计v 1.新闻管理界面动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社15.1.1 美工的界面设计美工的界面设计v 1.新闻管理界面动态网页设计教程动态网页设计教程美工与技术美工

4、与技术机械工业出版社15.1.1 美工的界面设计美工的界面设计v 2.新闻发布界面动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社15.1.1 美工的界面设计美工的界面设计v 2.新闻发布界面动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社15.1.2 技术如何实现技术如何实现v 新闻管理功能主要利用GridView控件结合数据源对象实现，利用数据源控件的查询、修改和删除语句，通过GridView控件按钮实现。v GridView控件通过表格形式显示数据，通过设置GridView控件的数据源，GridView控件每列显示一个字段，每行显示一条记录，同时支持数

5、据的编辑、排序和分页的功能。需要说明的是，GridView控件不支持插入记录的功能。动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社15.2 新闻管理数据库的设计新闻管理数据库的设计v 新闻管理模块是典型的数据库操作的应用，因此在设计时首先要对新闻数据库进行设计，建立数据库并设计数据表，提供程序对数据的访问支持。动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社15.2.1 数据库的建立数据库的建立v 打开SQL Server 2005，从左侧对象资源管理其中，选择数据库选项，单击鼠标右键，选择新建数据库，设置数据库名称为“NewsDB”。动态网页设计教程动态

6、网页设计教程美工与技术美工与技术机械工业出版社15.2.2 数据表的建立数据表的建立v 打开新闻数据库“NewsDB”，选择“表”选项，单击鼠标右键，选择“新建表”，输入字段“NewsID”，在列属性中设置数据类型为int型，设置标识规范为是，从而使字段能够自动编号。单击工具栏中的设置为主键按钮，将该字段作为主键。然后按照表输入其它字段，单击保存按钮，将表命名为“News”。动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社15.2.3 数据表数据的添加数据表数据的添加v 在对象资源管理器中，单击News表，单击鼠标右键，选择打开表，手动输入数据，注意输入完一条记录，按键确认。

7、动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社15.3 新闻管理功能的实现新闻管理功能的实现GridView控件的使用控件的使用v 新闻管理功能中重要的就是表格形式的新闻条目的显示，提供新闻修改、删除、浏览的超级链接。GridView控件是专门为表格数据设计的控件，提供对表格形式数据操作的多项功能。动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社15.3.1 新闻的显示新闻的显示v 1.新闻界面的建立v 打开Visual S 2008，选择菜单“文件|新建|网站”，在“新建网站”对话框中，设置网站的位置为“D:news”，程序自动新建Default.asp

8、x文件，选择“设计”视图。从左侧工具栏中选择“数据”组中的“GridView”控件，拖动到设计视图中。动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社15.3.1 新闻的显示新闻的显示v 从控件右侧的智能标记选项中选择“自动套用格式”，可以设置控件的显示样式，可以单击“移除格式设置”，取消格式的应用，这里选择一种格式后单击“确定”按钮。动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社15.3.1 新闻的显示新闻的显示v 1.新闻界面的建立v 从控件右侧智能标记中“选择数据源”选项中选择“新建数据源”，出现数据源设置对话框，在这里可以设置数据源的类型，这里选择

9、“数据库”，系统会自动为数据源对象命名“SqlDataSource1”，单击确定按钮。动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社15.3.1 新闻的显示新闻的显示v 1.新闻界面的建立v 在选择数据连接对话框中单击“新建连接”按钮，设置服务器为（local）或者为.（半角字符点），用户名为sa，密码为111111，选择数据库为“NewsDB”。读者可以根据自己设置的密码输入密码。动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社15.3.1 新闻的显示新闻的显示v 1.新闻界面的建立v 此时已经设置好连接的数据字符串，单击下一步按钮，在出现的对话框中提示

10、我们是否要把刚才的连接字符串保存到配置文件中，选择“是”。这样如果再建立连接，就可以直接从连接中选择，不必重新设置添加连接。动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社15.3.1 新闻的显示新闻的显示v 1.新闻界面的建立v 选择下一步，进入配置SQL 语句对话框，选择表为News，字段为NewsID、Title、NewsDate、Author。选择右侧的“ORDER BY”按钮，添加排序，设置排序字段为“NewsDate”，降序排列，。动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社15.3.1 新闻的显示新闻的显示v 1.新闻界面的建立v 单击确定

11、后选择下一步，此时可以单击“测试查询”按钮，显示选择出的数据如图所示。动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社15.3.1 新闻的显示新闻的显示v 1.新闻界面的建立v 单击完成回到设计界面，出现相应的数据显示效果，如图所示。动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社15.3.1 新闻的显示新闻的显示v 1.新闻界面的建立v 单击调试按钮，浏览器中效果如图所示。动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社15.3.1 新闻的显示新闻的显示v 2.列的编辑v 选择GridView控件，在右侧的智能标记选项中选择“编辑列”。动

12、态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社15.3.1 新闻的显示新闻的显示v 2.列的编辑v 从左侧下方选定的字段中单击“NewsID”字段，在右侧修改属性HeaderText（标题文本）为“编号”，如图所示。动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社15.3.1 新闻的显示新闻的显示v 2.列的编辑v 同样修改Title的HeaderText属性为“标题”，Author的HeaderText属性为“发布人”，NewsDate的HeaderText属性为“日期”，单击确定。动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社15.3

13、.1 新闻的显示新闻的显示v 3.超级链接列的增加v 选择GridView智能标记中的添加新列选项，设置添加字段对话框中，选择字段类型为HyperLinkField（超级链接字段），超级链接文本为指定文本“查看详细”，超链接URL选项中从数据字段获取URL选择“NewsID”，URL格式字符串为“newsdetail.aspx?newsid=0”，这里的0代表参数NewsID，这样可以将每条记录的主键连接到每个超级链接中，形成变化的超级链接，从而传递查询的参数，以备newsdetail.aspx这个新闻浏览的页面显示。动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社15.3.

14、1 新闻的显示新闻的显示v 3.超级链接列的增加动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社15.3.1 新闻的显示新闻的显示v 3.超级链接列的增加动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社15.3.1 新闻的显示新闻的显示v 3.超级链接列的增加v 设计指导：这里我们也可以在插入超级链接字段对话框中设置页眉文本为标题，超链接文本为从数据字段获取文本，然后选择Title。然后删除原始的标题字段，将新添加的超级链接字段左移。动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社15.3.1 新闻的显示新闻的显示v 4.命令按钮列的增加v

15、 选择GridView智能标记中的添加新列选项，设置添加字段对话框中，选择字段类型为CommandField（命令按钮字段），页面文本为“编辑”，按钮类型为“Link”（超级链接形式），命令按钮选择“删除、编辑/更新、显示取消按钮”。动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社15.3.1 新闻的显示新闻的显示v 5.分页的启用v 选择GridView控件，选择智能标记中的启用分页，如果记录不足10条，将不显示下面的分页链接。可以通过修改GridView的PageSize属性修改每页的记录条数。动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社15.3.2

16、 新闻的编辑新闻的编辑v 通过数据源控件的修改功能实现新闻的编辑，选择数据源控件，选择属性中的UpdateQuery，单击右侧的按钮。动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社15.3.2 新闻的编辑新闻的编辑v 在命令和参数编辑器中输入修改命令：v update News set Title=Title,Author=Author,NewsDate=NewsDate where NewsID=NewsIDv 单击刷新参数，单击参数NewsID，设置其参数源为控件“Control”，ControlID为“GridView1”，依次设置其它参数为同样的属性。动态网页设计教

17、程动态网页设计教程美工与技术美工与技术机械工业出版社15.3.2 新闻的编辑新闻的编辑动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社15.3.2 新闻的编辑新闻的编辑v 设计指导：如果希望某个字段不需修改，除了在SQL的更新命令中去除更新语句外，还需要把GridView控件的该字段的Readonly属性设置为True，即设置为只读，这样单击编辑时，就不会出现文本框，而是直接显示信息了。例如要求不能修改发布人，即发布人设置为只读，需要选择GridView控件，在右上角的智能标记中选择“编辑列”命令，在字段编辑对话框中选择“发布人”字段，修改右侧属性ReadOnly为True，

18、如图15-34所示。然后选择数据源控件的UpdateQuery属性，取消Author项的修改，修改SQL语句为：v update News set Title=Title,NewsDate=NewsDate where NewsID=NewsID动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社15.3.3 新闻的删除新闻的删除v 通过数据源控件的删除功能实现新闻的删除，选择数据源控件，选择属性中的DeleteQuery，单击右侧的按钮，在命令和参数编辑器中输入修改命令：v delete from News where NewsID=NewsIDv 单击刷新参数，单击参数New

19、sID，设置其参数源为控件“Control”，ControlID为“GridView1”。动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社15.4 新闻发布功能的实现新闻发布功能的实现v 新闻发布实现新闻信息以及附件和图片等信息的提交，使新闻记录需要插入数据库中，新闻图片和附件需要上传到服务器，并将图片和附件的名称记录在该新闻记录中。动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社15.4.1 新闻发布界面制作新闻发布界面制作v 在右侧解决方案管理器中单击网站分支（D:news），单击鼠标右键，选择添加新项，或者选择菜单“文件|新建|文件”，选择类型为Web

20、窗体，名称为“NewsAdd.aspx”。v 打开设计视图，输入提示文字，拖动工具栏标准控件组中相应的控件（TextBox，FileUpload，Button，Label）到设计视图，调整标题框的宽度，设置内容文本框的TextMode属性为MultiLine，并调整其宽度与高度，修改Label控件的Text属性为空，两个上传控件后面的Label用于提示上传错误信息，按钮后面的Label控件用于显示发布提示。动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社15.4.1 新闻发布界面制作新闻发布界面制作动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社15.4.1

21、 新闻发布界面制作新闻发布界面制作v 这里我们可以对用户输入的信息进行非空验证，这里设计标题的非空验证。从左侧工具栏中选择验证组中的“RequiredFieldValidator”，拖动到标题文本框后面，修改其属性ErrorMessage为“请输入标题”，ControlToValidate属性为“TextBox1”（标题文本框）。动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社15.4.2 新闻发布代码设计新闻发布代码设计v 1.准备工作v 完成了新闻发布界面的设计，我们进行代码的编写，首先我们新建两个文件夹upimage和upfile，用于存放用户上传的图片与附件，在右侧解

22、决方案管理器中单击网站分支（D:news），单击鼠标右键，选择添加新项，选择文件夹，修改文件夹的名字为“upimage”，同样添加upfile文件夹。动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社15.4.2 新闻发布代码设计新闻发布代码设计v 2.插入数据基本功能的实现v 设计思路：先设计完成基本的功能数据的插入，然后进行逐步完善，验证用户信息的合法性，考虑文件上传的限制问题，最后实现完善的程序。程序设计从简单到复杂，逐步深入与完善，以此来体会程序开发的每一步。动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社15.4.2 新闻发布代码设计新闻发布代码设计

23、v 在发布按钮（Button1）的单击事件Button1_Click中输入插入数据的代码如下：v /下面代码是建立数据库连接v String constr=data source=(local);database=NewsDB;user id=sa;password=111111;v SqlConnection conn=new SqlConnection(constr);v conn.Open();v /下面代码是定义命令v SqlCommand cmd=conn.CreateCommand();v cmd.CommandText=insert into News(Title,Author,

24、NewsDate,NewsBody,NewsPhoto,NewsFile)values(Title,Author,NewsDate,NewsBody,NewsPhoto,NewsFile);v /下面代码给命令参数赋值v cmd.Parameters.Add(Title,SqlDbType.NVarChar).Value=TextBox1.Text;动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社15.4.2 新闻发布代码设计新闻发布代码设计vcmd.Parameters.Add(NewsBody,SqlDbType.Text).Value=TextBox2.Text;v c

25、md.Parameters.Add(Author,SqlDbType.NVarChar).Value=TextBox3.Text;v cmd.Parameters.Add(NewsDate,SqlDbType.DateTime).Value=DateTime.Now;v cmd.Parameters.Add(NewsPhoto,SqlDbType.NVarChar).Value=;/这里先设置为没有图片v cmd.Parameters.Add(NewsFile,SqlDbType.NVarChar).Value=;/这里先设置为没有附件 v /执行命令v cmd.ExecuteNonQuery

26、();v conn.Close();v /显示信息vLabel3.Text=新闻发布完毕;动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社15.4.2 新闻发布代码设计新闻发布代码设计v/清空文本框内容v TextBox1.Text=;v TextBox2.Text=;v TextBox3.Text=;动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社15.4.2 新闻发布代码设计新闻发布代码设计v 测试程序，输入数据，注意先不选择附件和图片。动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社15.4.2 新闻发布代码设计新闻发布代码设计v 3

27、.文件上传功能的实现v 在设计文件上传功能时，有这样一个要求，新闻可以没有附件或图片，如有图片或者附件，要求新闻图片是网页支持的图片格式（JPG、GIF、PNG、BMP）且大小不能超过10M，新闻的附件大小不能超过100M。为此，两个文件上传空间后面的标签用于提示错误信息，如新闻图片格式不正确，新闻图片太大，附件太大等。同时我们要注意，只有当图片和附件都满足要求时（新闻可以没有图片或附件，但如果有就要满足要求），才完成数据的插入操作。动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社15.4.2 新闻发布代码设计新闻发布代码设计v 设计思路：v 初始化变量与信号量v Strin

28、g upfilename=;/定义上传附件的附件名v String upimagename=;/定义上传图片的文件名v String upfilename2=;/定义上传附件文件的扩展名v String upimagename2=;/定义上传图片文件的扩展名v String upfilepath=Server.MapPath(upfile);/定义上传附件的路径v String upimagepath=Server.MapPath(upimage);/定义上传图片的路径 动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社15.4.2 新闻发布代码设计新闻发布代码设计v/通过时间

29、拼出文件名为当前时间的 年月日时分秒毫秒v DateTime ctime=DateTime.Now;/获取当前时间v String timestring=;/定义时间字符串v timestring=ctime.Year.ToString()+ctime.Month.ToString()+ctime.Day.ToString();/年月日拼接v timestring=timestring+ctime.Hour.ToString()+ctime.Minute.ToString()+ctime.Second.ToString()+ctime.Millisecond.ToString();/小时分钟秒

30、毫秒拼接v/定义信号量记录上传图片和附件状态v int upfilestyle=0;/定义上传附件的状态信号量：0为默认状态，表示没有附件，1表示有附件且符合要求，2表示有附件但不符合要求v int upimagestyle=0;/定义上传图片的状态信号量：0为默认状态，表示没有图片，1表示有图片且符合要求，2表示有图片但不符合要求动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社15.4.2 新闻发布代码设计新闻发布代码设计v 检查上传附件是否存在（检查附件文件大小，记录信号量）v if(FileUpload1.PostedFile.ContentLength 1048576

31、00)/如果文件大小大于100Mv v Label1.Text=上传附件文件太大;v upfilestyle=2;/记录上传附件错误v v elsev v upfilestyle=1;/记录上传附件成功v 动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社15.4.2 新闻发布代码设计新闻发布代码设计v检查上传图片是否存在（检查图片文件大小，记录信号量；检查图片文件格式，记录信号量）v if(FileUpload2.PostedFile.ContentLength 10485760)/10Mv v Label2.Text=图片文件太大;v upimagestyle=2;/记录错

32、误状态 v v/如图大小满足要求，判断文件格式v else if(upimagename2.ToLower()=.jpg|upimagename2.ToLower()=.gif|upimagename2.ToLower()=.png|upimagename2.ToLower()=.bmp)v v upimagestyle=1;/记录状态为成功 v 动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社15.4.2 新闻发布代码设计新闻发布代码设计v/如果执行到这里，只能是大小满足要求，但文件格式不正确v else v v Label2.Text=文件格式不正确;v upimages

33、tyle=2;/记录错误状态 v 动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社15.4.2 新闻发布代码设计新闻发布代码设计v 根据附件信号量upfilestyle和图片信号量upimagestyle的值（0表示没有文件，1表示有文件且格式与大小正确，2表示文件格式不正确或大小不正确），判断是否有附件与图片、文件格式与大小是否符合要求。只有附件信号量upfilestyle和图片信号量upimagestyle的值同时在正确范围时（小于2，即0或1），才进行文件的上传操作，同时完成在数据库中插入新闻记录的操作。也就是说，图片和附件可以没有，但有就要符合要求，即图片满足格式正确

34、、大小在规定范围，附件大小在规定范围，才能进行上传操作。动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社15.4.2 新闻发布代码设计新闻发布代码设计v/根据信号量取值决定是否执行文件上传与数据插入操作v if(upfilestyle 2&upimagestyle 2)/只有上传附件信号量和图片信号量都满足要求时v v if(upfilestyle=1)/如果上传附件状态为1，即有文件且合法，上传文件，记录文件名v v v v else/如果为0，则没有附件文件，记录文件名为空v v v 动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社15.4.2 新闻发布

35、代码设计新闻发布代码设计v if(upimagestyle=1)/如果上传图片状态为1，即有文件且合法，上传文件，记录文件名v v v v else /如果为0，则没有图片文件，记录文件名为空v v v v /执行插入数据代码，别忘了修改命令参数中的图片和附件的取值v v v 完整代码参考书中或光盘中的内容 动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社15.4.2 新闻发布代码设计新闻发布代码设计v 调试程序，选择一个大文件，测试出现无法显示该页面的提示页面，原因在于配置文件默认是上传4M以下的文件，因此需要在配置文件中web.config文件来改变应用程序上传限制。在

36、分支中加入：v v 这里maxRequestLength设置上传文件大小，单位是kb，executionTimeout允许执行请求的最大秒数,即超时时间，单位：秒，此功能必须在Compilation元素中Debug属性为false时才生效。再次选择文件，上传之后刷新解决方案资源管理器，发现附件与图片上传成功，。动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社15.4.2 新闻发布代码设计新闻发布代码设计v 4.信息处理与页面完善v 我们发现新闻发布成功之后，仍然存在文件格式不正确的提示，发布的数据在数据库中新闻主体内容的信息完全连接到了一起，没有换行的标志，这样显示新闻时必然

37、只有一个段落，与提交的信息不同，因此需要修改。再有就是信息的验证，对于客户端的浏览器由于安全性而对JavaScript有不同的设置，因此应在提交信息后通过进行验证。动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社15.4.2 新闻发布代码设计新闻发布代码设计v 解决信息换行的问题，需要新建一个公用函数texttohtml：vpublic string texttohtml(string chr)v v if(chr=null)v return;/如果字符串为空，返回空值v chr=Server.HtmlEncode(chr);/对字符串进行HTML编码v chr=chr.Re

38、place(,<);/替换字符串中的小于号,>);/替换字符串中的小于号为HTML的大于号>v chr=chr.Replace(,  );/替换字符串中的空格为HTML的空格 v chr=chr.Replace(n,);/替换字符串中的换行为HTML的换行 v return(chr);/返回加工后的字符串v 动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社15.4.2 新闻发布代码设计新闻发布代码设计v 将该函数放在程序中与其它事件并列，这里放在Page_Load之后。动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社

39、15.4.2 新闻发布代码设计新闻发布代码设计v 然后将Button1_Click事件中插入数据的参数vcmd.Parameters.Add(Title,SqlDbType.NVarChar).Value=TextBox1.Text;vcmd.Parameters.Add(NewsBody,SqlDbType.Text).Value=TextBox2.Text;vcmd.Parameters.Add(Author,SqlDbType.NVarChar).Value=TextBox3.Text;v 修改为vcmd.Parameters.Add(Title,SqlDbType.NVarChar).

40、Value=texttohtml(TextBox1.Text);vcmd.Parameters.Add(NewsBody,SqlDbType.Text).Value=texttohtml(TextBox2.Text);vcmd.Parameters.Add(Author,SqlDbType.NVarChar).Value=texttohtml(TextBox3.Text);动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社15.4.2 新闻发布代码设计新闻发布代码设计v 对于页面合法性与提示信息，修改Button1_Click程序为：v if(Page.IsValid)/进行页

41、面合法性验证v v /清除提示内容v Label1.Text=;v Label2.Text=;v Label3.Text=;v 原程序内容v v elsev v Label3.Text=请填写新闻标题;v 动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社15.5 新闻浏览功能的实现新闻浏览功能的实现v 新闻浏览是根据用户选择的新闻，打开新闻详细内容的界面，显示新闻的具体内容，同时将新闻图片和附件以适当的形式展示出来。动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社15.5.1 新闻浏览界面制作新闻浏览界面制作v 打开Visual Studio 2008，添加

42、新项，选择Web窗体，文件名为newsdetail.aspx，放置Label用于显示新闻标题（lbltitle）、发布人(lblauthor)、发布日期(lbldate)、新闻内容(lblbody)，这里对每个Label控件进行了改名，并设置其Text属性为空，放置Image控件(Image1)用于显示新闻图片，最后放置一个Hyperlink控件(Hyperlink1)，修改其Text属性为“下载附件”用于下载新闻附件。动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社15.5.2 新闻浏览代码设计新闻浏览代码设计v 在Page_Load事件中进行代码设计，这里为了防止用户盗链

43、，即没有通过新闻管理页面而直接输入网址产生错误，通过判断请求参数来进行处理。v protected void Page_Load(object sender,EventArgs e)v v if(Request.QueryStringnewsid!=null)/如果请求页面 /存在请求参数，则进行数据读取v v v elsev v Response.Redirect(error.aspx);/页面定位到出错界v/面?，读者可以自行设计错误页面。v v 动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社15.5.2 新闻浏览代码设计新闻浏览代码设计v 然后对if分支进行程序完善，

44、进行数据库连接，定义sql命令，读取数据，进行判断。详细代码参考书中内容。vprotected void Page_Load(object sender,EventArgs e)v v if(Request.QueryStringnewsid!=null)/如果请求页面存在请求/参数，则进行数据读取v v String constr=data source=(local);database=NewsDB;user id=sa;password=;v SqlConnection conn=new SqlConnection(constr);/定义连接对/象v conn.Open();/打开连接v

45、 /下面代码是定义命令v SqlCommand cmd=conn.CreateCommand();v cmd.CommandText=select*from News where NewsID=NewsID;v 动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社15.5.2 新闻浏览代码设计新闻浏览代码设计v/下面代码给命令参数赋值v cmd.Parameters.Add(NewsID,SqlDbType.NVarChar).Value=Request.QueryStringnewsid.ToString();v /执行命令v SqlDataReader rd=cmd.Exec

46、uteReader();/定义阅读器对象接收/命令执行的结果（数据集合）v if(rd.Read()v v lbltitle.Text=rdTitle.ToString();/新闻标题v lblauthor.Text=rdAuthor.ToString();/发布人v lbldate.Text=rdNewsDate.ToString();/发布日期v lblbody.Text=rdNewsBody.ToString();/新闻内容v if(rdNewsPhoto.ToString()!=)/新闻图片存在v v Image1.Visible=true;/显示图像控件v Image1.ImageU

47、rl=/upimage/+rdNewsPhoto.ToString();/指定路径 v 动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社15.5.2 新闻浏览代码设计新闻浏览代码设计velsev v Image1.Visible=false;/隐藏控件v vif(rdNewsFile.ToString()!=)/新闻附件存在v v HyperLink1.Visible=true;/显示超级链接控件v HyperLink1.NavigateUrl=/upfile/+rdNewsFile.ToString();/链接路径v v elsev v HyperLink1.Visible

48、=false;/隐藏控件v v rd.Close();/关闭阅读器v conn.Close();/关闭连接v 动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社15.5.2 新闻浏览代码设计新闻浏览代码设计velsev v rd.Close();v conn.Close();v Response.Redirect(error.aspx);/页面定位到出错页面。v v v elsev v Response.Redirect(error.aspx);/页面定位到出错页面，读者可/以自行设计错误页面。v v 动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社15.5.

49、2 新闻浏览代码设计新闻浏览代码设计v 直接调试程序，显示error页面无法找到，因为我们没有建立这个页面，打开新闻管理页面，再调试程序，选择一条新闻，单击详细内容。动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社15.6 新闻管理模块界面的美化新闻管理模块界面的美化v 新闻管理模块的界面美化采用流行的DIV+CSS的布局方式进行美化，需要结合Visual Studio 2008和Dreamweaver CS5进行美化设计，使用Dreamweaver CS5设计布局页面，使用Visual Studio 2008测试美化效果。动态网页设计教程动态网页设计教程美工与技术美工与技术

50、机械工业出版社15.6.1 新闻管理界面的美化新闻管理界面的美化v 1.统一界面的设计v 通过前面的设计，我们得到了网页新闻显示界面，而这只是从技术的角度实现，真正要到成品还需要进一步的美化。我们采用统一的布局来实现界面效果。实际的工作中，存在这样的问题，美工已经把新闻管理的界面设计完毕，并设计成html格式的文件，往往这是很常见的情况，我们可以直接采用这个文件进行修改，形成模板，然后将其它的页面套用上去，这样的操作有助于我们实际操作能力的提高。这里设置了网页的统一框架，而将网页内容放到右侧中间的空白区域中，体现网页设计一致性原理。动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出