Отображение данных с помощью элемента управления ObjectDataSource (VB)

Статья
07/13/2023

В этом руководстве рассматривается элемент управления ObjectDataSource. С помощью этого элемента управления можно привязать данные, полученные из BLL, созданного в предыдущем руководстве, без написания строки кода.

Введение

После завершения архитектуры приложения и макета страницы веб-сайта мы готовы приступить к изучению того, как выполнять различные распространенные задачи, связанные с данными и отчетами. В предыдущих руководствах мы узнали, как программно привязать данные из DAL и BLL к веб-элементу управления данными на странице ASP.NET. Этот синтаксис, назначающий свойство веб-элемента управления DataSource данными отображаемым данным, а затем вызывая метод элемента управления DataBind() , был шаблоном, используемым в приложениях ASP.NET версии 1.x, и может по-прежнему использоваться в приложениях версии 2.0. Однако новые элементы управления источником данных ASP.NET 2.0 предлагают декларативный способ работы с данными. С помощью этих элементов управления можно привязать данные, полученные из BLL, созданного в предыдущем руководстве, без написания строки кода.

ASP.NET 2.0 поставляется с пятью встроенными элементами управления источником данных SqlDataSource, AccessDataSource, ObjectDataSource, XmlDataSource и SiteMapDataSource , хотя при необходимости можно создать собственные пользовательские элементы управления источником данных. Так как мы разработали архитектуру для нашего учебного приложения, мы будем использовать ObjectDataSource для классов BLL.

ASP.NET 2.0 включает пять Built-In элементов управления источником данных

Рис. 1. ASP.NET 2.0 включает пять элементов управления источником данных Built-In

ObjectDataSource служит прокси-сервером для работы с каким-то другим объектом. Чтобы настроить ObjectDataSource, укажите этот базовый объект и способ сопоставления его методов с методами Select, Insert, Updateи Delete ObjectDataSource. После указания этого базового объекта и сопоставления его методов с objectDataSource можно привязать ObjectDataSource к веб-элементу управления данных. ASP.NET поставляется со многими веб-элементами управления данными, включая GridView, DetailsView, RadioButtonList и DropDownList. В течение жизненного цикла страницы веб-элементу управления данным может потребоваться доступ к данным, к которым он привязан, что будет выполняться путем вызова метода ObjectDataSource Select . Если веб-элемент управления данными поддерживает вставку, обновление или удаление, могут выполняться вызовы методов ObjectDataSource Insert, Updateили Delete . Затем эти вызовы направляются objectDataSource в соответствующие методы базового объекта, как показано на следующей схеме.

Рис. 2. ОбъектDataSource служит в качестве прокси-сервера (щелкните для просмотра полноразмерного изображения)

Хотя ObjectDataSource можно использовать для вызова методов для вставки, обновления или удаления данных, давайте просто сосредоточимся на возврате данных. В будущих руководствах будет рассмотрено использование ObjectDataSource и веб-элементов управления данными, которые изменяют данные.

Шаг 1. Добавление и настройка элемента управления ObjectDataSource

Начните с открытия SimpleDisplay.aspx страницы в папке BasicReporting , переключитесь в режим конструктора, а затем перетащите элемент управления ObjectDataSource с панели элементов в область конструктора страницы. Объект ObjectDataSource отображается в виде серого прямоугольника в области конструктора, так как он не создает разметку; он просто обращается к данным, вызывая метод из указанного объекта. Данные, возвращаемые ObjectDataSource, могут отображаться веб-элементом управления данными, например GridView, DetailsView, FormView и т. д.

Примечание

Кроме того, можно сначала добавить веб-элемент управления данных на страницу, а затем в его смарт-теге выбрать <параметр Новый источник> данных в раскрывающемся списке.

Чтобы указать базовый объект ObjectDataSource и способ сопоставления методов этого объекта с objectDataSource, щелкните ссылку Настроить источник данных из смарт-тега ObjectDataSource.

Рис. 3. Щелкните Source Link "Настройка данных" в смарт-теге (щелкните для просмотра полноразмерного изображения)

Откроется мастер настройки источника данных. Сначала необходимо указать объект, с которым будет работать ObjectDataSource. Если установлен флажок "Показывать только компоненты данных", в раскрывающемся списке на этом экране перечислены только те объекты, которые были украшены атрибутом DataObject . В настоящее время в наш список входят TableAdapters в типизированном наборе данных и классы BLL, созданные в предыдущем руководстве. Если вы забыли добавить атрибут в DataObject классы уровня бизнес-логики, вы не увидите их в этом списке. В этом случае снимите флажок "Показывать только компоненты данных", чтобы просмотреть все объекты, которые должны включать классы BLL (наряду с другими классами в typed DataSet, DataTables, DataRows и т. д.).

На первом экране выберите ProductsBLL класс из раскрывающегося списка и нажмите кнопку Далее.

Рис. 4. Указание объекта для использования с элементом управления ObjectDataSource (щелкните для просмотра полноразмерного изображения)

На следующем экране мастера предлагается выбрать метод, который должен вызывать ObjectDataSource. В раскрывающемся списке перечислены методы, возвращающие данные в объекте, выбранном на предыдущем экране. Здесь мы видим GetProductByProductID, GetProducts, GetProductsByCategoryIDи GetProductsBySupplierID. GetProducts Выберите метод из раскрывающегося списка и нажмите кнопку Готово (если вы добавили DataObjectMethodAttributeProductBLLв методы , как показано в предыдущем руководстве, этот параметр будет выбран по умолчанию).

Рис. 5. Выбор метода для возврата данных на вкладке SELECT (щелкните для просмотра полноразмерного изображения)

Настройка ObjectDataSource вручную

Мастер настройки источника данных ObjectDataSource позволяет быстро указать объект, который он использует, и связать вызываемые методы объекта. Однако объект ObjectDataSource можно настроить с помощью его свойств либо с помощью окно свойств, либо непосредственно в декларативной разметке. Просто задайте TypeName для свойства тип используемого базового объекта, а для SelectMethod — для метода, вызываемого при извлечении данных.

<asp:ObjectDataSource ID="ObjectDataSource1" runat="server"
    SelectMethod="GetProducts" TypeName="ProductsBLL">
</asp:ObjectDataSource>

Даже если вы предпочитаете мастер настройки источника данных, может потребоваться вручную настроить ObjectDataSource, так как мастер перечисляет только классы, созданные разработчиком. Если вы хотите привязать ObjectDataSource к классу в платформа .NET Framework, например к классу Membership, для доступа к сведениям об учетной записи пользователя или к классу Directory для работы с данными файловой системы, необходимо вручную задать свойства ObjectDataSource.

Шаг 2. Добавление веб-элемента управления данных и его привязка к ObjectDataSource

После добавления ObjectDataSource на страницу и настройки мы готовы добавить веб-элементы управления данными на страницу для отображения данных, возвращаемых методом ObjectDataSource Select . Любой веб-элемент управления данными можно привязать к ObjectDataSource; Рассмотрим отображение данных ObjectDataSource в GridView, DetailsView и FormView.

Привязка GridView к ObjectDataSource

Добавьте элемент управления GridView из панели элементов SimpleDisplay.aspxв область конструктора. В смарт-теге GridView выберите элемент управления ObjectDataSource, добавленный на шаге 1. Это автоматически создаст BoundField в GridView для каждого свойства, возвращаемого данными из метода ObjectDataSource Select (а именно, свойств, определенных Таблицей данных Products).

Рис. 6. Элемент GridView был добавлен на страницу и привязан к ObjectDataSource (щелкните для просмотра полноразмерного изображения)

Затем можно настроить, переупорядочить или удалить BoundFields GridView, щелкнув параметр Изменить столбцы в смарт-теге.

Рис. 7. Управление boundFields GridView с помощью диалогового окна "Изменение столбцов" (щелкните для просмотра полноразмерного изображения)

На минутку измените BoundFields GridView, удалив ProductID, SupplierID, , CategoryIDQuantityPerUnit, UnitsInStock, UnitsOnOrderи ReorderLevel BoundFields. Просто выберите BoundField в списке в левом нижнем углу и нажмите кнопку удаления (красный X), чтобы удалить их. Затем переупорядочите BoundFields так, чтобы CategoryName и SupplierName BoundFields предшествовали UnitPrice BoundField, выбрав эти BoundFields и щелкнув стрелку вверх. HeaderText Задайте для свойств оставшихся BoundFields Productsзначение , Category, Supplierи Priceсоответственно. Затем отформатируйте Price BoundField как валюту, задав для свойства BoundField HtmlEncode значение False, а для свойства DataFormatString — значение {0:c}. Наконец, горизонтально выровняйте Price по правому краю и Discontinued флажок по центру с помощью ItemStyle/HorizontalAlign свойства .

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
    DataKeyNames="ProductID" DataSourceID="ObjectDataSource1"
    EnableViewState="False">
    <Columns>
        <asp:BoundField DataField="ProductName"
          HeaderText="Product" SortExpression="ProductName" />
        <asp:BoundField DataField="CategoryName"
          HeaderText="Category" ReadOnly="True"
          SortExpression="CategoryName" />
        <asp:BoundField DataField="SupplierName"
          HeaderText="Supplier" ReadOnly="True"
          SortExpression="SupplierName" />
        <asp:BoundField DataField="UnitPrice"
          DataFormatString="{0:c}" HeaderText="Price"
            HtmlEncode="False" SortExpression="UnitPrice">
            <ItemStyle HorizontalAlign="Right" />
        </asp:BoundField>
        <asp:CheckBoxField DataField="Discontinued"
          HeaderText="Discontinued" SortExpression="Discontinued">
            <ItemStyle HorizontalAlign="Center" />
        </asp:CheckBoxField>
    </Columns>
</asp:GridView>

Рис. 8. BoundFields GridView были настроены (щелкните, чтобы просмотреть полноразмерное изображение)

Использование тем для согласованного оформления

В этих руководствах по возможности будут удалены все параметры стиля на уровне элемента управления, а не каскадные таблицы стилей, определенные во внешнем файле. Файл Styles.css содержит классы DataWebControlStyle, HeaderStyle, RowStyleи AlternatingRowStyle CSS, которые должны использоваться для определения внешнего вида веб-элементов управления данными, используемых в этих руководствах. Для этого можно задать для свойства DataWebControlStyleGridView CssClass значение , а свойства HeaderStyleсвойств , RowStyleи AlternatingRowStyleCssClass соответственно.

Если мы задаем эти CssClass свойства в веб-элементе управления, необходимо явно задать значения этих свойств для каждого веб-элемента управления данными, добавленного в наши учебники. Более управляемый подход заключается в определении свойств css по умолчанию для элементов управления GridView, DetailsView и FormView с помощью темы. Тема — это коллекция параметров свойств уровня элемента управления, изображений и классов CSS, которые можно применять к страницам на сайте, чтобы обеспечить общий внешний вид.

Наша тема не будет включать изображения или CSS-файлы (мы оставим таблицу Styles.css стилей "как есть", определенную в корневой папке веб-приложения), но будет включать два обложки. Обложка — это файл, определяющий свойства веб-элемента управления по умолчанию. В частности, у нас будет файл обложки для элементов управления GridView и DetailsView, указывающий свойства по умолчанию CssClass.

Начните с добавления нового файла обложки в проект с именем GridView.skin , щелкнув правой кнопкой мыши имя проекта в Обозреватель решений и выбрав команду Добавить новый элемент.

Рис. 9. Добавление файла обложки с именем GridView.skin (щелкните для просмотра полноразмерного изображения)

Файлы скинов необходимо поместить в тему, которая находится в папке App_Themes . Так как у нас еще нет такой папки, Visual Studio предложит создать ее для нас при добавлении нашего первого обложки. Нажмите кнопку Да, чтобы создать папку App_Theme и поместить в нее новый GridView.skin файл.

Рис. 10. Разрешить Visual Studio создать папку App_Theme (щелкните, чтобы просмотреть полноразмерное изображение)

При этом в папке App_Themes с именем GridView будет создана новая тема с файлом GridView.skinобложки .

Тема GridView добавлена в папку App_Theme

Рис. 11. Тема GridView добавлена в папку App_Theme

Переименуйте тему GridView в DataWebControls (щелкните правой кнопкой мыши папку GridView в папке App_Theme и выберите команду Переименовать). Затем введите в файл следующую разметку GridView.skin :

<asp:GridView runat="server" CssClass="DataWebControlStyle">
   <AlternatingRowStyle CssClass="AlternatingRowStyle" />
   <RowStyle CssClass="RowStyle" />
   <HeaderStyle CssClass="HeaderStyle" />
</asp:GridView>

Определяет свойства по умолчанию для свойств, связанных с элементом CssClassGridView, на любой странице, которая использует тему DataWebControls. Давайте добавим еще один скин для DetailsView, веб-элемента управления данными, который мы будем использовать в ближайшее время. Добавьте новый скин в тему DataWebControls с именем DetailsView.skin и добавьте следующую разметку:

<asp:DetailsView runat="server" CssClass="DataWebControlStyle">
   <AlternatingRowStyle CssClass="AlternatingRowStyle" />
   <RowStyle CssClass="RowStyle" />
   <FieldHeaderStyle CssClass="HeaderStyle" />
</asp:DetailsView>

После определения темы последний шаг — применить тему к странице ASP.NET. Тема может применяться постранично или для всех страниц веб-сайта. Давайте используем эту тему для всех страниц веб-сайта. Для этого добавьте в раздел следующую разметкуWeb.config<system.web>:

<pages styleSheetTheme="DataWebControls" />

Вот и все! Параметр styleSheetTheme указывает, что свойства, указанные в теме , не должны переопределять свойства, указанные на уровне элемента управления. Чтобы указать, что параметры темы должны превосходить параметры управления, используйте theme атрибут вместо styleSheetTheme; к сожалению, параметры темы не отображаются в представлении конструктора Visual Studio. Дополнительные сведения о темах и обложках см. в статье ASP.NET Темы и скины Обзор и Стили на стороне сервера Использование тем . Дополнительные сведения о настройке страницы для использования темы см. в разделе Практическое руководство. Применение тем ASP.NET.

Рис. 12. GridView отображает название продукта, категорию, поставщик, цену и информацию о прекращении (щелкните, чтобы просмотреть полноразмерное изображение)

Отображение одной записи за раз в Представлении сведений

GridView отображает по одной строке для каждой записи, возвращаемой элементом управления источником данных, к которому он привязан. Однако бывают случаи, когда мы можем захотеть отображать единственную запись или только одну запись за раз. Элемент управления DetailsView предоставляет эту функцию, отрисовывая в виде HTML <table> с двумя столбцами и одной строкой для каждого столбца или свойства, привязанного к элементу управления. DetailsView можно представить как GridView с одной записью, повернутой на 90 градусов.

Начните с добавления элемента управления DetailsView над GridView в SimpleDisplay.aspx. Затем привяжите его к тому же элементу управления ObjectDataSource, что и GridView. Как и в случае с GridView, BoundField будет добавлен в DetailsView для каждого свойства объекта, возвращаемого методом ObjectDataSource Select . Единственное отличие заключается в том, что Поля BoundField DetailsView расположены по горизонтали, а не по вертикали.

Рис. 13. Добавление Элемента DetailsView на страницу и его привязка к ObjectDataSource (щелкните для просмотра полноразмерного изображения)

Как и GridView, поля BoundFields DetailsView можно настроить, чтобы обеспечить более настраиваемое отображение данных, возвращаемых ObjectDataSource. На рисунке 14 показан Элемент DetailsView после настройки его BoundFields и CssClass свойств, чтобы его внешний вид был похож на пример GridView.

Рис. 14. DetailsView показывает одну запись (щелкните для просмотра полноразмерного изображения)

Обратите внимание, что DetailsView отображает только первую запись, возвращенную источником данных. Чтобы пользователь мог выполнять пошаговое выполнение всех записей по одному, необходимо включить разбиение по страницам для DetailsView. Для этого вернитесь в Visual Studio и проверка флажок Включить разбиение по страницам в смарт-теге DetailsView.

Рис. 15. Включение разбиения по страницам в элементе управления DetailsView (щелкните для просмотра полноразмерного изображения)

Рис. 16. При включенной разбиении по страницам представление DetailsView позволяет пользователю просматривать любой из продуктов (щелкните для просмотра полноразмерного изображения)

Мы подробнее поговорим о разбиении по страницам в будущих руководствах.

Более гибкий макет для отображения одной записи за раз

DetailsView довольно жестко отображает каждую запись, возвращаемую из ObjectDataSource. Может потребоваться более гибкое представление данных. Например, вместо того, чтобы отображать название продукта, категорию, поставщик, цену и информацию о прекращении поддержки в отдельной строке, мы можем показать название продукта и цену в <h4> заголовке, а сведения о категории и поставщике отображаются под названием и ценой в меньшем размере шрифта. Кроме того, мы можем не отображать имена свойств (Product, Category и т. д.) рядом со значениями.

Элемент управления FormView обеспечивает такой уровень настройки. Вместо того чтобы использовать поля (например, GridView и DetailsView), FormView использует шаблоны, которые позволяют сочетать веб-элементы управления, статический HTML и синтаксис привязки данных. Если вы знакомы с элементом управления Repeater из ASP.NET 1.x, вы можете представить FormView как repeater для отображения одной записи.

Добавьте элемент управления FormView в SimpleDisplay.aspx область конструктора страницы. Изначально FormView отображается в виде серого блока, информирующего нас о том, что нам нужно предоставить, по крайней мере, элемент управления ItemTemplate.

Рис. 17. FormView должен включать ItemTemplate (щелкните для просмотра полноразмерного изображения)

Вы можете привязать FormView непосредственно к элементу управления источником данных с помощью смарт-тега FormView, который автоматически создаст объект по умолчанию ItemTemplate (вместе с EditItemTemplate и InsertItemTemplate, если заданы свойства и UpdateMethod элемента управления InsertMethod ObjectDataSource). Однако в этом примере давайте привяжем данные к FormView и укажем их ItemTemplate вручную. Для начала задав свойству FormView DataSourceID значение элемента управления ObjectDataSource , ObjectDataSource1.ID Затем создайте ItemTemplate , чтобы в элементе отображались название и цена <h4> продукта, а под ним — названия категории и грузоотправителя с меньшим размером шрифта.

<asp:FormView ID="FormView1" runat="server"
    DataSourceID="ObjectDataSource1" EnableViewState="False">
    <ItemTemplate>
        <h4><%# Eval("ProductName") %>
          (<%# Eval("UnitPrice", "{0:c}") %>)</h4>
        Category: <%# Eval("CategoryName") %>;
        Supplier: <%# Eval("SupplierName") %>
    </ItemTemplate>
</asp:FormView>

Рис. 18. Первый продукт (Chai) отображается в пользовательском формате (щелкните для просмотра полноразмерного изображения)

— <%# Eval(propertyName) %> это синтаксис привязки данных. Метод Eval возвращает значение указанного свойства для текущего объекта, привязанного к элементу управления FormView. Дополнительные сведения о входе и выходе привязки данных см. в статье Алекса Гомера упрощенный и расширенный синтаксис привязки данных в ASP.NET 2.0.

Как и DetailsView, FormView отображает только первую запись, возвращенную из ObjectDataSource. Вы можете включить разбиение по страницам в FormView, чтобы позволить посетителям пошагово просматривать продукты по одному.

Сводка

Доступ к данным и их отображение из уровня бизнес-логики можно выполнить без написания строки кода благодаря элементу управления ObjectDataSource ASP.NET 2.0. Объект ObjectDataSource вызывает указанный метод класса и возвращает результаты. Эти результаты могут отображаться в веб-элементе управления данными, привязанном к ObjectDataSource. В этом руководстве мы рассмотрели привязку элементов управления GridView, DetailsView и FormView к ObjectDataSource.

До сих пор мы только видели, как использовать ObjectDataSource для вызова метода без параметров, но что делать, если мы хотим вызвать метод, который ожидает входные параметры, такие как ProductBLL класс GetProductsByCategoryID(categoryID)? Чтобы вызвать метод, который ожидает один или несколько параметров, необходимо настроить ObjectDataSource для указания значений этих параметров. Мы посмотрим, как это сделать в следующем руководстве.

Счастливого программирования!

Дополнительные материалы

Дополнительные сведения о темах, рассмотренных в этом руководстве, см. в следующих ресурсах:

Об авторе

Скотт Митчелл( Scott Mitchell), автор семи книг ASP/ASP.NET и основатель 4GuysFromRolla.com, работает с веб-технологиями Майкрософт с 1998 года. Скотт работает независимым консультантом, тренером и писателем. Его последняя книга Sams Teach Yourself ASP.NET 2.0 в 24 часах. Он может быть доступен в mitchell@4GuysFromRolla.com. или через его блог, который можно найти по адресу http://ScottOnWriting.NET.

Особая благодарность

Эта серия учебников была рассмотрена многими полезными рецензентами. Ведущим рецензентом этого руководства был Хилтон Гизеноу. Хотите просмотреть предстоящие статьи MSDN? Если да, опустите мне строку на mitchell@4GuysFromRolla.com.

Назад Вперед

Поделиться через