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

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

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

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

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

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

Примечание

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

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

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

Откроется мастер настройки источника данных. Сначала необходимо указать объект, с которым будет работать ObjectDataSource. Если установлен флажок Show only data components (Показывать только компоненты данных), в раскрывающемся списке на этом экране перечислены только те объекты, которые были украшены атрибутом DataObject . В настоящее время наш список включает tableAdapters в typed DataSet и классы 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 (а именно, свойств, определенных таблицей DataTable Products).

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

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

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

Уделите немного времени, чтобы изменить BoundFields GridView, удалив ProductIDполя BoundFieldSupplierID, , CategoryIDQuantityPerUnit, UnitsInStock, UnitsOnOrderи ReorderLevel . Просто выберите 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 содержит классы DataWebControlStyleCSS , HeaderStyle, RowStyleи , AlternatingRowStyle которые следует использовать для диктовки внешнего вида веб-элементов управления данными, используемых в этих руководствах. Для этого можно задать свойству 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>

Он определяет свойства по умолчанию для CssClassсвойств, связанных с элементом GridView на любой странице, на которую используется тема 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; к сожалению, параметры темы, заданные с помощью атрибута theme , не отображаются в представлении конструктора Visual Studio. Дополнительные сведения о темах и обложках см. в статье ASP.NET Темы и Обложки Обзор и Стили на стороне сервера с использованием тем . Дополнительные сведения о настройке страницы для использования темы см. в разделе Практическое руководство. Применение тем ASP.NET .

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

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

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

Начните с добавления элемента управления DetailsView над GridView в SimpleDisplay.aspx. Затем привяжите его к тому же элементу управления ObjectDataSource, что и GridView. Как и в случае с GridView, BoundField будет добавлен в DetailsView для каждого свойства объекта, возвращаемого методом ObjectDataSource Select . Единственное отличие заключается в том, что BoundFields 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.

Вперед

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