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

Отображение элементов данных и сведений

  • Статья

Эрик Рейтан (Erik Reitan)

В этой серии учебников описаны основы создания приложения ASP.NET Web Forms с помощью ASP.NET 4.7 и Microsoft Visual Studio 2017.

В этом руководстве вы узнаете, как отображать элементы данных и сведения об элементах данных с помощью ASP.NET Web Forms и Entity Framework Code First. Этот учебник основан на предыдущем учебнике "Пользовательский интерфейс и навигация" в рамках серии руководств Wingtip Toy Store. После завершения работы с этим руководством вы увидите продукты на странице ProductsList.aspx , а сведения о продукте — на странице ProductDetails.aspx .

Вы узнаете, как:

  • Добавление элемента управления данными для отображения продуктов из базы данных
  • Подключение элемента управления данными к выбранным данным
  • Добавление элемента управления данными для отображения сведений о продукте из базы данных
  • Получение значения из строки запроса и использование этого значения для ограничения данных, полученных из базы данных

Функции, представленные в этом руководстве:

  • Привязка модели
  • Поставщики значений

Добавление элемента управления данными

Для привязки данных к серверному элементу управления можно использовать несколько различных параметров. Наиболее распространенные подкоманды:

  • Добавление элемента управления источником данных
  • Добавление кода вручную
  • Использование привязки модели

Использование элемента управления источником данных для привязки данных

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

Код вручную для привязки данных

Написание кода вручную включает в себя:

  1. Чтение значения
  2. Проверка того, имеет ли он значение NULL
  3. Преобразование в соответствующий тип
  4. Проверка успешности преобразования
  5. Использование значения в запросе

Такой подход позволяет получить полный контроль над логикой доступа к данным.

Использование привязки модели для привязки данных

Привязка модели позволяет привязать результаты к гораздо меньшему объему кода и позволяет повторно использовать функциональные возможности во всем приложении. Он упрощает работу с логикой доступа к данным, ориентированной на код, но при этом предоставляет обширную платформу привязки данных.

Отображение продуктов

В этом руководстве вы будете использовать привязку модели для привязки данных. Чтобы настроить элемент управления данными для использования привязки модели для выбора данных, необходимо задать для свойства элемента управления SelectMethod имя метода в коде страницы. Элемент управления данными вызывает метод в соответствующее время жизненного цикла страницы и автоматически привязывает возвращаемые данные. Нет необходимости явно вызывать DataBind метод .

  1. В Обозреватель решений откройте ProductList.aspx.

  2. Замените существующую разметку следующей разметкой:

    <%@ Page Title="Products" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" 
         CodeBehind="ProductList.aspx.cs" Inherits="WingtipToys.ProductList" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <section>
        <div>
            <hgroup>
                <h2><%: Page.Title %></h2>
            </hgroup>

            <asp:ListView ID="productList" runat="server" 
                DataKeyNames="ProductID" GroupItemCount="4"
                ItemType="WingtipToys.Models.Product" SelectMethod="GetProducts">
                <EmptyDataTemplate>
                    <table >
                        <tr>
                            <td>No data was returned.</td>
                        </tr>
                    </table>
                </EmptyDataTemplate>
                <EmptyItemTemplate>
                    <td/>
                </EmptyItemTemplate>
                <GroupTemplate>
                    <tr id="itemPlaceholderContainer" runat="server">
                        <td id="itemPlaceholder" runat="server"></td>
                    </tr>
                </GroupTemplate>
                <ItemTemplate>
                    <td runat="server">
                        <table>
                            <tr>
                                <td>
                                    <a href="ProductDetails.aspx?productID=<%#:Item.ProductID%>">
                                        <img src="/Catalog/Images/Thumbs/<%#:Item.ImagePath%>"
                                            width="100" height="75" style="border: solid" /></a>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <a href="ProductDetails.aspx?productID=<%#:Item.ProductID%>">
                                        <span>
                                            <%#:Item.ProductName%>
                                        </span>
                                    </a>
                                    <br />
                                    <span>
                                        <b>Price: </b><%#:String.Format("{0:c}", Item.UnitPrice)%>
                                    </span>
                                    <br />
                                </td>
                            </tr>
                            <tr>
                                <td>&nbsp;</td>
                            </tr>
                        </table>
                        </p>
                    </td>
                </ItemTemplate>
                <LayoutTemplate>
                    <table style="width:100%;">
                        <tbody>
                            <tr>
                                <td>
                                    <table id="groupPlaceholderContainer" runat="server" style="width:100%">
                                        <tr id="groupPlaceholder"></tr>
                                    </table>
                                </td>
                            </tr>
                            <tr>
                                <td></td>
                            </tr>
                            <tr></tr>
                        </tbody>
                    </table>
                </LayoutTemplate>
            </asp:ListView>
        </div>
    </section>
</asp:Content>

Этот код использует элемент управления ListView с именем productList для отображения продуктов.

<asp:ListView ID="productList" runat="server"

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

Если задать ItemType свойство в элементе управления ListView , выражение Item привязки данных становится доступным и элемент управления становится строго типизированным. Как упоминалось в предыдущем руководстве, можно выбрать Сведения об объекте Item с помощью IntelliSense, например указать ProductName:

Отображение элементов данных и сведений — IntelliSense

Вы также используете привязку модели для указания SelectMethod значения. Это значение (GetProducts) соответствует методу, который вы добавите в код программной части для отображения продуктов на следующем шаге.

Добавление кода для отображения продуктов

На этом шаге вы добавите код для заполнения элемента управления ListView данными о продукте из базы данных. Код поддерживает отображение всех продуктов и продуктов отдельных категорий.

  1. В Обозреватель решений щелкните правой кнопкой мыши ProductList.aspx и выберите пункт Просмотреть код.

  2. Замените существующий код в файле ProductList.aspx.cs следующим кодом:

    using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using WingtipToys.Models;
using System.Web.ModelBinding;

namespace WingtipToys
{
    public partial class ProductList : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        public IQueryable<Product> GetProducts([QueryString("id")] int? categoryId)
        {
            var _db = new WingtipToys.Models.ProductContext();
                IQueryable<Product> query = _db.Products;
                if (categoryId.HasValue && categoryId > 0)
                {
                    query = query.Where(p => p.CategoryID == categoryId);
                }
                return query;
        }
    }
}

В этом коде GetProducts показан метод, на который ссылается свойство элемента управления ItemTypeListView на странице ProductList.aspx. Чтобы ограничить результаты определенной категорией базы данных, код задает categoryId значение из строки запроса, передаваемой на страницу ProductList.aspx при переходе на страницу ProductList.aspx . Класс QueryStringAttribute в System.Web.ModelBinding пространстве имен используется для получения значения переменной idстроки запроса . Это указывает привязке модели попытаться привязать значение из строки запроса к параметру categoryId во время выполнения.

Когда допустимая категория передается в виде строки запроса на страницу, результаты запроса ограничиваются теми продуктами в базе данных, которые соответствуют значению categoryId . Например, если URL-адрес страницы ProductsList.aspx имеет следующий формат:

http://localhost/ProductList.aspx?id=1

На странице отображаются только продукты, для которых categoryId значение равно 1.

Если при вызове страницы ProductList.aspx строка запроса не включена, отображаются все продукты.

Источники значений для этих методов называются поставщиками значений (например , QueryString), а атрибуты параметров, указывающие, какой поставщик значений использовать, называются атрибутами поставщика значений (например id, ). ASP.NET включает поставщиков значений и соответствующие атрибуты для всех типичных источников ввода данных пользователем в веб-формы приложении, таких как строка запроса, файлы cookie, значения форм, элементы управления, состояние представления, состояние сеанса и свойства профиля. Можно также написать настраиваемые поставщики значений.

Выполнение приложения

Запустите приложение сейчас, чтобы просмотреть все продукты или продукты категории.

  1. Нажмите клавишу F5 в Visual Studio, чтобы запустить приложение.
    Откроется браузер со страницей Default.aspx .

  2. Выберите Автомобили в меню навигации по категории продуктов.
    На странице ProductList.aspx отображаются только продукты категории "Автомобили ". Далее в этом руководстве вы увидите сведения о продукте.

    Отображение элементов данных и сведений — автомобили

  3. Выберите Продукты в меню навигации в верхней части окна.
    Снова отображается страница ProductList.aspx , но на этот раз отображается весь список продуктов.

    Снимок экрана: страница ProductList.aspx со всем списком продуктов.

  4. Закройте браузер и вернитесь в Visual Studio.

Добавление элемента управления данными для отображения сведений о продукте

Затем вы измените разметку на странице ProductDetails.aspx , добавленную в предыдущем руководстве, чтобы отобразить сведения о конкретных продуктах.

  1. В Обозреватель решений откройте ProductDetails.aspx.

  2. Замените существующую разметку следующей разметкой:

    <%@ Page Title="Product Details" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" 
         CodeBehind="ProductDetails.aspx.cs" Inherits="WingtipToys.ProductDetails" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <asp:FormView ID="productDetail" runat="server" ItemType="WingtipToys.Models.Product" SelectMethod ="GetProduct" RenderOuterTable="false">
        <ItemTemplate>
            <div>
                <h1><%#:Item.ProductName %></h1>
            </div>
            <br />
            <table>
                <tr>
                    <td>
                        <img src="/Catalog/Images/<%#:Item.ImagePath %>" style="border:solid; height:300px" alt="<%#:Item.ProductName %>"/>
                    </td>
                    <td>&nbsp;</td>  
                    <td style="vertical-align: top; text-align:left;">
                        <b>Description:</b><br /><%#:Item.Description %>
                        <br />
                        <span><b>Price:</b>&nbsp;<%#: String.Format("{0:c}", Item.UnitPrice) %></span>
                        <br />
                        <span><b>Product Number:</b>&nbsp;<%#:Item.ProductID %></span>
                        <br />
                    </td>
                </tr>
            </table>
        </ItemTemplate>
    </asp:FormView>
</asp:Content>

    Этот код использует элемент управления FormView для отображения определенных сведений о продукте. Эта разметка использует методы, такие как методы, используемые для отображения данных на странице ProductList.aspx . Элемент управления FormView используется для отображения одной записи за раз из источника данных. При использовании элемента управления FormView создаются шаблоны для отображения и изменения значений, привязанных к данным. Эти шаблоны содержат элементы управления, выражения привязки и форматирование, которые определяют внешний вид и функциональность формы.

Для подключения предыдущей разметки к базе данных требуется дополнительный код.

  1. В Обозреватель решений щелкните правой кнопкой мыши ProductDetails.aspx и выберите пункт Просмотреть код.
    Отобразится файл ProductDetails.aspx.cs .

  2. Замените существующий код следующим кодом:

    using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using WingtipToys.Models;
using System.Web.ModelBinding;

namespace WingtipToys
{
    public partial class ProductDetails : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        public IQueryable<Product> GetProduct([QueryString("productID")] int? productId)
        {
            var _db = new WingtipToys.Models.ProductContext();
                IQueryable<Product> query = _db.Products;
                if (productId.HasValue && productId > 0)
                {
                    query = query.Where(p => p.ProductID == productId);
                }
                else
                {
                    query = null;
                }
                return query;
        }
    }
}

Этот код проверяет значение строки запроса "productID". Если найдено допустимое значение строки запроса, отображается соответствующий продукт. Если строка запроса не найдена или ее значение недопустимо, продукт не отображается.

Выполнение приложения

Теперь вы можете запустить приложение, чтобы просмотреть отдельный продукт на основе идентификатора продукта.

  1. Нажмите клавишу F5 в Visual Studio, чтобы запустить приложение.
    Откроется браузер со страницей Default.aspx .

  2. Выберите Лодки в меню навигации по категориям.
    Отобразится страница ProductList.aspx .

  3. Выберите Бумажная лодка в списке продуктов. Отобразится страница ProductDetails.aspx .

    Снимок экрана: страница сведений о продукте paper Boat.

  4. Закройте браузер.

Дополнительные ресурсы

Получение и отображение данных с помощью привязки модели и веб-форм

Дальнейшие действия

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

НазадВперед