《数据窗体设计》PPT课件.ppt

《《数据窗体设计》PPT课件.ppt》由会员分享，可在线阅读，更多相关《《数据窗体设计》PPT课件.ppt（73页珍藏版）》请在三一办公上搜索。

1、第九章 数据窗体设计,教学目标,数据绑定简介 利用Repeater控件绑定数据数据源控件GridView控件,数据绑定的三种实现方式：,将需要使用数据的控件DataSourceID设定为数据源控件。也可以不使用DataSourceID，而是直接将数据源赋值给数据绑定控件的DataSource属性，然后再调用数据绑定控件的DataBind()方法实现“手工数据绑定”。或者直接在页面中放置绑定表达式，然后在Page_Load中调用页面类的DataBind()方法实现数据绑定。,9.1 数据绑定简介,数据绑定是使页面上的控件属性与数据库中的数据产生对应关系，每当数据源数据发生变化且页面重新打开时，被

2、绑定控件的数据就会自动发生变化。数据绑定语法：当调用控件的DataBind方法时数据绑定的表达式才会被计算并显示。被当做数据源的有：表达式、数组、集合、视图、表等。,9.1 数据绑定简介,数据绑定是使页面上的控件属性与数据库中的数据产生对应关系，每当数据源数据发生变化且页面重新打开时，被绑定控件的数据就会自动发生变化。数据绑定语法：当调用控件的DataBind方法时数据绑定的表达式才会被计算并显示。被当做数据源的有：表达式、数组、集合、视图、表等。,9.1 数据绑定简介,一、单值绑定（)经常会碰到在前台代码中要使用（或绑定）后台代码中变量值的问题。这里所讲的前台即通常的.aspx文件，后台指的

3、是与aspx相关联的文件后缀名为.aspx.cs。直接在Aspx页面中放置绑定表达式，然后在Page_Load中调用页面类的DataBind()方法实现数据绑定。Page.DataBind();,9.1 数据绑定简介,在前台代码的三种位置可能会绑定后台变量：服务器端控件属性或HTML标签属性 JavaScript代码中 开始标签与结束标签之间的内容。如或者”（服务器端控件）。,9.1 数据绑定简介,注意：被绑定的值的定义方式(页面级的全局变量)，只能绑定页面范围的变量。,9.1 数据绑定简介,二、多值绑定 允许将多个值绑定在一个控件上。如：列表框、复选框、单选按钮组等。要设置三个属性：Data

4、Source:绑定的数据源DataTextField：数据源中显示的字段DataValueField：对应的值字段,9.2 数据表多列数据绑定,主要有以下控件：Repeater：自定义显示外观的数据表显示控件。GridView：显示、编辑、分页的数据显示控件。DetailView：以内置表格的形式实现单个记录的显示、编辑、分页操作的控件。FormView：自定义显示外观的形式实现单个记录的显示、编辑、分页操作的控件。DataList：自定义格式的记录显示和编辑控件。,一、Repeater控件 Repeater 控件是自定义显示模板的数据绑定列表，它不具有任何内置布局或样式，因此，我们必须在控件

5、的模板中自己定义所有 HTML 布局标记、格式标记和样式标记。比起GridView、DataList等几个庞大的数据库绑定控件来说，Repeater控件具有“小巧”、“灵活”等特点，并且使用特别灵活，但是这是建立在有一定的CSS+DIV基础上的。,Repeater控件只支持模板。以下的模板可供选择：1、AlternatingItemTemplate:定义隔行显示选项。2、ItemTemplate:指定每行显示选项。3、HeaderTemplate:建立如何显示标题。4、FooterTemplate:建立如何显示页脚。5、SeparatorTemplate:定义分隔符。唯一具有强制性的模板是It

6、emTemplate，所有其它的模板都是具有选择性的。,1、模板简介,如果用表格作为布局依据，则：在模板之间添加如下代码：学号 姓名,在模板之间添加如下代码：其中：DataBinder.Eval(Container.DataItem,“姓名”)表示从绑定的容器中取出姓名列。或者：Eval(“姓名”)也可以。,其中：DataBinder.Eval(Container.DataItem,“姓名”)表示从绑定的容器中取出姓名列。或者：Eval(“姓名”)也可以。Eval方法提供了一个单向的只读的数据值，数据是从“数据源”对象单向传送给模板中的控件，没有办法修改数据源对象中的数据。,在模板之间添加如下

7、代码：可以实现记录间添加下划虚线的效果。,在模板之间添加如下代码：,如果制作如下格式的三维报表也可以使用Repeater控件。,该控件本身没有与分页有关的属性，需要使用PageDataSource类完成分页效果。AllowPaging：获取或设置指示是否启用分页的值。CurrentPageIndex：获取或设置当前页的索引。DataSource：获取或设置数据源。FirstIndexInPage：获取页中的第一个索引。IsFirstPage：获取一个值，该值指示当前页是否是首页。IsLastPage：获取一个值，指示当前页是否是最后一页。PageCount：获取显示数据源中的所有项的总页数。P

8、ageSize：获取或设置要在单页上显示的项数。,2、分页效果的实现,注意：CurrentPageIndex必须大于等于0且小于PageCount PageDataSource 的数据源必须是dt.defaultview,二、DataList控件（可以一行显示多条记录）DataList 控件也是使用模板标记显示数据的控件。而且正是由于它使用模板进行设计，所以它的灵活性比GridView更高，DataList 控件可被绑定到数据库表。DataList 控件比Repeater控件增加了SelectedItemTemplate和EditItemTemplate模板标记，可以支持选取和编辑功能。这个控

9、件也不支持分页，必须使用分页类实现分页。,是当对datalist控件的某个数据行选定时，需要显示数据的模板。实现方法如下：（1）先在模板中添加控件（按钮或链接）：（2）在代码视图中添加如下代码：protected void DataList_ItemCommand(object source,DataListCommandEventArgs e)if(e.CommandName=Select)DataList.SelectedIndex=e.Item.ItemIndex;BindData();（3）为DataList控件添加如下属性：,9.3 数据源控件,SqlDataSource控件，是用来

10、连接数据库类型的数据源控件，可以访问位于某个关系数据库中的数据，数据库可以是Microsoft SQL Server、Oracle数据库、OLE DB和 ODBC。可以将SqlDataSource控件和用于显示数据的其他控件（如GridView等）结合使用，使用很少的代码可以在ASP.NET网页对数据实现增加、修改、删除、选择、分页、排序、缓存以及筛选操作。,9.3 数据源控件,SqlDataSource控件配置数据源时，将ProviderName属性设置为数据库类型；将ConnectionString属性设置为连接字符串，该字符串包含连接至数据库所需的信息。连接字符串的内容根据数据源控件访问

11、的数据库类型的不同而不同。,配置步骤,配置步骤,一、配置连接字符串,配置步骤,二、配置条件表达式,配置步骤,或者：配置控件查询条件表达式,配置步骤,三、允许数据源编辑设置,9.4 GridView控件,一、简介 在中，增加了GridView数据控件，GridView控件通常与数据源控件结合使用，以表格的形式显示数据库中的数据，可以对记录中的行实现增加、修改、删除、选择功能，可以对列实现排序功能，大大的简化了编程。,9.4 GridView控件,9.4 GridView控件,与GridView绑定的数据都具有二维表的性质。若绑定的是DataTable，则每个GridViewRow对象负责显示一个

12、DataRow，而每个TableCell则负责显示此DataRow中特定字段的值。,二、GRIDVIEW控件的数据绑定列,BoundedField：直接与数据对象的某个“列/属性”绑定，以文本形式显示其值。HyperLinkField：根据数据对象某个列（属性）的值生成一个超链接元素（）。ImageField：根据数据对象某个列（属性）的值生成一个元素，显示一张图片,ButtonField：显示一个按钮。CommandField：其实就是拥有特定CommandName的ButtonField，完成通用的“编辑”、“删除”和“选择”功能。Edit Delete Select InsertTemp

13、lateField：模板列，用于自定义GridView的显示界面，非常灵活与有用。,三、GRIDVIEW的重要事件 GridView会引发一系列的事件，常用的事件有：RowCommand：点击每行中的按钮（ButtonField）时引发，可通过CommandName区分开是哪个按钮被点击。RowDataBound：给每行绑定数据时发生，通常用它来设置模板列中特定控件的属性。,RowDeleting：删除一行时发生，可以取消删除。RowUpdating：更新一行数据时发生，可以取消更新。SelectedIndexChanged：选择的行发生改变时发生。PageIndexChanging：点击分页

14、按钮时发生。,四、GRIDVIEW的数据源 可以通过以下手段为GridView控件绑定数据源：通过DataSourceID属性：将SqlDataSource控件的ID值赋给该属性。这种方法可以利用SqlDataSource控件的功能直接实现排序、分页、修改数据的功能。通过DataSource属性：在代码将读取到数据集中的数据应代码绑定在控件中。但是需要为排序、分页、修改数据的功能编写后台代码。,五、GRIDVIEW的排序、分页、编辑功能1、数据源绑定:DataSourceID2、套用格式3、启用分页，设置分页效果4、启用排序：AllowSorting=true5、启用编辑:6、启用删除参见示例

15、一：GridView_1.aspx,六、自定义显示列和列标题 可以让GridView只显示特定的列，并且指定列的标题。基本方法如下：从只能标记中选择“编辑列”命令。在弹出的窗口中取消“自动生成字段”选项。从上部的字段列表中选择合适的字段添加到下部列表中。选择加入的字段，在右部的窗口中选择如下属性：,DataField：设定要显示的数据字段名。HeadText:设置显示标题。DataFormatString:设置数据显示的格式 DataFormatString=0:格式字符串,格式字符 说明C 以货币格式显示数值。D 以十进制格式显示数值。E 以科学记数法（指数）格式显示数值。F 以固定格式显示

16、数值。F2小数2位G 以常规格式显示数值。格式 说明 输出格式 d 精简日期格式 yyyy-MM-dd D 详细日期格式 yyyy年MM月dd日*:将选定字段的Htmlencode属性设置成false才可修改日期格式。,七、分页设置 当绑定到SqlDataSource时，GridView的分页功能是自动实现的，不需要编写一行代码。设置GridView的AllowPaging=True;PageSize=5;设置GridView的PagerSettings和PagerStyle属性自定义分页按钮。,当绑定到数据集时，GridView的分页功能需要编写代码完成。在GridView的PageInde

17、xChanging事件中设置分页函数：dg_PageIndexChanging。在代码中编写函数：protected void dg_PageIndexChanging(object sender,GridViewPageEventArgs e)dg.PageIndex=e.NewPageIndex;dg.DataSource=ViewStatedata;dg.DataBind();,分页时GridView会激发PageIndexChanging事件，对应地，分页完成时会激发PageIndexChanged事件。在GridView中有不少事件是这样配对的。一般来说，在“ing”事件中，其参数e

18、包含了重要的信息，比如分页事件中的e.NewPageIndex属性代表了新页码。,八、鼠标移到GridView某一行时改变该行的背景色方法 在GridView控件中添加如下属性：OnRowDataBound=GridView1_RowDataBound 在后台的GridView1_RowDataBound()方法添加代码；,参见示例二：GridView_2.aspx,九、修改按钮的外观 GridView显示特定的按钮外观，基本方法如下：从只能标记中选择“编辑列”命令。从下部的字段列表中选择“commandfield”。在右部的窗口中选择如下属性：ButtontypeHeadertext、Del

19、eteText,十、对记录的编辑、删除操作 如果是采用代码绑定的方法，则删除、更新需要编写代码，实现步骤如下：首先在GridVIew控件的属性添加如下代码：OnRowDeleting=RowDeleting OnRowEditing=RowEditing OnRowUpdating=RowUpdating OnRowCancelingEdit=RowCancelingEdit 在后台分别编写对应四个函数的代码。,参见示例三：admin/update_dept.aspx,如果删除记录时弹出确认对话框，实现步骤如下：首先在GridVIew控件的属性添加如下代码：OnRowDataBound=“su

20、re_delete”在后台分别编写对应函数的代码:protected void sure_delete(object sender,GridViewRowEventArgs e)if(=DataControlRowType.DataRow)/如果是绑定数据行 if(=DataControlRowState.Normal|=DataControlRowState.Alternate)(6.Controls 0).Attributes.Add(onclick,javascript:return confirm(你确认要删除：+e.Row.Cells1.Text+吗?);,十一、手动绑定数据源记录的

21、编辑、删除操作 如果是手动绑定数据源的话，对应的编辑、删除操作也需要自己撰写代码来完成了。首先要在GridView中声明委托方法。对应的属性：AutoGenerateColumns=False,删除功能只需要1个方法委托。编辑功能需要编写3个委托方法，分别对应3个操作：（1）点击“编辑”按钮的操作。（2）点击“更新”按钮的操作。（3）点击“取消”按钮的操作。,参见示例三：GridView_3.aspx,要求：手工添加绑定的数据列：,CheckBoxField、ImageField、HyperLinkField 和ButtonField 字段类型允许使用数据的交互视图，如果我们需要使用除 Che

22、ckBox、Image、HyperLink 或 Button 之外的其它 Web 控件来显示数据，我们该怎么办？此外，BoundField 只能显示一个数据字段。那么如何在 GridView 的一列中显示两个或更多的数据字段值？,为了适应这些灵活性的需求，GridView 提供了使用模板 呈现的TemplateField。TemplateField 提供了多种模板，可用于针对不同的情况自定义呈现方式。例如，ItemTemplate 默认用于呈现每一行的单元格，而 EditItemTemplate 模板可用于自定义数据编辑界面。,GridView控件的DataKeyNames属性用于指定主键，每

23、一行GridViewRow会生成一个DataKey对象，整个Gridview控件会有一个DataKey对象的集合（用DataKeys属性代表）。GridView1.DataKeyse.RowIndex.Value.ToString()：获取选中行的主键值。,如果某个绑定字段被转换成TemplateField字段后（GridVIEW中使用非文本框控件修改数据时），要用FindControl(id)代替Controls0，原因如下：(1)、Controls0为 类，是UI层次结构中服务器控件的子控件。(2)、FindControl()的功能是在当前命名容器中搜索指定ID的服务器控件。在Templa

24、teField中添加的控件是GridView容器中的控件而非子控件，而DropDownLIst则是属于子控件。但是当DropDownLIst强制转换为TemplateField列后就不再是子控件了。,十二、GridView控件中使用下拉列表和单选按钮 1、先将绑定的字段转变成模板列。选择“编辑列”-在“选定的字段”中选择要修改的列名-单击右下角的“将此字段转化为TemplateField”链接。2、选择“编辑模板”链接。其中ItemTemplate中的Label标签是显示的值；选择EditTemplate项，删除TextBox项，拖入单选按钮组或下拉列表控件,示例参见代码：GridView_3

25、.aspx,3、单击DataBinding链接，设置绑定的字段值。,4、添加数据源（用编辑项或拖入sqldatasource控件）。5、单击“结束模板编辑”链接。,4、添加数据源（用编辑项或拖入sqldatasource控件）。5、单击“结束模板编辑”链接。6、回到代码视图，在GridView1_RowUpdating函数中添加如下代码：string sex=(RadioButtonList)GridView1.Rowse.RowIndex.Cells2.FindControl(RadioButtonList1).SelectedValue.ToString().Trim();string a

26、ge=(TextBox)GridView1.Rowse.RowIndex.Cells3.Controls0).Text.ToString().Trim();/还是文本框的效果的代码。string mz=(DropDownList)GridView1.Rowse.RowIndex.Cells4.FindControl(DropDownList2).SelectedValue.ToString().Trim();,十三、GridView控件中绑定数据的排序 以及复选框的绑定列,示例参见代码：GridView_4.aspx,9.5 DetailView控件,在.net2.0版本推出了DetailVi

27、ew控件，该控件以表格的形式显示一条记录的全部字段，表格以两列的方式显示：1列是字段提示，1列是字段值。该控件支持数据源控件，内嵌了显示、修改、删除、插入记录的功能。和GridView控件不通的是，此控件的列被绑定在标记之间。它也支持7种绑定列类型。,一、DetailsView插入、更新和删除数据,要使用DetailsView插入数据，只需在DetailsView控件中添加AutoGenerateInsertButton属性，编辑和修改也一样。在修改和插入界面中，将非文本控件对应的字段转换成模板，然后编辑模板，在edit和insert模板中删除文本框，拖入数据源控件和其他编辑控件，编辑data

28、binding设置。,9.6 FormView控件,FormView控件在数据显示方式上类似于DetailsView控件，但FormView控件要求用户使用模板+字段绑定的模式示，而没有数据控件字段。DetailsView控件通过内置的表格来显示数据记录，而FormView控件需要用户定义的模板来显示数据记录。,一、编辑FormView控件模板,1、FormView控件连接数据源后，打开“FormView任务”列表，单击“编辑模板”项，进入模板编辑模式。,2、在模板编辑模式下，选择并修改字段名称。另外，在编辑模式的“FormView任务”列表中，在“显示”下拉列表框中可选择不同状态的模板进行编

29、辑，如选择EditItemTeplate项，该项为编辑数据的模板。,3、模板修改完成后，在“FormView任务”列表中单击“结束模板编辑”项，即可结束模板编辑状态。,二、添加绑定控件,(1)在FormView控件处于编辑模式时，选择TextBox控件添加到模板中。(2)在“TextBox任务”列表中单击“编辑DataBindings”项，打开数据绑定对话框，在“可绑定属性”列表中选择Text属性，选择“字段绑定”单选按钮，并在“绑定到”下拉列表中选项数据源中设置的字段。(3)单击“确定”，关闭FormView控件的编辑模式。,二、在FormView控件中添加编辑功能,FormView控件中执行编辑功能命令的按钮，需要向该控件中添加按钮控件，并通过按钮控件的CommandName属性设置将要执行的命令，如Cancel(取消)Delete(删除)Edit(编辑)Insert(插入)New(新建)和Update(更新)。OnClientClick=return confirm(确认要删除此记录吗？),