FormView 控件只能显示数据库中一行的数据，并且提供对数据的分页操作，FormView 控件可以以一种不规则的外观来将数据呈现给用户。FormView 控件同样支持模板，以方便开发人员自定义 FormView 控件的 UI，FormView 控件支持的模板如下所示： ItemTemplate：用于在.

FormView 控件只能显示数据库中一行的数据，并且提供对数据的分页操作，FormView 控件可以以一种不规则的外观来将数据呈现给用户。FormView 控件同样支持模板，以方便开发人员自定义 FormView 控件的 UI，FormView 控件支持的模板如下所示： ItemTemplate：用于在 FormView 种呈现一个特殊的记录。 HeaderTemplate：用于指定一个可选的页眉行。 FooterTemplate：用于指定一个可选的页脚行。 EmptyDataTemplate：当 FormView 的 DataSource 缺少记录的时候，EmptyDataTemplate 将会代替 ItemTemplate 来生成控件的标记语言。 PagerTemplate：如果 FormView 启用了分页的话，这个模板可以用于自定义分页的界面。 EditItemTemplate / InsertItemTemplate：如果 FormView 支持编辑或插入功能，那么这两种模板可以用于自定义相关的界面。

通过编辑 ItmTemplate，能够自定义 HTML 以呈现数据，这种情况很像 Repeater 控件。FormView 控件同样支持自动套用格式，选择【自动套用格式】选项就能够为 FormView 控件选择默认格式，选择后如图 8-42 所示。

当 FormView 控件界面编写完成后，HTML 代码如下所示
<asp:FormView ID="FormView1" runat="server" AllowPaging="True" BackColor="White" BorderColor="#3366CC" BorderStyle="None" BorderWidth="1px" CellPadding="4" DataKeyNames="ID" DataSourceID="SqlDataSource1" GridLines="Both" Width="100%"> <FooterStyle BackColor="#99CCCC" ForeColor="#003399" /> <RowStyle BackColor="White" ForeColor="#003399" /> <EditItemTemplate> ID: <asp:Label ID="IDLabel1" runat="server" Text='<%# Eval("ID") %>' /> TITLE: <asp:TextBox ID="TITLETextBox" runat="server" Text='<%# Bind("TITLE") %>' /> <asp:LinkButton ID="UpdateButton" runat="server" CausesValidation="True" CommandName="Update" Text="更新" /> <asp:LinkButton ID="UpdateCancelButton" runat="server" CausesValidation="False" CommandName="Cancel" Text=" 取消" /> </EditItemTemplate> 上述代码创建了 FormView 控件，并为 FormView 控件自定义了若干模板。刚才只是编写了ItemTemplate 模板，但是 EdititemTemplate 也已经在 HTML 标签中生成。注意：FormView 控件模板中的相应数据字段也是通过数据绑定语法实现的，如<%# Eval("字段名称 ") %>。

FormView控件同样支持对当前数据的更新、删除、选择等操作。当拖放一个按钮控件时，可以选择DataBindings来为按钮控件的属性做相应的配置，如图所示。

当单击FormView中的控件时，会触发Command事件，要使用FormView控件进行更新等操作，必须在相应的模式下更新才行，例如当需要更新操作时，则必须在编辑模式下才能进行更新操作。当执行相应的操作时，例如更新操作，则必须在编辑模式下进行操作，并需要使用ItemUpdated事件来编写相应的更新事件。编写FormView控件中的ItemTemplate和EditItemTemplate，生成的HTML代码如下所示。 <InsertItemTemplate> TITLE: <asp:TextBox ID="TITLETextBox" runat="server" Text='<%# Bind("TITLE") %>' /> <asp:LinkButton ID="InsertButton" runat="server" CausesValidation="True" CommandName="Insert" Text="插入" /> <asp:LinkButton ID="InsertCancelButton" runat="server" CausesValidation="False" CommandName="Cancel" Text="取消" /> </InsertItemTemplate> <ItemTemplate> 新闻编号: <asp:Label ID="IDLabel" runat="server" Text='<%# Eval("ID") %>' /> 新闻标题: <asp:Label ID="TITLELabel" runat="server" Text='<%# Bind("TITLE") %>' /> </ItemTemplate> <PagerStyle BackColor="#99CCCC" ForeColor="#003399" HorizontalAlign="Left" /> <HeaderStyle BackColor="#003399" Font-Bold="True" ForeColor="#CCCCFF" /> <EditRowStyle BackColor="#009999" Font-Bold="True" ForeColor="#CCFF99" /> </asp:FormView> <asp:FormView ID="FormView1" runat="server" AllowPaging="True" BackColor="White" BorderColor="#3366CC" BorderStyle="None" BorderWidth="1px" CellPadding="4" DataKeyNames="ID" DataSourceID="SqlDataSource1" GridLines="Both" Width="100%" onitemcommand="FormView1_ItemCommand" onitemupdated="FormView1_ItemUpdated"> <FooterStyle BackColor="#99CCCC" ForeColor="#003399" /> <RowStyle BackColor="White" ForeColor="#003399" /> <EditItemTemplate> 新闻编号: <asp:Label ID="IDLabel1" runat="server" Text='<%# Eval("ID") %>' /> 新闻标题: <asp:TextBox ID="TITLETextBox" runat="server" Text='<%# Bind("TITLE") %>' /> <asp:LinkButton ID="UpdateButton" runat="server" CausesValidation="True" CommandName="Update" Text="更新" /> <asp:LinkButton ID="UpdateCancelButton" runat="server" CausesValidation="False" CommandName="Cancel" Text="取消" /> </EditItemTemplate>

当单击按钮时，FormView 控件会更改其编辑模式，示例代码如下所示
上述代码编写了 FormView 控件中的 ItemTemplate 和 EditItemTemplate。在页面中，增加了按钮来切换 FormView 控件的编辑模式，按钮控件代码如下所示。 <asp:Button ID="Button2" runat="server" onclick="Button2_Click" Text="Edit" /> 当单击按钮时，FormView 控件会更改其编辑模式，示例代码如下所示 protected void Button2_Click(object sender, EventArgs e) { FormView1.ChangeMode(FormViewMode.Edit); } //更改编辑模式当更改了编辑模式后，FormView 控件允许在当前页面直接更改数据的值，并通过 ItemUpdated 进行更新，示例代码如下所示 protected void FormView1_ItemUpdated(object sender, FormViewUpdatedEventArgs e) { Label1.Text = "相应值被更新"; //提示已被更改 FormView1.ChangeMode(FormViewMode.ReadOnly); //更改编辑模式 }

上述代码允许开发人员能够自定义数据操作，通过对象e的值来获取相应的数据字段的值并进行更新，运行结果如图所示

当单击了其中的更新，则会触发 ItemUpdated 事件，开发人员能够通过编写 ItemUpdated 事件来进行相应的更新操作。值得注意的是，通常情况下数据源控件必须支持更新操作才能够执行更新，在配置数据源时，需要为更新语句进行配置。在配置和生成 SQL 语句中必须选择【高级】选项、勾选【生成 update、insert、delete 语句】复选框才能够让数据源控件支持更新等操作，如图所示。如果数据绑定控件需要使用 Insert 等语句时，则数据源控件需配置高级 SQL 生成选项，开发人员还能够在数据源控件的 HTML 代码中进行相应的 SQL 语句的更改已达到自定义数据源控件的目的。

DetailsView控件与FormView在很多情况下非常类似，DetailsView控件通常情况下也只能够显示一行的数据，同FormView，DetailsView控件支持对数据源控件中的数据进行插入、删除和更新。但是DetailsView 控件与 FormView 控件不同的是，DetailsView控件不支持ItemTemplate模板，这也就是说， DetailsView控件是以一种表格的形式所呈现的。相比之下，DetailsView 控件能够支持 Ajax，因为 FormView 控件完全由模板驱动，但是 FormView 控件对验证控件的支持较好。而 DetailsView 控件可以通过选择是否包括更新，删除等操作，而无需手动的添加相应的事件，比 FormView 控件更加方便，如图所示。

当选择了【启用分页】选项后DetailsView控件就能够自动进行分页。开发人员还可以配置PagerSettings 属性允许自定义DetailsView控件生成分页用户界面的外观，它将呈现向前和向后导航的方向控件，PagerSettings属性的常用模式有： NextPrevious：以前一个，下一个形式显示。 NextPreviousFirstLast：以前一个，下一个，最前一个，最后一个形式显示。 Numeric：以数字形式显示。 NumericFirstLast:：以数字，最前一个，最后一个形式显示。当完成配置 DetailsView 控件后，DetailsView 控件无需通过外部控件来转换 DetailsView 控件的编辑模式，DetailsView 控件自动会显示更新、插入、删除等按钮来更改编辑模式，如图所示。

编辑完成后，DetailsView 控件生成的 HTML 代码如下所示
<asp:DetailsView ID="DetailsView1" runat="server" AllowPaging="True" AutoGenerateRows="False" BackColor="White" BorderColor="#999999" BorderStyle="None" BorderWidth="1px" CellPadding="3" DataKeyNames="ID" DataSourceID="SqlDataSource1" GridLines="Vertical" Height="50px" Width="100%"> <FooterStyle BackColor="#CCCCCC" ForeColor="Black" /> <RowStyle BackColor="#EEEEEE" ForeColor="Black" /> <PagerStyle BackColor="#999999" ForeColor="Black" HorizontalAlign="Center" /> <Fields> <asp:BoundField DataField="ID" HeaderText="ID" InsertVisible="False" ReadOnly="True" SortExpression="ID" /> <asp:BoundField DataField="TITLE" HeaderText="TITLE" SortExpression="TITLE" /> <asp:CommandField ShowDeleteButton="True" ShowEditButton="True" ShowInsertButton="True" /> </Fields> <HeaderStyle BackColor="#000084" Font-Bold="True" ForeColor="White" /> <EditRowStyle BackColor="#008A8C" Font-Bold="True" ForeColor="White" /> <AlternatingRowStyle BackColor="#DCDCDC" /> </asp:DetailsView>

如上一节内容所讲，在数据源控件的配置中配置 SQL 语句，需要选择高级，勾选【生成 update、insert、 delete 语句】复选框以支持自动生成更新、删除等语句的生成。当勾选了【生成 update、insert、delete 语句】复选框后，数据源控件代码如下所示。 <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:mytableConnectionString %>" DeleteCommand="DELETE FROM [mynews] WHERE [ID] InsertCommand="INSERT INTO [mynews] ([TITLE]) VALUES SelectCommand="SELECT * FROM [mynews]" UpdateCommand="UPDATE [mynews] SET [TITLE] WHERE [ID] <DeleteParameters> <asp:Parameter Name="ID" Type="Int32" /> </DeleteParameters> <UpdateParameters> <asp:Parameter Name="TITLE" Type="String" /> </UpdateParameters> <InsertParameters> </InsertParameters> </asp:SqlDataSource>

从上述代码可以看出，数据源控件自动生成了相应的 SQL 语句，如图所示。当执行更新、删除等操作时，则会默认执行该语句。运行结果如图所示。

ListView控件是ASP.NET 3.5中新增的数据绑定控件，ListView控件是介于GridView 控件和Repeater之间的另一种数据绑定控件，相对于GridView来说，它有着更为丰富的布局手段，开发人员可以在ListView控件的模板内写任何HTML标记或者控件。相比于GridView和Repeater控件而言， ListView支持的模板如下所示： AlternatingItemTemplate：交替项目模板，用不同的标记显示交替的项目，便于查看者区别连续不断的项目。 EditItemTemplate：编辑项目模板，控制编辑时的项目显示。 EmptyDataTemplate：空数据模板，控制 ListView 数据源返回空数据时的显示。 EmptyItemTemplate：空项目模板，控制空项目的显示。 GroupSeparatorTemplate：组分隔模板，控制项目组内容的显示。 GroupTemplate：组模板，为内容指定一个容器对象，如一个表行、div 或 span 组件。 InsertItemTemplate：插入项目模板，用户插入项目时为其指定内容。 ItemSeparatorTemplate：项目分隔模板，控制项目之间内容的显示。 ItemTemplate 项目模板：控制项目内容的显示。 LayoutTemplate：布局模板，指定定义容器对象的根组件，如一个table、div或span组件，它们包装ItemTemplate 或 GroupTemplate 定义的内容。 SelectedItemTemplate：已选择项目模板，指定当前选中的项目内容的显示。

注意：当需要执行相应的数据操作时，数据源控件的高级选项都应该勾选。
其中最为常用的控件包括LayoutTemplate和ItemTemplate，LayoutTemplate为ListView控件指定了总的标记，而ItemTemplate指定的标记用于显示每个绑定的记录，用来编写HTML样式。ListView控件能够自动套用HTML格式，如其他控件一样，可以选择默认模板，单击【配置ListView】连接进行格式套用，如图所示。开发人员能够选择相应的布局并选择相应的样式来确定 ListView 控件的界面，开发人员还可以通过选择【启用编辑】、【启用插入】等选项简化开发。注意：当需要执行相应的数据操作时，数据源控件的高级选项都应该勾选。

当选择相应的布局方案和样式后，系统生成的 ListView 控件的 HTML 代码如下所示
<asp:ListView ID="ListView1" runat="server" DataKeyNames="ID" DataSourceID="SqlDataSource1" InsertItemPosition="LastItem"><AlternatingItemTemplate> <li style="background-color: #FFF8DC;">ID: <asp:Label ID="IDLabel" runat="server" Text='<%# Eval("ID") %>' /> TITLE: <asp:Label ID="TITLELabel" runat="server" Text='<%# Eval("TITLE") %>' /> <asp:Button ID="EditButton" runat="server" CommandName="Edit" Text="编辑" /> <asp:Button ID="DeleteButton" runat="server" CommandName="Delete" Text="删除" /> </li></AlternatingItemTemplate><LayoutTemplate> <ul ID="itemPlaceholderContainer" runat="server" style="font-family: Verdana, Arial, Helvetica, sans-serif;"> <li ID="itemPlaceholder" runat="server" /> </ul> <div style="text-align: center;background-color: #CCCCCC;font-family: Verdana, Arial, Helvetica, sans-serif;color: #000000;"> <asp:DataPager ID="DataPager1" runat="server"> <Fields> <asp:NextPreviousPagerField ButtonType="Button" ShowFirstPageButton="True" ShowLastPageButton="True" /> </Fields> </asp:DataPager></div></LayoutTemplate> <InsertItemTemplate> <li style="">TITLE: <asp:TextBox ID="TITLETextBox" runat="server" Text='<%# Bind("TITLE") %>' /> <asp:Button ID="InsertButton" runat="server" CommandName="Insert" Text="插入" /> <asp:Button ID="CancelButton" runat="server" CommandName="Cancel" Text="清除" /> </li> </InsertItemTemplate> <SelectedItemTemplate> <li style="background-color: #008A8C;font-weight: bold;color: #FFFFFF;">ID: <asp:Label ID="IDLabel" runat="server" Text='<%# Eval("ID") %>' /> TITLE: <asp:Label ID="TITLELabel" runat="server" Text='<%# Eval("TITLE") %>' /> <asp:Button ID="EditButton" runat="server" CommandName="Edit" Text="编辑" /> <asp:Button ID="DeleteButton" runat="server" CommandName="Delete" Text="删除" /> </SelectedItemTemplate> <EmptyDataTemplate> 未返回数据。 </EmptyDataTemplate> <EditItemTemplate> <li style="background-color: #008A8C;color: #FFFFFF;">ID: <asp:Label ID="IDLabel1" runat="server" Text='<%# Eval("ID") %>' /> <asp:Button ID="UpdateButton" runat="server" CommandName="Update" Text="更新" /> <asp:Button ID="CancelButton" runat="server" CommandName="Cancel" Text="取消" /> </EditItemTemplate> <ItemTemplate> <li style="background-color: #DCDCDC;color: #000000;">ID: <asp:Label ID="IDLabel" runat="server" Text='<%# Eval("ID") %>' /> TITLE: <asp:Label ID="TITLELabel" runat="server" Text='<%# Eval("TITLE") %>' /> <asp:Button ID="EditButton" runat="server" CommandName="Edit" Text="编辑" /> <asp:Button ID="DeleteButton" runat="server" CommandName="Delete" Text="删除" /> </li> </ItemTemplate> <ItemSeparatorTemplate> </ItemSeparatorTemplate> </asp:ListView>

上述代码定义了 ListView 控件，系统默认创建了相应的模板，开发人员能够编辑相应的模板样式来为不同的编辑模式显示不同的用户界面。同时，用户可以无需代码实现就能够实现删除，更新以及添加等操作，运行结果如图 8-53 所示。 LayoutTemplate 和 ItemTemplate 是标识定义控件的主要布局的根模板。通常情况下，它包含一个占位符对象，例如表行 tr 或 div 元素。此元素将由 ItemTemplate 模板或 GroupTemplate 模板中定义的内容替换。

如果需要定义自定义用户界面，则必须使用LayoutTemplate模板可以作为ListView控件的父容器。LayoutTemplate模板是ListView控件所必需的。相同的是，LayoutTemplate内容也需要包含一个占位符控件。占位符控件必须将包含runat=“server”属性，并且将ID属性设置为ItemPlaceholderID或 GroupPlaceholderID属性的值，示例代码如下所示。 <ItemTemplate> <td runat="server" style="background-color:#DCDCDC;color: #000000;"> ID: <asp:Label ID="IDLabel" runat="server" Text='<%# Eval("ID") %>' /> TITLE: <asp:Label ID="TITLELabel" runat="server" Text='<%# Eval("TITLE") %>' /> <asp:Button ID="DeleteButton" runat="server" CommandName="Delete" Text="删除" /> <asp:Button ID="EditButton" runat="server" CommandName="Edit" Text="编辑" /> </td> </ItemTemplate> ListView 控件的事件和 FormView 控件的事件基本相同，同样可以为 ListView 控件执行更新、删除或添加等事件编写相应的代码。当执行更新前、更新时都可以触发相应的事件，示例代码如下所示。 protected void ListView1_ItemUpdated(object sender, ListViewUpdatedEventArgs e) { Label1.Text = "更新已经发生"; //触发更新事件 }

当运行后，则会触发 ItemUpdated 事件，运行结果如图所示
ListView 控件不仅能够支持 FormView 控件的事件，而 ListView 控件具有更多的布局手段。ListView 控件能为开发人员在开发中提供极大的遍历，当如果需要进行相应的数据操作，又需要快捷的显式数据和添加数据时，ListView 控件是极佳的选择。

DataPager控件通过实现IPageableItemContainer接口实现了控件的分页。在 ASP. NET 3
DataPager控件通过实现IPageableItemContainer接口实现了控件的分页。在 ASP.NET 3.5中，ListView 控件适合可以使用DataPager控件进行分页操作。要在ListView中使用DataPager控件只需要在LayoutTemplate模板中加入DataPager控件。DataPager控件包括两种样式，一种是“上一页/下一页”样式，第二种是“数字”样式，如图所示。

当使用“上一页/下一页”样式时，DataPager 控件的 HTML 实现代码如下所示
<asp:DataPager ID="DataPager1" runat="server"> <Fields> <asp:NextPreviousPagerField ButtonType="Button" ShowFirstPageButton="True" ShowLastPageButton="True" /> </Fields> </asp:DataPager> 当使用“数字”样式时，DataPager 控件的 HTML 实现代码如下所示 <asp:DataPager ID="DataPager1" runat="server"> <Fields> <asp:NextPreviousPagerField ButtonType="Button" ShowFirstPageButton="True" ShowNextPageButton="False" ShowPreviousPageButton="False" /> <asp:NumericPagerField /> <asp:NextPreviousPagerField ButtonType="Button" ShowLastPageButton="True" ShowNextPageButton="False" ShowPreviousPageButton="False" /> </Fields> </asp:DataPager>

Similar presentations

Similar presentations

About project

反馈

请登录

Auth with social network:

Similar presentations

Similar presentations

About project

反馈