新闻管理模块设计GridView控件与ADONET高级应用

CompanyLOGO动态网页设计教程——美工与技术徐延章编著第15章新闻管理模块设计——GridView控件与ADO.NET高级应用章新闻管理模块设计——GridView控件与ADO.NET高级应用新闻管理模块是一个综合新闻和内容管理的模块，是基于B/S模式的网络信息管理系统，新闻管理提供新闻的发布，审核，删除，浏览等功能，是大多数网站后台的主要功能模块，通过设计新闻管理模块，读者可以延伸设计例如用户管理、信息管理等模块。将美工与技术一起讲在本章也有明显的体现，本章美工设计采用流行的DIV+CSS模式设计，紧跟时代潮流，体现技术的要求。动态网页设计教程——美工与技术机械工业出版社章新闻管理模块设计——GridView控件与ADO.NET高级应用动态网页设计教程——美工与技术机械工业出版社15.1新闻管理界面的设计115.2新闻管理数据库的设计215.3新闻管理功能的实现——GridView控件的使用315.4新闻发布功能的实现415.5新闻浏览功能的实现515.6新闻管理模块界面的美化2615.7新闻管理模块高级设计——ADO.NET数据操纵7新闻管理界面的设计新闻管理模块主要包括新闻管理、新闻发布、新闻浏览等页面，我们在一致性原则的指导下，进行新闻管理界面的美工设计。动态网页设计教程——美工与技术机械工业出版社美工的界面设计1.新闻管理界面动态网页设计教程——美工与技术机械工业出版社美工的界面设计1.新闻管理界面动态网页设计教程——美工与技术机械工业出版社美工的界面设计2.新闻发布界面动态网页设计教程——美工与技术机械工业出版社美工的界面设计2.新闻发布界面动态网页设计教程——美工与技术机械工业出版社技术如何实现新闻管理功能主要利用GridView控件结合数据源对象实现，利用数据源控件的查询、修改和删除语句，通过GridView控件按钮实现。GridView控件通过表格形式显示数据，通过设置GridView控件的数据源，GridView控件每列显示一个字段，每行显示一条记录，同时支持数据的编辑、排序和分页的功能。需要说明的是，GridView控件不支持插入记录的功能。动态网页设计教程——美工与技术机械工业出版社新闻管理数据库的设计新闻管理模块是典型的数据库操作的应用，因此在设计时首先要对新闻数据库进行设计，建立数据库并设计数据表，提供程序对数据的访问支持。动态网页设计教程——美工与技术机械工业出版社数据库的建立打开SQLServer2005，从左侧对象资源管理其中，选择数据库选项，单击鼠标右键，选择新建数据库，设置数据库名称为“NewsDB”。动态网页设计教程——美工与技术机械工业出版社数据表的建立打开新闻数据库“NewsDB”，选择“表”选项，单击鼠标右键，选择“新建表”，输入字段“NewsID”，在列属性中设置数据类型为int型，设置标识规范为是，从而使字段能够自动编号。单击工具栏中的设置为主键按钮，将该字段作为主键。然后按照表输入其它字段，单击保存按钮，将表命名为“News”。。动态网页设计教程——美工与技术机械工业出版社字段含义字段名称数据类型备注编号NewsIDint标识规范为是，设为主键标题TitleNvarchar200发布人AuthorNvarchar50日期NewsDatedatatime内容NewsBodytext图片NewsPhotoNvarchar50附件NewsFileNvarchar50数据表数据的添加在对象资源管理器中，单击News表，单击鼠标右键，选择打开表，手动输入数据，注意输入完一条记录，按Enter键确认。动态网页设计教程——美工与技术机械工业出版社新闻管理功能的实现——GridView控件的使用新闻管理功能中重要的就是表格形式的新闻条目的显示，提供新闻修改、删除、浏览的超级链接。GridView控件是专门为表格数据设计的控件，提供对表格形式数据操作的多项功能。动态网页设计教程——美工与技术机械工业出版社新闻的显示1.新闻界面的建立打开VisualStudio.net2008，选择菜单“文件|新建|网站”，在“新建网站”对话框中，设置网站的位置为“D:\news”，程序自动新建Default.aspx文件，选择“设计”视图。从左侧工具栏中选择“数据”组中的“GridView”控件，拖动到设计视图中。动态网页设计教程——美工与技术机械工业出版社新闻的显示从控件右侧的智能标记选项中选择“自动套用格式”，可以设置控件的显示样式，可以单击“移除格式设置”，取消格式的应用，这里选择一种格式后单击“确定”按钮。动态网页设计教程——美工与技术机械工业出版社新闻的显示1.新闻界面的建立从控件右侧智能标记中“选择数据源”选项中选择“新建数据源”，出现数据源设置对话框，在这里可以设置数据源的类型，这里选择“数据库”，系统会自动为数据源对象命名“SqlDataSource1”，单击确定按钮。动态网页设计教程——美工与技术机械工业出版社新闻的显示1.新闻界面的建立在选择数据连接对话框中单击“新建连接”按钮，设置服务器为（local）或者为.（半角字符——点），用户名为sa，密码为111111，选择数据库为“NewsDB”。读者可以根据自己设置的密码输入密码。动态网页设计教程——美工与技术机械工业出版社新闻的显示1.新闻界面的建立此时已经设置好连接的数据字符串，单击下一步按钮，在出现的对话框中提示我们是否要把刚才的连接字符串保存到配置文件中，选择“是”。这样如果再建立连接，就可以直接从连接中选择，不必重新设置添加连接。动态网页设计教程——美工与技术机械工业出版社新闻的显示1.新闻界面的建立选择下一步，进入配置SQL语句对话框，选择表为News，字段为NewsID、Title、NewsDate、Author。选择右侧的“ORDERBY”按钮，添加排序，设置排序字段为“NewsDate”，降序排列，。动态网页设计教程——美工与技术机械工业出版社新闻的显示1.新闻界面的建立单击确定后选择下一步，此时可以单击“测试查询”按钮，显示选择出的数据如图所示。动态网页设计教程——美工与技术机械工业出版社新闻的显示1.新闻界面的建立单击完成回到设计界面，出现相应的数据显示效果，如图所示。动态网页设计教程——美工与技术机械工业出版社新闻的显示1.新闻界面的建立单击调试按钮，浏览器中效果如图所示。动态网页设计教程——美工与技术机械工业出版社新闻的显示2.列的编辑选择GridView控件，在右侧的智能标记选项中选择“编辑列”。动态网页设计教程——美工与技术机械工业出版社新闻的显示2.列的编辑从左侧下方选定的字段中单击“NewsID”字段，在右侧修改属性HeaderText（标题文本）为“编号”，如图所示。动态网页设计教程——美工与技术机械工业出版社新闻的显示2.列的编辑同样修改Title的HeaderText属性为“标题”，Author的HeaderText属性为“发布人”，NewsDate的HeaderText属性为“日期”，单击确定。动态网页设计教程——美工与技术机械工业出版社新闻的显示3.超级链接列的增加选择GridView智能标记中的添加新列选项，设置添加字段对话框中，选择字段类型为HyperLinkField（超级链接字段），超级链接文本为指定文本“查看详细”，超链接URL选项中从数据字段获取URL选择“NewsID”，URL格式字符串为“newsdetail.aspx?newsid={0}”，这里的0代表参数NewsID，这样可以将每条记录的主键连接到每个超级链接中，形成变化的超级链接，从而传递查询的参数，以备newsdetail.aspx这个新闻浏览的页面显示。动态网页设计教程——美工与技术机械工业出版社新闻的显示3.超级链接列的增加动态网页设计教程——美工与技术机械工业出版社新闻的显示3.超级链接列的增加动态网页设计教程——美工与技术机械工业出版社新闻的显示3.超级链接列的增加设计指导：这里我们也可以在插入超级链接字段对话框中设置页眉文本为标题，超链接文本为从数据字段获取文本，然后选择Title。然后删除原始的标题字段，将新添加的超级链接字段左移。动态网页设计教程——美工与技术机械工业出版社新闻的显示4.命令按钮列的增加选择GridView智能标记中的添加新列选项，设置添加字段对话框中，选择字段类型为CommandField（命令按钮字段），页面文本为“编辑”，按钮类型为“Link”（超级链接形式），命令按钮选择“删除、编辑/更新、显示取消按钮”。动态网页设计教程——美工与技术机械工业出版社新闻的显示5.分页的启用选择GridView控件，选择智能标记中的启用分页，如果记录不足10条，将不显示下面的分页链接。可以通过修改GridView的PageSize属性修改每页的记录条数。动态网页设计教程——美工与技术机械工业出版社新闻的编辑通过数据源控件的修改功能实现新闻的编辑，选择数据源控件，选择属性中的UpdateQuery，单击右侧的按钮。动态网页设计教程——美工与技术机械工业出版社