《使用DataList Web 服务器控件显示并格式化数据》由会员分享，可在线阅读，更多相关《使用DataList Web 服务器控件显示并格式化数据（6页珍藏版）》请在金锄头文库上搜索。
1、演练：使用 DataList Web 服务器控件显示并格式化数据 .NET Framework 4 其他版本 Visual Studio 2008 Visual Studio 2005 网页中的一个常规任务就是显示数据，该任务实际上就是创建数据报表。 在本演练中，您 将使用 DataList1 控件，该控件使您可以为显示在 ASP.NET 网页上的记录创建任意形式 的布局。 通过此演练，您将学会如何执行以下任务： 添加一个 DataList1 控件并使用模板对该 DataList1 控件所显示的数据进行布局。 将 DataList1 控件绑定到数据源。 向 DataList1 控件添加一个子数
2、据控件及一些代码以用主/详细关系显示数据。 系统必备 若要完成本演练，您需要： Microsoft Visual Studio 或 Microsoft Visual Web Developer 速成版。 SQL Server Northwind 数据库的访问权限。 有关下载和安装 SQL Server 示例数据库 Northwind 的信息，请参见位于 Microsoft SQL Server 网站上的“Installing Sample Databases”（安装示例数据库）2。 注意 如果需要有关如何登录到运行 SQL Server 的计算机的信息，请联系服务器管理员。Microsoft
3、数据访问组件 (MDAC) 2.7 版或更高版本。 如果您使用的是 Microsoft Windows XP 或 Windows Server 2003，那么您已经有了 MDAC 2.7。 但是，如果使用的是 Microsoft Windows 2000，您可能需要升级您计算机上已经安装 的 MDAC。 有关更多信息，请参见 MSDN Library3 的“Microsoft Data Access Components (MDAC) Installation”（Microsoft 数据访问组件 (MDAC) 安装） 。 创建网站 本演练使用网站项目。 您可以改用 Web 应用程序项目。 有关
4、这些 Web 项目类型之间 的差异的信息，请参见 Web 应用程序项目与网站项目 4。 创建文件系统网站 打开 Visual Studio。 在“文件”菜单上单击“新建”，然后单击“网站”。 如果您使用的是 Visual Studio 速成版， 则在“文件”菜单上单击“新建网站”。 显示“新建网站”对话框。 在“Visual Studio 已安装的模板”下选择“ASP.NET 网站”。 在“位置”框中选择“文件系统”，然后输入要保存网站网页的文件夹的名称。 例如，键入文件夹名“C:WebSitesFormatDataList”。 在“语言”列表中，单击您想使用的编程语言。 您选择的编程语言将是
5、网站的默认语言，但您可以为每个页分别设置编程语言。 单击“确定”。 Visual Studio 创建该文件夹和一个名为 Default.aspx 的新页。 添加 DataList 控件 在本演练的第一部分中，您将添加一个 DataList1 控件，然后配置它的数据源。 添加并配置 DataList 控件以用网格显示数据 切换到“设计”视图。 在“工具箱”中，从“数据”组中将“DataList”控件拖到页上。 右击“DataList”控件，然后单击“显示智能标记”。 在“DataList 任务”菜单上的“选择数据源”列表中，单击“新建数据源”。 出现“配置数据源”向导。 单击“数据库”。 此选项
6、指定要从支持 SQL 语句的数据库中获取数据。 （此类数据库包括 SQL Server 和 其他与 OLE-DB 兼容的数据库。 ） 在“为数据源指定 ID”框中，将显示默认的数据源控件名称（“SqlDataSource1”） 。 可以保 留此名称。 单击“确定”。 “配置数据源”向导随即会显示一个可在其中创建连接的页。 单击“新建连接”。 如果出现“选择数据源”页，则在“数据源”列表中选择将要使用的数据源类型。 对于此演练， 数据源类型为“Microsoft SQL Server”。 在“数据提供程序”列表中单击“用于 SQL Server 的 .NET Framework 数据提供程序”，
7、然后单击“继续”。 出现“添加连接”页。 在“添加连接”页上的“服务器名”文本框中，键入运行 SQL Server 数据库的计算机的名称。 在登录凭据中，选择可用于访问运行 SQL Server 数据库的计算机的选项（集成安全性或 特定的 ID 和密码） ，并在需要时输入一个用户名和密码。 选择“保存密码”复选框。 单击“选择或输入数据库名称”按钮，然后输入“Northwind”。 单击“测试连接”，并在确定该连接生效后单击“确定”。 随即会显示“配置数据源”向导并在其中显示所填写的连接信息。 单击“下一步”。 该“配置数据源”向导显示一页，从该页中您可以选择将连接字符串存储到配置文件中。 将
8、 连接字符串存储在配置文件中有两个优点： 比将它存储在页面中更安全。 可以在多个页中重复使用同一连接字符串。 确保选中“是，将此连接另存为”复选框，然后单击“下一步”。 可以保留默认连接字符串。 该“配置数据源”向导显示一页，从该页中您可以指定要从数据库中获取的数据。 确保选中了“指定来自表或视图的列”。 在“名称”列表中单击“类别”。 在“列”下，选择“CategoryID”和“CategoryName”复选框。 “配置数据源”向导随即会在该页底部的框中显示正在创建的 SQL 语句。 注意 “配置数据源”向导允许您指定选择条件（WHERE 子句）和其他 SQL 查询选项。在本部分演练中，您将
9、创建一个不带选择或排序选项的简单语句。 单击“下一步”。 单击“测试查询”以确保您获取的是所需数据。 单击“完成”。 “配置数据源”向导随即会关闭，并且您将返回到“SqlDataSource”控件。 如果查看 “SqlDataSource”控件的属性，可以发现“配置数据源”向导已为 ConnectionString 和 SelectQuery 属性创建了相应的属性值。 即使 Visual Studio 中的“属性”显示了完整的连接 字符串，也只在页中保存连接字符串标识符（在本例中，该标识符为 “NorthwindConnectionString”） 。 设置 DataList 控件布局的格式
10、此时，页上已包含了一个 DataList1 控件，该控件为 Categories 表中的信息使用默认布局。DataList1 控件的优点是可以为数据创建任意格式的布局。 在本部分中，您将使用一个模 板并将用文本和控件对该模板进行配置以自定义数据显示。 设置 DataList 控件布局的格式 右击“DataList”控件，单击“编辑模板”，然后单击“项模板”。 “DataList”控件将切换到模板编辑模式并显示下列这些模板的模板框： “ItemTemplate”，该模板包含默认情况下显示在“DataList”控件中的文本和控件。 AlternatingItemTemplate，该模板是一个可选模
11、板，可在其中创建用于其他每条数据记录的 布局。 通常，AlternatingItemTemplate5 属性类似于 ItemTemplate6 属性，但 AlternatingItemTemplate5 属性使用其他背景颜色创建带状效果。 SelectedItemTemplate，该模板为通过使用按钮单击或其他操作显式选择的数据记录定义布 局。 此模板的典型用法是提供数据记录的展开视图或用作主/详细关系的主记录。 必须编 写代码，才能支持将记录置于选定模式中。 （在本演练中不用这么做。 有关更多信息， 请参见如何：允许用户选择 DataList Web 服务器控件中的项 7 和演练：在 Vis
12、ual Studio 中创建主/详细信息网页 8。 ） EditItemTemplate，该模板为数据记录的编辑模式定义布局。 通常，EditItemTemplate9 属 性包含用户可在其中修改数据记录的可编辑控件，如 TextBox10 和 CheckBox11 控件。 必须编写代码，才能将记录置于编辑模式并在完成编辑时保存该记录。 （在本演练中不用 这么做。 有关如何编写用于编辑记录的代码的信息，请参见如何：允许用户编辑 DataList Web 服务器控件中的项 12。 ） 默认情况下，Visual Studio 使用数据源中每个数据列的数据绑定 Label13 控件来填充项模 板。
13、此外，Visual Studio 还为用作标题的每个标签生成静态文本。 拖动右侧尺寸柄以扩宽“DataList”控件，使其占据大部分页宽。 编辑项模板以重新排列 Label13 控件，并创建一个新标题以便该模板内容类似于下面的代 码示例。 Name: CategoryNameLabel (ID: CategoryIDLabel) 单击“CategoryNameLabel”控件。 在“属性”中，展开“字体”节点，然后将“粗体”设置为 true。 在“设计”视图中的“DataList”控件上，右击标题栏，单击“编辑模板”，然后单击“分隔符模板” 。 分隔符模板使您可以指定在各数据记录之间显示哪些文
14、本或哪些其他元素。 从“工具箱”的“HTML”组中，将一个“水平标尺”元素拖到分隔符模板中。 在“DataList”控件上，右击标题栏，然后单击“结束模板编辑”。 测试 DataList 控件 现在可以测试已创建的布局。 测试 DataList 控件 按 Ctrl+F5 运行该页。 该页显示一个类别名称和 ID 的列表，并且每条记录之间用一条线隔开。 在 DataList 控件中显示相关信息 您当前所使用的 DataList1 控件使用前面定义的自定义布局显示各条 Category 记录。 只 是略微更改了默认布局，就可以看到通过使用模板，可以排列文本和控件，设置内容的格 式，并可以用其他方式
15、修改数据记录显示。 布局可以包含当前记录以及相关记录。 在本部分演练中，您将对布局进行更改，以便每一 行显示一个类别及属于该类别的产品。 实际上，就是在 DataList1 控件的每一行中显示一 个主/详细关系。 您将需要编写一小段代码来实现此方案。 在 DataList 控件中显示相关信息 右击“DataList”控件，单击“编辑模板”，然后单击“项模板”。 从“工具箱”的“标准”组中，将一个“BulletedList”控件拖到项模板上，然后将该“BulletedList” 控件放在类别信息下。 “BulletedList”控件可以显示数据，每个项目符号项表示一个数据列。 右击“Bullet
16、edList”控件，然后单击“显示智能标记”。 单击“选择数据源”。 您将创建另一个数据源控件来读取相关记录。 在“选择数据源”对话框的“选择数据源”列表中，单击“新建数据源”。 单击“数据库”。 在“为数据源指定 ID”框中，键入“bulletedListDataSource”。 虽然通常可以保留数据源的默认名称，但在本例中向数据源指定一个特定的可预知名称十 分有用，这样以后可以在代码中引用该名称。 单击“确定”。 出现“配置数据源”向导。 在“应用程序连接数据库应使用哪个数据连接?”列表中，单击在本演练的前面部分创建的连 接的名称，然后单击“下一步”。 “配置数据源”向导随即会显示一个可在其中创建 SQL 语句的页。 在“指定来自表或视图的列”下的“名称”框中，单击“Products”。 在“列”框中，选择“ProductName”框。 “BulletedList”控件将只显示一
