ASPNET动态网页设计整套课件幻灯片教学教程电子讲义.ppt

Click to edit Master text styles,Second level,Third level,Fourth level,Fifth level,*,Click to edit Master title style,项目1 创建ASP.NET网站,项目2 数据的绑定,教学目标,知识教学目标,掌握将属性、方法、变量表达式、数组绑定到控件或直接在前端页面显示的方法,通过数据控件获取并管理数据库信息,绑定值的获取,技能培养目标,掌握数据绑定的方式方法,能够通过数据控件和数据源控件管理数据库,目 录,任务2.1 绑定到属性,1,任务2.2 绑定到方法,2,任务2.3 绑定到变量,3,任务2.4 绑定到数组,4,任务2.5 绑定到数据库数据,5,任务2.6 图表控件的数据绑定,6,任务2.1 绑定到属性,任务描述：,本任务要将后置代码页面中定义的公共属性绑定到窗体页面上直接显示或绑定到服务器控件上，也可将一个控件的属性值绑定到另一个控件上。,任务2.1 绑定到属性,关键知识：,基于属性的数据绑定所涉及的属性必须包含get访问器。,属性绑定书写方式：,。,Page_Load事件中调用Page类的DataBind()方法。,任务2.1 绑定到属性,任务实施：,定义公共属性,任务2.1 绑定到属性,任务实施：,（绑定到公共属性）,源代码视图中进行属性绑定、后置代码页面绑定,运行效果图如下：,任务2.1 绑定到属性,任务实施：,（绑定到控件属性）,将一个控件的值绑定以另一个控件,任务2.2 绑定到方法,任务描述：,本任务将后置代码页面定义的方法绑定到前端页面的控件属性上，或通过直接绑定方法的方式在前端页面显示结果。,任务2.2 绑定到方法,关键知识：,绑定书写方式为：,或。,也可以将方法绑定到服务器控件属性，服务器控件属性=进行绑定。,Page_Load事件中调用Page类的DataBind()方法。,任务2.2 绑定到方法,任务实施：,定义方法,任务2.2 绑定到方法,任务实施：,在源代码视图进行方法绑定,任务2.2 绑定到方法,任务实施：,将方法绑定到服务器控件属性,任务2.3 绑定到变量,任务描述：,在前端页面通过绑定直接显示获得后置代码页面定义的公共变量值；在前端页面通过绑定获得后置代码页面定义的公共变量表达式的值。,任务2.3 绑定到变量,关键知识：,变量绑定的方法：,变量绑定到服务器控件,控件属性=“,或控件属性=,Page_Load事件中调用Page类的DataBind()方法。,任务2.3 绑定到变量,任务实施：,定义字符串变量,任务2.3 绑定到变量,任务实施：,在源代码视图进行变量绑定,任务2.3 绑定到变量,任务实施：,绑定到变量表达式,任务2.4 绑定到数组,任务描述：,在后置代码页面定义数组后，在前端页面将数组绑定到各类列表控件；在后置代码页面定义数组后，在页面第一次加载的同时将数组绑定到各列表控件；读取绑定了数组的列表项控件值。,任务2.4 绑定到数组,关键知识：,数组是一个多值的变量，能与数组进行绑定的主要是多值列表控件。,将后置代码页面定义的数组绑定到多值列表控件，有两种方式：,前端页面绑定到控件的属性：,DataSource=；同时，在后置代码文件的页面加载事件中添加Page.DataBind();语句。,在后置代码页面写如下代码：,注意：每个控件可用于绑定的属性略有不同,任务2.4 绑定到数组,关键知识：常用多值列表控件,CheckBoxList多选列表框控件,RadioButtonList单选列表框控件,DropDownList下拉列表框控件,ListBox列表控件,BulletedList符号列表控件,任务2.4 绑定到数组,关键知识：CheckBoxList控件,DataSourceID、DataMember、DataTextField和DataValueField用于从数据库中获取数据进行数据绑定。,任务2.4 绑定到数组,关键知识：CheckBoxList控件,任务2.4 绑定到数组,关键知识：CheckBoxList控件,CheckBoxList控件选项的主要属性有Text、Selected和Value，分别表示选项文本、选项的选中状态和选项值。,常用的事件。CheckBoxList控件的常用事件是SelectedIndexChanged，如果控件的AutoPostBack属性设为True，当控件选项的状态改变时，将触发该事件。,任务2.4 绑定到数组,关键知识：RadioButtonList控件,基本属性与CheckBoxList控件相同,获得RadioButtonList1控件选中相关信息表达式如下：,任务2.4 绑定到数组,关键知识：ListBox控件,基本属性与CheckBoxList相似。,多选模式。,SelectionMode为Single，表示只允许用户在列表框中选择一个选项。,SelectionMode为为Multiple时，表示允许用户使用Ctrl键或Shift键在列表框中选择多个选项。,常用事件与CheckBoxList和RadioButtonList控件相同。,任务2.4 绑定到数组,关键知识：DropDownList控件,DropDownList控件以下拉列表的方式显示选项，没有多选模式，其他的基本属性、获得选中项相关信息以及绑定相关的属性和常用事件与单选列表框控件相同。,DropDownList控件的DataSourceID、DataTextField和DataValueField可用于从数据库中获取数据进行数据绑定。,任务2.4 绑定到数组,关键知识：BulletedList控件,BulletedList控件可以显示带项目符号的列表，列表项是ListItem对象。,主要属性:,BulletStyle：设置列表项显示的符号。,BulletImageUrl：当BulletStyle属性为CustomImage时，用图片代替列表符号。,DisplayMode,获取选中项相关信息。获取BulletedList1控件第i项被选中项相关信息表达式如下：,BulletedList1.Itemsi.Text,BulletedList1.Itemsi.Value,任务2.4 绑定到数组,任务实施,：,（,前端页面绑定）,定义数组,任务2.4 绑定到数组,任务实施：,（,前端页面绑定）,绑定到各类控件,任务2.4 绑定到数组,任务实施：,（,前端页面绑定）,后台绑定,任务2.4 绑定到数组,任务实施：,（后台,绑定）,定义数组、绑定并赋值,任务2.4 绑定到数组,任务实施：,获取单选按钮控件的值,获取下拉列表框控件的值,任务2.4 绑定到数组,任务实施：,获取复选列表框选中项的值,任务2.4 绑定到数组,任务实施：,获取列表框选中项的值,跳转到符号列表控件链接的页面。,任务2.5 绑定到数据库数据,任务描述：,本任务主要实现数据库信息的读取、插入、编辑和删除，具体包括通过数据源控件连接到数据库的某个表，用列表控件显示数据库字段信息，读取并显示数据库中以二进制方式存储的图片，读取并显示数据库中以路径方式存储的图片，使用不同的数据控件显示数据库信息，并实现对数据库信息的插入、删除和更新操作。,任务2.5 绑定到数据库数据,关键知识：,ADO.NET,ASP.NET默认是通过ADO.NET来访问数据库的。ADO.NET是一种以面向对象的设计方法构建数据访问和操作的类库，通过ADO.NET类库，可方便操作各种各样的数据源，如数据库、文本文件、Excel文件和XML文件等。,任务2.5 绑定到数据库数据,关键知识：,连接数据库的方法,SQLClient方法,命名空间为System.Data.SQLClient，用于访问Microsoft SQL Server 7.0及以上版本的数据库。,OleDB方法,命名空间为System.Data.OleDb，允许.NET程序调用存在于OleDb Data Provider中的数据源。,ODBC方法,命名空间为System.Data.Odbc，允许.NET程序使用所有兼容的ODBC驱动程序。,Oracle方法,命名空间为System.Data.OracleClient，用于访问Oracle数据库。,任务2.5 绑定到数据库数据,关键知识：,常用数据源控件,SqlDataSource控件,AccessData Source控件,ObjectDataSource控件,XmlDataSource控件,SiteMapDataSource控件,EntityDataSource控件,LinqDataSource控件。,任务2.5 绑定到数据库数据,关键知识：数据绑定方法,Eval方法是静态单向（只读）方法。,Bind方法支持读/写功能，所以Bind函数用于双向（可更新）绑定。该方法可以检索数据绑定控件的值并将任何更改提交回数据库。,任务2.5 绑定到数据库数据,关键知识：数据控件主要功能,ASP.NET 4.0提供的数据显示控件主要有GridView、DetailsView、FormView和DataList，这些控件具有以下主要功能。,提供了以下两种用于绑定到数据的选项：,使用DataSourceID属性与数据源控件进行数据绑定,使用DataSource属性进行数据绑定,设置数据显示格式。,编辑、删除、更新和插入数据。,排序功能。,模板功能。,分页功能。,任务2.5 绑定到数据库数据,关键知识：数据控件,GridView,DetailsView,FormView,DataView,ListView,DataPager,任务2.5 绑定到数据库数据,任务实施：使用数据源控件连接数据库,任务2.5 绑定到数据库数据,任务实施：使用下拉列表控件显示数据,任务2.5 绑定到数据库数据,任务实施：显示以路径方式存储的数据库图片,显示雇员表中路径方式存储的雇员头像信息，步骤如下：,一、创建文件,二、配置数据源控件,三、完成数据源控件与数据控件的绑定。,任务2.5 绑定到数据库数据,任务实施：插入、编辑和删除数据,步骤如下：,一、新建网页文件,二、配置数据源控件,三、显示数据库信息,任务2.5 绑定到数据库数据,任务实施：插入数据,任务2.5 绑定到数据库数据,任务实施：编辑数据,任务2.5 绑定到数据库数据,任务实施：删除数据,任务2.6 图表控件的数据绑定,任务描述：,获得Northwind数据库中每个种类的产品总数量，并以图片显示。涉及两张表：种类表和产品表，并对同一种类的产品进行数量统计。,任务2.6 图表控件的数据绑定,关键知识：Chart控件,ASP.NET的Chart控件可以向Web应用程序添加动态的数据绑定的图形，通过Chart控件制作不同类型的图表，如柱形图、面积图、条形图、折线图、饼图等，可以通过修改绘图区以及添加边框、背景和图例定制图表的外观。Chart控件主要有下面三个组件。,系列（Series）：系列是数据点的集合，不同类型的图表呈现系列的方式不同。,图表区（Chararea）：定义绘制系列的绘图区。,数据点：系列内的一个数据点。,编写Chart控件的DataBound事件，在DataBound事件中利用Chart控件的DataManipulator属性的Sort方法可对图表任意轴上的系列进行升序或降序排序。,任务2.6 图表控件的数据绑定,任务实施：,步骤如下：,添加页面,配置数据源控件,将Chart控件绑定到数据源控件,项目3 页面导航与视图切换,教学目标,知识教学目标,使用CSS+DIV设置一级横向导航和竖向导航,使用Menu控件建立一级横向导航和竖向导航,使用Menu控件建立二级横向导航,使用TreeView控件建立树状导航,使用MultiView控件实现视图切换,技能培养目标,根据页面设计需求，使用多种方式制作横向一级和多级导航,根据页面设计需求，使用多种方式制作竖向一级和多级导航,根据页面设计需要，制作多视图切换模块,目 录,任务3.1 使用CSS+DIV创建导航,1,任务3.2 使用Menu控件建立网站导航,2,任务3.3 使用TreeView建立树状导航,3,任务3.4 使用MultiView实现多视图切换,4,任务3.5 站点地图应用,5,6,任务3.1 使用CSS+DIV创建导航,任务描述：,本任务基于CSS+DIV完成横向导航和竖向导航的制作，导航块内容可以是列表项，也可以采用链接文字，通过外部样式使得导航块内容按需要的方式横向或竖向显示。,任务3.1 使用CSS+DIV创建导航,关键知识：导航样式,浮动设置：采用ul-li列表项的形式制作横向导航时，关键点是需要设置每一个li列表项由默认的竖向排列转成横向排列，通过CSS样式控制这种转向，需要设置li样式向左或向右浮动。,复合链接样式的设置：文字链接有默认的链接样式、鼠标经过样式和访问过后的样式，如果需要改变默认的样式，则需要对链接样式进行复合样式定义，两个样式如果一样，可用逗号隔开。,外部样式的应用：本项目所有样式均保存在css文件夹下的样式文件中，需要在网页文件源代码视图的标签内添加对外部样式文件的引用。,任务3.1 使用CSS+DIV创建导航,任务实施：使用ur列表制作横向导航,任务3.1 使用CSS+DIV创建导航,任务实施：使用ur列表制作横向导航,任务3.1 使用CSS+DIV创建导航,任务实施：使用超链接制作横向导航,任务3.1 使用CSS+DIV创建导航,任务实施：使用超链接制作横向导航,任务3.1 使用CSS+DIV创建导航,任务实施：制作竖向导航,任务3.1 使用CSS+DIV创建导航,任务实施：制作竖向导航,任务3.2 使用Menu控件建立网站导航,任务描述：,本任务主要是了解menu控件的基本属性，并能够使用menu控件建立一级横向导航、二级横向导航、一级竖向导航和二级竖向导航。,任务3.2 使用Menu控件建立网站导航,关键知识：Menu控件,Menu控件是一个菜单控件，由一个或多个菜单子项（MenuItem）组成，并且菜单子项之间可以形成一定的层次关系。菜单控件包含两种菜单：静态菜单（StaticMenu）和动态菜单（DynamicMenu）。静态菜单总是一直显示在网页上充当一级菜单的作用，而动态菜单由菜单的父菜单弹出，充当二级菜单作用。,Menu控件的Items属性表示Menu控件的所有菜单项，可以在设计视图中以静态的方式添加Menu控件的菜单。,任务3.2 使用Menu控件建立网站导航,关键知识：Menu常用属性,1）Orientation属性：用于设置控件的呈现方向（Vertical、Horizontal。,2）StaticDisplayLevels属性：用于设置静态菜单显示级别数。默认值是1。,3）MaximumDynamicDisplayLevels属性：指定在静态显示层后应显示的动态显示菜单节点层数。,4）DisappearAfter属性：设置菜单动态显示部分从显示到消失所需的时间长度。默认值为 500 毫秒。,5）CssClass属性：可引用类样式。添加静态菜单项后可通过引用链接类样式实现导航的效果。,6）StaticEnableDefaultPopOutImage属性，该属性默认为True，有多级导航菜单时，菜单项之间会出现的间隔符号。设为False，则不出现间隔符号。,7）StaticMenuStyle样式：可设置一级静态菜单项的样式,8）DynamicMenuStyle样式：可设置除一级静态菜单项外的其它动态菜单的样式。,任务3.2 使用Menu控件建立网站导航,任务实施：建立横向导航,步骤见教材任务,任务3.2 使用Menu控件建立网站导航,任务实施：建立二级横向导航,步骤见教材任务,任务3.2 使用Menu控件建立网站导航,任务实施：建立一级竖向导航,步骤见教材任务,任务3.2 使用Menu控件建立网站导航,任务实施：建立二级竖向导航,步骤见教材任务,任务3.3 使用TreeView建立树状导航,任务描述：,网站的后台管理主页面通常需要设置一个导航，通过该导航，使得管理员可链接到各个页面，从而实现数据库的插入、删除、更新和修改用户信息等任务，本任务使用 TreeView控件建立一个管理员后台主页面的树状导航。,任务3.3 使用TreeView建立树状导航,关键知识：TreeView控件,TreeView控件由一个或多个节点构成，通过树状视图形式展示。可以将控件绑定到SiteMapDataSource控件上、绑定到XMLDataSource控件上和绑定到数据库上，树中的每个项都被称为一个节点，由TreeNode 对象表示。每个节点都具有一个Text属性和一个Value属性。Text属性的值显示在TreeView控件中，而Value属性则用于存储有关该节点的任何附加数据。,任务3.3 使用TreeView建立树状导航,关键知识：TreeView控件,Expanded属性：指定默认情况下节点是否打开。,NavigateUrl属性：菜单被选中是被定位到的页面的Url。,SelectAcion属性：指定节点被选中时执行的操作，例如展开和折叠。,Text属性：节点项显示的文本。,Value属性：节点项的值。,Target属性：设置为_blank，从空白页打开跳转的页面。,CssClass属性：引用CSS类样式。,NodeIndent属性：设置节点的缩进量。,NodeStyle样式：设置节点的样式，包括类样式的引用、水平间距、字体等样式的设置。,HoverNodeStyle样式：鼠标经过节点样式的设置。,ExpandDepth：默认为FullExpand，当有多级菜单时可设置为只显示前面的级数,。,任务3.3 使用TreeView建立树状导航,任务实现：,步骤见教材任务,任务3.4 使用MultiView实现多视图切换,任务描述：,在各类门户网站中通常会设计一个多视图切换层，如在一个布局位置，用户可通过单击切换按钮实现同一位置查看新闻或通知或公告等信息，如图3-14所示效果。本任务使用MultiView和View控件结合，实现多视图的切换。,任务3.4 使用MultiView实现多视图切换,关键知识：MultiView和View,在ASP.NET中，使用MultiView和View控件可以做出选项卡的效果，一个MultiView控件可以包含多个View控件，一个View控件相当于一个选项卡。MultiView控件一次只能显示一个View视图，与按钮、链接按钮或图片按钮控件结合使用，可通过单击按钮，切换到不同的View控件，从而看到不同的内容。,主要属性：,Views和ActiveViewIndex,按钮属性设置：,CommandName属性和CommandArgument属性,任务3.4 使用MultiView实现多视图切换,任务实施：,步骤如下：,添加样式文件和布局文件,定位并设置链接按钮,设置链接样式,添加MultiView和View控件,设计链接标题样式,编写事件代码,效果图如下：,任务3.5 站点地图应用,任务描述：,根据网站的文件结构创建站点地图，并依据站点地图与SiteMapPath控件结合，实现站点路径导航；与Menu控件和TreeView控件结合，实现页面导航。,任务3.5 站点地图应用,关键知识：站点地图控件,站点地图文件按站点的分层形式组织页面，用于描述站点的逻辑结构，根节点是SiteMap。可以为网站中的每个页面添加一个SiteMapNode元素，并通过嵌入SiteMapNode元素来创建层次结构。,任务3.5 站点地图应用,关键知识：站点地图控件,任务3.5 站点地图应用,关键知识：SiteMapPath,SiteMapPath控件自动从站点地图Web.sitemap文件中读取数据，提供了从当前位置沿页层次结构向上的跳转功能。,任务3.5 站点地图应用,任务实施：建立网站地图,任务3.5 站点地图应用,任务实施,：,设置SiteMapPath控件,设置Menu控件,设置TreeView控件,任务3.5 站点地图应用,任务实施：,项目4 网站前端页面设计,科学出版社 主编 ：郭建东,教学目标,知识教学目标,CSS+DIV布局网页,外部样式的应用,母版页的设计与应用,技能培养目标,能够熟练应用CSS+DIV布局前端页面,能够应用母版页设计网站页面,目 录,任务4.1 CSS+DIV布局网站1页面,1,任务4.2 CSS+DIV布局网站2页面,2,任务4.3 母版页布局网站2页面,3,任务4.1 CSS+DIV布局网站1页面,任务描述：,本任务根据所给的图片素材及网页效果图完成一个企业网站的主页面和内容页面的前端页面设计，要求使用CSS+DIV技术进行页面设计。,任务4.1 CSS+DIV布局网站1页面,关键知识：使用CSS+DIV布局页面,公共类样式的设定,页面的导航设计,页面居中设计,设置了层的宽度属性后，可将Div的样式margin属性值设为auto,将层的上下外边距设为0，左右边距设为auto,任务4.1 CSS+DIV布局网站1页面,任务实施：,建立网站1主页面,一、建立网站及相关文件,二、公共样式设计,三、总容器层设计,四、页眉设计,五、内容区容器层设计,六、左侧栏设计,七、右侧栏设计,八、页脚设计,任务4.1 CSS+DIV布局网站1页面,任务实施：,建立网站1主页面,任务4.1 CSS+DIV布局网站1页面,任务实施：,建立网站1内容页面,任务4.2 CSS+DIV布局网站2页面,任务描述：,任务4.1中完成了一个企业网站的主页面和内容页的设计。实际网站的布局多种多样，本任务继续介绍另一个网站的前端页面设计过程。根据所给图片素材及页面效果图，完成如图4-3所示企业网站主页面和如图4-14所示内容页面的前端设计。,任务4.2 CSS+DIV布局网站2页面,关键知识：网站2前端页面设计及导航设计,根据所给图片素材进行网页前端页面设计。本节内容根据静态网页的基础知识完成页面制作，使用CSS+DIV布局网站2主页面和内容页面。,导航设置：导航除了可项目3中的CSS+DIV和通过控件实现方式外，本节介绍通过图片背景+文字形式进行导航功能的实现，以椭圆图为背景，在椭圆背景图上添加文字并设置文字链接的方式设计导航，当鼠标经过背景图时背景图及文字均发生变化，需要编写导航链接样式和鼠标经过样式代码。,任务4.2 CSS+DIV布局网站2页面,任务实施：,建立网站2主页面,一、创建图片文件夹及网页文件,二、总容器层设计,三、页眉设计,四、整体内容区容器层设计,五、左侧栏设计,六、右侧栏设计,七、页脚设计,任务4.2 CSS+DIV布局网站2页面,任务实施：,建立网站2主页面,任务4.2 CSS+DIV布局网站2页面,任务实施：,建立网站2内容页面,任务4.3 母版页布局网站2页面,任务描述：,分析两个网站的主页面和内容页面，会发现网站主页面和内容页之间存在着布局相同、内容相同的部分。为了提高开发效率，可将一个网站中各网页的相同部分设计在母版页中，普通的窗体页面应用母版页，可快速完成网站页面的设计。本任务以网站2为例，创建一个母版页，并应用到Web页面中。,任务4.3 母版页布局网站2页面,关键知识：母版页概念,母版页是一个网页模板，可以将母版页的风格应用到多个网页中。在Web应用程序创建母版页（Master）页面，像普通页面一样设计完母版页，并在母版页中需要添加一个或多个ContentPlaceHolder控件，该控件占位空间是应用了母版页的普通网页中的可编辑区，在编辑区中放置不同的网页内容，可快速完成风格一致的内容页面的制作。,创建并设计完母版页后，在创建Web窗体页面时勾选上母版页，即可创建基于母版页的网页，运行时，ASP.NET会自动地将两个页面进行整合，显示给用户。,任务4.3 母版页布局网站2页面,任务实施：,步骤见教材任务实施,项目5 新闻标题的显示,教学目标,知识教学目标,数据控件模板的设置,查询字符串传递参数,字符串子串的获取,链接样式的设置,日期格式的设置,分页设置,技能培养目标,熟练设置网站的新闻标题格式样式,掌握参数的传递与接收方式,目 录,任务5.1 设计新闻表数据库及读取新闻标题,1,任务5.2 使用查询字符串传递新闻标题参数,2,任务5.3 新闻标题的修改,3,任务5.4 显示前几条标题及分页显示内容,4,任务5.1 设计新闻表数据库及读取新闻标题,任务描述：,本任务以公司网站其中的一个新闻部分作为研究对象，分析内容，建立数据库，并建立关联的数据库表。新闻标题及内容等信息存储在数据库后，需要将内容显示到网页上。可通过数据控件GridView、DataList、ListView等显示所需要的内容，同时对内容的显示形式进行设置。,任务5.1 设计新闻表数据库及读取新闻标题,关键知识：数据库设计与数据控件的应用,数据库设计与导出,任务5.1 设计新闻表数据库及读取新闻标题,关键知识：数据库设计与数据控件的应用,数据控件模板（非模板控件的模板字段）,任务5.1 设计新闻表数据库及读取新闻标题,关键知识：数据库设计与数据控件的应用,数据控件模板（模板控件）,任务5.1 设计新闻表数据库及读取新闻标题,关键知识：数据库设计与数据控件的应用,数据控件的样式,任务5.1 设计新闻表数据库及读取新闻标题,任务实施：创建数据库及表,任务5.1 设计新闻表数据库及读取新闻标题,任务实施：导出脚本,任务5.1 设计新闻表数据库及读取新闻标题,任务实施：读取数据库中文件标题,步骤见教材任务实施,任务5.2使用查询字符串传递新闻标题参数,任务描述：,点击新闻标题后，需要跳转到另一页面查看该新闻标题对应的详细内容信息，在页面跳转同时需要传递与该条新闻相关的参数，如文件标题名称或文件编号等。,新闻标题以链接的形式显示后，往往有默认的链接样式，但默认的链接样式可能不是满意的链接样式。因此，需要对标题链接重新设置链接样式。,任务5.2使用查询字符串传递新闻标题参数,关键知识：查询字符串,查询字符串是在URL的结尾附加的信息，它提供了一种维护状态信息的方法，它包含在对特定URL的HTTP请求中，不需要任何的服务器资源。几乎所有的浏览器和客户端设备均支持使用查询字符串传递值。,任务5.2使用查询字符串传递新闻标题参数,关键知识：,使用HttpRequest获取查询字符串参数值,接收查询字符串参数值的页面要读取传递过来的参数，可使用 HttpRequest对象的Params属性读取查询字符串，也可以用QueryString属性读取查询字符串值。,任务5.2使用查询字符串传递新闻标题参数,关键知识：,标题链接样式设计,任务5.2使用查询字符串传递新闻标题参数,任务实施：,设置新闻标题链接并传递参数,将标题转换成链接后的效果图,任务5.3 新闻标题的修改,任务描述：,一般来说，在网页中都会设定相应宽度的位置存放新闻标题信息，为了不影响网页的布局，当标题长度超过了网页设定的宽度时，需要在将标题从数据库读到网页时截掉后面的一部分字符。,在网页中往往还会在新闻标题的后面添加新闻发布日期，在标题的前面添加前缀图片。本任务除了对新闻标题长度进行控制外，还需要在标题处添加日期和前缀图片。,任务5.3 新闻标题的修改,关键知识：,字符串子串的获取,字符串s的子串的截取可通过s.Substring(s1,s2)方式获得,标题日期格式设置,空模板字段,任务5.3 新闻标题的修改,任务实施：截短太长的标题,任务5.3 新闻标题的修改,任务实施：添加标题日期,任务5.3 新闻标题的修改,任务实施：修改日期格式,任务5.3 新闻标题的修改,任务实施：添加标题前缀图片,任务5.4 显示前几条标题及分页显示内容,任务描述：,网页页面由于版面有限，在显示新闻标题时往往只显示最新的几条信息，其他的内容以分页形式或通过更多链接按钮进入相关链接页面获取。本任务包括：,只显示最新n条记录；,以分页形式显示标题信息。,任务5.4 显示前几条标题及分页显示内容,关键知识：,数据库查询获取前几条标题,分,页显示,任务5.4 显示前几条标题及分页显示内容,任务实施：,显示最新几条新闻,分页显示内容,任务5.4 显示前几条标题及分页显示内容,任务实施：设置分页属性,任务5.4 显示前几条标题及分页显示内容,任务实施：,项目6 读取并搜索新闻,科学出版社 主编 ：郭建东,教学目标,知识教学目标,获取查询字符串值,使用SqlConnection类创建和关闭数据库连接,使用SqlCommand执行对数据库的操作,使用SqlDataReader读取数据库查询结果,使用SqlDataAdapter与DataSet读取数据库查询结果,使用模糊查询获得搜索结果,技能培养目标,能够使用数据控件和编辑方式读取并显示数据库的内容,能够编写新闻搜索代码,目 录,任务6.1 获取标题参数,1,任务6.2 使用数据控件读取新闻内容,2,任务6.3 使用ADO.NET编程读取新闻内容,3,任务6.4 网页搜索,4,任务6.1 获取标题参数,任务描述：,一般网站主页显示文章标题链接，点击标题链接后才能进入另一个页面查看文章内容，二个页面的转换需要进行一些参数的传递，本任务讲解如何通过数据源控件方式进行参数接收、如何通过编写代码方式获取不同页面传递的参数。,任务6.1 获取标题参数,关键知识：页面间参数传递,使用数据源控件传递参数,在where子句对话框中设置参数，进行参数传递,任务6.1 获取标题参数,关键知识：页面间参数传递,通过查询字符串传递参数,直接传递查询字符串,任务6.1 获取标题参数,关键知识：页面间参数传递,通过查询字符串传递参数,编码后再传递查询字符串,任务6.1 获取标题参数,任务实施：,使用数据源控件获取查询字符串,Where子句对话框设置如下：,任务6.1 获取标题参数,任务实施：,使用Request获取查询字符串,任务6.2 使用数据控件读取新闻内容,任务描述：,在项目5中，用户可点击文件标题，然后将文件名参数传递到读取内容的页面。在任务6.1中获取了传递过来的fileid参数，本任务通过使用数据控件读取指定fileid标题的新闻内容。,任务6.2 使用数据控件读取新闻内容,关键知识：DataList控件,编辑DataList控件的模板,任务6.2 使用数据控件读取新闻内容,关键知识：数据绑定,任务6.2 使用数据控件读取新闻内容,任务实施：,任务6.3 使用ADO.NET编程读取新闻内容,任务描述：,用户可点击文件标题，将文件名参数传递到读取内容的页面，本任务通过ADO.NET编程方式获取了传递过来的fileid参数，然后再编写代码访问数据库，读取文件内容。,任务6.3 使用ADO.NET编程读取新闻内容,关键知识：,使用SqlConnection创建关闭数据库连接,创建连接,任务6.3 使用ADO.NET编程读取新闻内容,关键知识：,使用SqlConnection创建关闭数据库连接,创建连接,任务6.3 使用ADO.NET编程读取新闻内容,关键知识：,使用SqlConnection创建关闭数据库连接,创建连接,任务6.3 使用ADO.NET编程读取新闻内容,关键知识：,使用SqlConnection创建关闭数据库连接,使用using块,任务6.3 使用ADO.NET编程读取新闻内容,关键知识：,使用SqlConnection创建关闭数据库连接,关闭连接,任务6.3 使用ADO.NET编程读取新闻内容,关键知识：,使用SqlCommand执行对数据库的操作,任务6.3 使用ADO.NET编程读取新闻内容,关键知识：,使用SqlCommand执行对数据库的操作,任务6.3 使用ADO.NET编程读取新闻内容,关键知识：,任务6.3 使用ADO.NET编程读取新闻内容,关键知识：,使用SqlDataReader读取查询结果,任务6.3 使用ADO.NET编程读取新闻内容,关键知识：,关闭SqlDataReader,任务6.3 使用ADO.NET编程读取新闻内容,任务实施：,在如图6-6所示的页面中点击文件标题，可跳转到如图6-7所示的页面查看文件内容。,任务6.4 网页搜索,任务描述：,由于网页页面版面的限制，在网页版面往往只显示最新的新闻，对不在主页面显示的新闻可以通过多种搜索方式进行阅读。用户可以选择按标题、按内容或按发布者进行新闻的搜索，在给定的搜索框中输入要查找的内容后，单击搜索按钮可得到相关结果的文件标题链接。,任务6.4 网页搜索,关键知识：DataSet,DataSet对象是一个非连接数据容器，看上去像是一个内存中的数据库，可以想象成一个虚拟的表，这个表存放在内存中，支持多表、表间关系和数据库约束等。,任务6.4 网页搜索,关键知识：DataSet,用SqlDataAdapter对象执行查询方法时，才将查询的返回数据存储在DataSet对象中。,任务6.4 网页搜索,关键知识：DataAdapter,任务6.4 网页搜索,关键知识：DataAdapter,任务6.4 网页搜索,关键知识：模糊搜索,任务6.4 网页搜索,关键知识：模糊搜索,任务6.4 网页搜索,任务实施：,按标题搜索,任务6.4 网页搜索,任务实施：,按内容搜索,任务6.4 网页搜索,任务实施：,按发布者搜索,项目7 网站的后台管理,科学出版社 主编 ：郭建东,教学目标,知识教学目标,在线编辑器的应用,母版页创建及应用,数据控件模板字段的应用,使用ADO.NET编程插入数据库信息,使用ADO.NET编程更新数据库信息,使用数据控件更新数据库信息,使用数据控件删除数据库信息,将样式应用到数据控件及模板字段中,技能培养目标,能够应用母版页,能够通过ADO.NET编程插入、删除和更新数据库信息,能够使用数据控件插入、删除和更新数据信息,目 录,任务7.1 在线编辑器应用,1,任务7.2 后台管理员主页面设计,2,任务7.3 使用ADO.NET编程插入新闻内容,3,任务7.4 更新修改新闻内容,4,任务7.5 删除新闻内容,5,任务7.1 在线编辑器应用,任务描述：,在线编辑器有可见即可得功能，使得后台管理更加简单方便。本任务介绍如何使用在线编辑器进行数据信息的录入编辑。以CuteEditor for ASP.NET为例，掌握在线编辑器的使用。,任务7.1 在线编辑器应用,关键知识：,在线编辑器,网站的管理员后台管理模块主要包括管理员权限管理、身份校验、用户管理及数据库数据的添加、删除和修改，对静态页面的维护等。新闻发布或大段文字、图片的录入和更新等功能的管理模块，通过在页面中添加在线编辑器，帮助管理员进行数据信息的录入编辑。目前，常用的在线编辑器有CuteEditor、FCKeditor、FreeTextBox等，这些外部编辑器通过简单的配置，可添加到Visual Studio.NET的工具箱中，像普通的服务器控件一样方便使用。,任务7.1 在线编辑器应用,关键知识：,在线编辑器,任务7.1 在线编辑器应用,任务实施：,任务7.2 后台管理员主页面设计,任务描述：,后台管理包括数据库信息的插入、编辑和删除功能，这些功能布局在页面的右侧栏，头部、导航、左侧栏和页脚界面布局都一样，因此先创建母版页，效果如图7-4所示，其他页面基于这个母版页创建。应用母板页，进行管理员主页面设计。,任务7.2 后台管理员主页面设计,关键知识：,ContentPlaceHolder控件,任务7.2 后台管理员主页面设计,任务实施：,创建管理员母版页,任务7.3 使用ADO.NET编程插入新闻内容,任务描述：,往数据库中插入信息，可以通过控件完成，在配置数据源时配置成带插入、删除和更新功能，然后结合数据控件可完成数据库信息的管理操作。另外，还可以通过编程方式实现，用编程方式插入信息，界面布局更加灵活，效率更高。本任务通过ADO.NET编程方式往数据库表files中插入信息。,任务7.3 使用ADO.NET编程插入新闻内容,关键知识：