Використання елементів управління ListView і DataPager в ASP.NET 3.5, Різне, Програмування, статті

В Toolbox ASP.NET версії 3.5 було додано два нові елементи управління даними: ListView і DataPager. Елемент управління ListView надає ті ж вбудовані функції, що і GridView, але при цьому вони забезпечують більше контролю над інформацією. Вихідні дані ListView визначаються за допомогою безлічі шаблонів, за допомогою LayoutTemplate і ItemTemplates елемента. ItemTemplate обробляється для кожного запису, прив’язаною до елементу управління ListView, і зазвичай на нього посилаються в LayoutTemplate.

Даний підхід генерує оброблену розмітку, визначену в LayoutTemplate, додатково оброблену розмітку, створену ItemTemplate для кожного запису. Це працює в випадках простої обробки, але в більш складних випадках нам може знадобитися обробляти різну розмітку форматування для різних груп записів. Наприклад, уявіть, що нам потрібно відобразити набір записів в трьох колонках HTML елемента

. Для кожного запису нам знадобиться виділити одну комірку (

). Такі спеціалізації можуть бути реалізовані декларативно, при цьому ListView включає в себе властивості GroupTemplate і GroupItemCount.


У даній статті ми розглянемо спосіб застосування властивостей GroupTemplate і GroupItemCount для того, щоб вказати елементу ListView обробляти різну розмітку відображення для кожних n записів. Ми розглянемо два приклади: один обробляє записи в послідовність упорядкованих списків, а інший демонструє спосіб відображення інформації в таблиці з безліччю колонок. Читайте далі, щоб дізнатися більше про це!


Угруповання інформації за допомогою елемента управління ListView


Елемент управління ListView містить два шаблону: LayoutTemplate і ItemTemplate. LayoutTemplate обробляється для генерації розмітки елемента ListView і може містити посилання на ItemTemplate, який використовується для того, щоб обробляти кожен запис, прив’язану до елемента ListView. LayoutTemplate посилається на ItemTemplate допомогою елемента управління серверної сторони (таким, як PlaceHolder), чиє ID є таким же, як і властивість ItemPlaceholderID елемента ListView. (Властивість ItemPlaceholderID має стандартне значення “itemPlaceholder”.)


Посилання безпосередньо на ItemTemplate з LayoutTemplate є гарною ідеєю в разі, якщо розмітка зовнішнього вигляду для кожного елемента списку однакова, але в деяких випадках різна розмітка зовнішнього вигляду повинна бути надана для кожного n-го елемента. Така спеціалізація можлива за допомогою вказівки GroupTemplateGroupItemCount елемента ListView в n. Далі, замість того, щоб посилатися на ItemTemplate в LayoutTemplate, змусьте LayoutTemplate посилатися на GroupTemplate, а GroupTemplate посилатися на ItemTemplate. В такому випадку ItemTemplate все ще буде обоработан для кожного запису, пов’язаної з елементом ListView, але при цьому змушує GroupTemplate оброблятися кожні n записів, де n одно GroupItemCount. (Групового шаблону) і установки властивості


Для того, щоб краще зрозуміти спосіб угруповання за допомогою ListView, давайте розглянемо перший приклад, який демонструє набір записів в упорядкованому списку, і використовує наступну декларативну розмітку для елемента управління ListView:


<asp:ListView ID=”…” runat=”server” DataSourceID=”…”>
   <LayoutTemplate>
      <ol>
         <asp:PlaceHolder runat=”server” ID=”itemPlaceholder”></asp:PlaceHolder>
      </ol>
   </LayoutTemplate>


   <ItemTemplate>
      <li><%# Eval(“columnName”) %></li>
   </ItemTemplate>
</asp:ListView> 


Уявіть, що ми хочемо відобразити впорядкований список для кожної групи з трьох записів. Для реалізації цього використовуйте наступну розмітку:


<asp:ListView ID=”ProductList1″ runat=”server”
   DataSourceID=”ProductDataSource”
   GroupItemCount=”3″ ItemPlaceholderID=”itemsGoHere”
   GroupPlaceholderID=”groupsGoHere”>


   <LayoutTemplate>
      <p>
         <asp:PlaceHolder runat=”server” ID=”groupsGoHere”></asp:PlaceHolder>
      </p>
   </LayoutTemplate>


   <GroupTemplate>
      <ol>
         <asp:PlaceHolder runat=”server” ID=”itemsGoHere”></asp:PlaceHolder>
      </ol>
   </GroupTemplate>


   <ItemTemplate>
      <li><%#Eval(“ProductName”)%></li>
   </ItemTemplate>
</asp:ListView> 


Декларативна розмітка елемента управління ListView має елемент

    в GroupTemplate. LayoutTemplate повинен бути присутнім і в даному прикладі посилається на GroupLayout. Зверніть увагу на те, що замість того, щоб змінювати стандартні значення для групи і покажчиків місця заповнення елементів (“groupPlaceholder” і “itemPlaceholder”) я явно змінив дані значення за допомогою властивостей ItemPlaceHolderID і GroupPlaceholderID елемента ListView.


    Уявіть, що вказаний вище ListView прив’язаний до таблиці співробітників бази даних, і що в ItemTemplate ми обробляли колонку FullName в межах елемента

  1. . Як же виглядатиме оброблена розмітка елемента ListView?


    В принципі, ListView почне обробляти свій LayoutTemplate:


    <p>
       <asp:PlaceHolder runat=”server” ID=”groupsGoHere”></asp:PlaceHolder>
    </p> 


    Потім він буде обробляти свій GroupTemplate для кожної групи з трьох записів, прив’язаних до елемента ListView. Припустивши, що всього було вісім співробітників, ми в результаті отримали б наступну розмітку:


    <ol>
      <asp:PlaceHolder runat=”server” ID=”itemsGoHere”></asp:PlaceHolder>
    </ol>


    <ol>
      <asp:PlaceHolder runat=”server” ID=”itemsGoHere”></asp:PlaceHolder>
    </ol>


    <ol>
      <asp:PlaceHolder runat=”server” ID=”itemsGoHere”></asp:PlaceHolder>
    </ol>


    Потім для кожного запису прив’язаною до елемента ListView був би оброблений ItemTemplate. В результаті ви отримаєте наступну розмітку:


    <li>Scott Mitchell</li>
    <li>Sam Smith</li>
    <li>Jisun Lee</li>
    <li>Andrew Fuller</li>
    <li>Edgar Johnson</li>
    <li>Ellen Plank</li>
    <li>Tito Wald</li>
    <li>Layla Clapton</li> 


    Оброблена розмітка ItemTemplates буде розташована у відповідних елементах управління GroupLayout PlaceHolder, і виглядає це таким чином:


    <p>
    <ol>
    <li>Scott Mitchell</li>
    <li>Sam Smith</li>
    <li>Jisun Lee</li>
    </ol>
    <ol>
    <li>Andrew Fuller</li>
    <li>Edgar Johnson</li>
    <li>Ellen Plank</li>
    </ol>
    <ol>
    <li>Tito Wald</li>
    <li>Layla Clapton</li>
    </ol>
    </p> 


    Відображення інформації в таблиці з безліччю колонок


    Відображення записів у таблиці з безліччю колонок є звичайним випадком, коли вам швидше за все знадобиться обробляти різну форматують розмітку для груп записів. Часто таке форматування досягається за допомогою використання елемента HTML

), але для кожної трійки записів нам необхідно буде створити табличну рядок (

з безліччю колонок. Приміром, для того, щоб відобразити таблицю з трьома колонками, ми обробити три табличні осередку (

) наступним чином:


<table …>
   <tr>
      <td>Record 1</td>
      <td>Record 2</td>
      <td>Record 3</td>
   </tr>


   …


   <tr>
      <td>Record N – 2</td>
      <td>Record N – 1</td>
      <td>Record N</td>
   </tr>
</table> 


Для того, щоб згенерувати таку розмітку використовуючи елемент керування ListView, нам необхідно використовувати LayoutTemplate, який обробляє зовнішні теги

) в кожному рядку таблиці (

і , GroupTemplate який обробляє елементи рядків таблиці і ItemTemplate, який обробляє кожну табличну клітинку. Наступна декларативна розмітка відображає інформацію в таблиці з трьома колонками:


<asp:ListView ID=”ProductDataList2″ runat=”server”
   DataSourceID=”…” GroupItemCount=”3″>
   
   <LayoutTemplate>
      <table>
         <tr>
            <td>
               <table border=”0″ cellpadding=”5″>
                  <asp:PlaceHolder runat=”server” ID=”groupPlaceHolder”></asp:PlaceHolder>
               </table>
            </td>
         </tr>
      </table>
   </LayoutTemplate>


   <GroupTemplate>
      <tr>
         <asp:PlaceHolder runat=”server” ID=”itemPlaceHolder”></asp:PlaceHolder>
      </tr>
   </GroupTemplate>


   <ItemTemplate>
      <td>
         <h2><%# Eval(“ProductName”) %></h2>
         
         Price: <%#Eval(“UnitPrice”, “{0:c}”)%><br />
         Category: <%# Eval(“CategoryName”) %>
      </td>
   </ItemTemplate>
</asp:ListView>


Додаток до цієї статті включає також приклад, який відображає записи з таблиці Products бази даних Northwind в трьох колонках, і це буде виглядати наступним чином в браузері.

Використання елементів управління ListView і DataPager в ASP.NET 3.5 - ASP.NET - Microsoft. NET - Програмування, исходники, операційні системи


Сортування інформації за допомогою елемента управління ListView


Прив’язуючи дані до GridView за допомогою елемента керування джерелом даних, надавати сортування при цьому так само легко, як і відзначити опцію “Enable Sorting” (Активувати сортування) в смарт-тегу GridView. Активація сортування перетворює заголовок кожної колонки GridView в LinkButton, який при натисканні на нього викликає постбек і повторно прив’язує інформацію до GridView, при цьому сортуючи по обраної колонці.


Аналогічно активація сортування в ListView – дуже проста процедура і може бути виконана без необхідності в написанні і рядки коду. Основною перешкодою використання сортування в елементі управління ListView є те, що не існує ніяких заздалегідь визначених колонок, як у випадку з GridView. Тому ми замішані у визначенні та реалізації інтерфейсу сортування. Але як тільки все буде зроблено, ListView зможе обробляти логіку сортування, а нам не доведеться писати нічого в коді. Звичайно, у більш складних випадках нам напевно знадобиться вручну сортувати інформацію, або програмно вказати вираз сортування, що використовується для сортування інформації. До здійснення сортування ListView викликає свій оброблювач події Sorting, який є ідеальним місцем для додавання будь-якої логіки, пов’язаної з сортуванням. Більше того, логіка сортування елемента ListView може бути програмно викликана за допомогою методу Sort.


У даній статті ми розглянемо спосіб активації сортування в елементі управління ListView. Ми розглянемо приклад ListView, що володіє функціональністю сортування. Далі ми розглянемо спосіб програмного виклику даної логіки сортування за допомогою методу Sort, а також більш серйозні приклади. Читайте далі, щоб дізнатися більше про це!


Основи сортування


Основні принципи, які використовуються для сортування ListView такі ж, як і для сортування інших веб-елементів керування типу * View: GridView, DetailsView і FormView. Для новачків: елемент управління ListView володіє методом Sort (sortExpression, sortDirection), який у якості вхідних даних приймає рядок sortExpression та перерахування SortDirection (який має значення Ascending (по зростанню) і Descending (за спаданням)). Виклик методу SortSorting елемента ListView. викликає подія


Якщо елемент ListView прив’язаний до елемента керування джерелом даних (наприклад, SqlDataSource або ObjectDataSource), то останній у відповіді за сортування даних. Відсортована інформація після буде заново прив’язана до елементу ListView. Коротко, якщо ви використовуєте елемент керування джерелом даних, то сортування може бути реалізована в елементі ListView без будь-яких зусиль щодо написання коду – все обробляється автоматично елементом ListView і його елементом керування джерелом даних.


Якщо ListView був програмно прив’язаний до даних – тобто, якщо у вас є код, який отримує дані, а потім призначає їх властивості DataSource елемента ListView і викликає метод DataBind (), то тоді ви відповідальні за повторну сортування і прив’язку даних до ListView. Для реалізації цього вам знадобиться створити обробник для події Sorting елемента ListView – місце, де ви повторно запросите дані в зазначеному порядку і заново прив’яже до ListView. Ми розглянемо спосіб створення обробника події Sorting пізніше (хоча ми буде використовувати його в більш значущих випадках, а всі приклади в даній статті використовують елемент керування джерелом даних).


Одним із способів почати процес сортування ListView є виклик методу Sort. Іншим буде додавання правильних конфігурацій LinkButton, Button або ImageButton з LayoutTemplate елемента ListView. Натискання на такий елемент, як Button, викличе постбек і почне процес сортування. Для того, щоб це спрацювало, LinkButton, Button або ImageButton повинні мати значення Sort у властивості CommandName, а також властивість CommandArgument встановлене в поле даних, за яким буде зроблена сортування.


Реалізація простого прикладу сортування


Щоб продемонструвати використання вбудованого механізму сортування ListView, давайте розглянемо простий приклад. (Всі розглянуті приклади доступні в кінці статті.) Давайте розширимо Product Listing включаючи інтерфейс сортування. Зокрема, давайте додавши дві сортувальні опції: сортування за ProductName і сортування за UnitPrice. Для реалізації ми просто додамо два LinkButtons (або Buttons, або ImageButtons) в LayoutTemplate елемента ListView з відповідними значеннями властивостей CommandName і CommandArgument.


<asp:ListView ID=”ProductList” runat=”server” DataSourceID=”ProductDataSource”>
   <LayoutTemplate>
      <h3>Product Listing</h3>
      [<asp:LinkButton runat=”server” ID=”SortByName” CommandName=”Sort”
                     CommandArgument=”ProductName”>Sort by Name</asp:LinkButton>]
      / [<asp:LinkButton runat=”server” ID=”SortByPrice” CommandName=”Sort”
                     CommandArgument=”UnitPrice”>Sort by Price</asp:LinkButton>]


      <blockquote>
         <asp:PlaceHolder runat=”server” ID=”itemPlaceholder”></asp:PlaceHolder>
      </blockquote>
   </LayoutTemplate>


   …
</asp:ListView> 


(Для стислості я опустив більшу частину розмітки ListView і сфокусувався на двох сортують LinkButtons. Я також опустив елемент управління AccessDataSource, який прив’язаний до ListView.)


Зверніть увагу на те, що два сортують LinkButtons мають властивості CommandName, встановленими в значення Sort і властивості CommandArgument, встановлені у відповідні назви полів даних. Коли натискають одну з LinkButtons, то буде виконаний постбек і ListView автоматично викличе метод Sort, передаючи значення CommandArgument елемента LinkButton в якості сортувального вираження. Напрямок сортування збережено в якості внутрішнього значення і буде автоматично переключено в разі, якщо один і той же сортувальне вираз буде змінено двічі поспіль. Отже, якщо відвідувач натисне на посилання “Sort by Price” двічі поспіль, то в перший раз товари будуть відсортовані в порядку зростання (від дешевого до найдорожчого), але вдруге напрям сортування зміниться в сторону убування.


Наступні два малюнки демонструють посилання LinkButtons в дії. Перше зображення демонструє екран після того, як посилання “Sort by Price” була натиснута вперше. Товари були розсортовані в зростаючому порядку.

Використання елементів управління ListView і DataPager в ASP.NET 3.5 - ASP.NET - Microsoft. NET - Програмування, исходники, операційні системи


Другий демонструє результат сортування після того, як ми вдруге натиснули посилання “Sort by Price” – на цей раз товари були розсортовані в спадному порядку.

Використання елементів управління ListView і DataPager в ASP.NET 3.5 - ASP.NET - Microsoft. NET - Програмування, исходники, операційні системи


Сортування за допомогою методу Sort


Попередній приклад розглянув спосіб отримання відсортованого списку в ListView у відповідь на натискання на LinkButton, Button і ImageButton. Але в деяких випадках нам знадобиться програмно викликати сортування ListView. Наприклад, при першому завантаженні сторінки нам напевно буде потрібно відсортувати інформацію, або ж коли у нас є який-небудь інший елемент інтерфейсу користувача на сторінці, то нам напевно буде потрібно заново відсортувати результат. Це можна реалізувати, викликавши метод Sort елемента ListView, передаючи в нього вираз сортування та напрямок.


Для того, щоб продемонструвати використання методу, давайте почнемо з додавання в зазначений вище приклад кнопки (Button), при натисканні на яку результат буде відсортований по полю CategoryName. Просто додайте елемент управління Button, встановіть його властивості і потім створіть обробник події Click. В даному обробнику просто викличте метод Sort елемента ListView, передаючи в нього “CategoryName” в якості вираження сортування та SortDirection.Ascending як напряму. І це все!


Protected Sub SortByCallingSortMethodButton_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles SortByCallingSortMethodButton.Click
   “Sort the ListView by the CategoryName field in ascending order
   ProductList.Sort(“CategoryName”, SortDirection.Ascending)
End Sub 


При натисканні на кнопку буде здійснено постбек і виклик методу Sort, який викличе процес сортування. Все точно так само, якщо б ми додали LinkButton до LayoutTemplate і встановили б його властивості CommandName і CommandArgument в значення Sort і “CategoryName”.

Використання елементів управління ListView і DataPager в ASP.NET 3.5 - ASP.NET - Microsoft. NET - Програмування, исходники, операційні системи


Створення обробника для події Sorting елемента ListView


У певних випадках нам може знадобитися виконати код під час сортування ListView. Це можна реалізувати створивши обробник для події Sorting ListView, який буде викликаний на початку процесу сортування. Якщо інформація з ListView була програмно прив’язана, то тоді нам обов’язково треба створити обробник події Sorting, який заново відсортує інформацію і повторно прив’яже її до ListView. Але навіть коли ми використовуємо декларативні елементи керування джерелом даних, нам все ж може знадобитися виконати якусь спеціалізацію по відношенню до логіки сортування.


Додаток, доступне в кінці цієї статті, включає в себе приклад, який “запам’ятовує” п’ять останніх варіантів сортування, використовуваних користувачем, і відображає їх на сторінці у вигляді послідовності LinkButtons. Натискання на один з LinkButtons повторно впорядковує дані у відповідному порядку. При створенні даної функціональності мені знадобилося створити обробник для події Sorting, щоб я зміг записати тільки що застосоване сортувальне вираз і напрям.


Кожен останній користувальницький вибір сортування записується за допомогою об’єкта SortHistory, який є класом, створеним мною в каталозі App_Code веб-сайту. Даний клас має властивості SortExpression і SortDirection, а також властивості доступні тільки для читання, які повертають властивості SortExpression і SortDirection в якості єдиної рядки і форматованої рядка. Форматована рядок використовується для відображення. Вона конвертує значення SortExpression і SortDirection – “CategoryName” і SortDirection.Descending, наприклад в більш приємний результат: “Category (in descending order)”.


Я також створив об’єкт SortHistoryQueue в каталозі App_Code, який містить буффер останніх об’єктів SortHistory. Примірник SortHistoryQueue відсортований в Session, тим самим користувача сортування запам’ятовуються між постбекамі, відвідинами сторінок і специфічні для кожного користувача.


На додаток до використання обробника події Sorting, даний приклад використовує метод Sort. Як я вже згадував раніше, останні п’ять сортувань користувача відображаються як список LinkButtons – Це обробляється за допомогою елемента управління Repeater. Натискання по LinkButton викликає постбек і подія ItemCommand елемента Repeater. Я створив обробник даної події, який застосовує критерій сортування, використовуваний для натиснутою посилання, шляхом виклику методу Sort елемента ListView.


Наступні малюнки демонструють дану функціональність у дії. Перший демонструє вікно оглядача з п’ятьма останні Сортування у вигляді списку.

Використання елементів управління ListView і DataPager в ASP.NET 3.5 - ASP.NET - Microsoft. NET - Програмування, исходники, операційні системи


Другий малюнок був збережений відразу ж після того, як була натиснуто LinkButton з назвою “Sort by Name”. Зверніть увагу на доданий до списку LinkButton “Name (in ascending order)” (а також результат натискання у вигляді списку, відсортованого по ProductName в зростаючому порядку).

Використання елементів управління ListView і DataPager в ASP.NET 3.5 - ASP.NET - Microsoft. NET - Програмування, исходники, операційні системи


Перегортання за допомогою елементів управління ListView і DataPager


Елементи управління GridView, DetailsView і FormView підтримують функціональність перегортання, яку можна активувати вибравши відповідну опцію. При включенні підтримки перегортання дані елементи автоматично обробляють відповідний інтерфейс, що містить в собі LinkButtons, Buttons і ImageButtons. Конфігурація інтерфейсу перегортання (чи використовуються при цьому посилання на наступну і попередню сторінку (Next / Previous), чи використовується опція перегортання по номеру, відображення тексту в різних кнопках і так далі) налаштовується за допомогою властивостей елемента керування даними. Притому що таке конфігурування необхідно, у вас є можливість спеціалізувати невелику частину. Наприклад, опції конфігурації дозволяють вам вказати розташування інтерфейсу перегортання – вище або нижче елемента управління (або в обох місцях). Але якщо ви хочете відобразити даний інтерфейс десь в іншому місці, окремо від основної частини інтерфейсу, то вам не пощастило.


ASP.NET виправив цей недолік за допомогою елемента управління ListView, відокремивши підтримку перегортання від елемента управління ListView і перемістивши її в окремий, самостійний DataPager. Основним призначенням елемента управління DataPager є обробка інтерфейсу перегортання і повідомлення з відповідним елементом управління ListView тоді, коли користувач взаємодіє з інтерфейсом (Наприклад, користувач вибрав перехід до останньої сторінки). Таке явне розділення між ListView і DataPager позвляет отримати більше можливостей спеціалізації інтерфейсу перегортання і позиціонування, у чому ми переконаємося далі в статті. Читайте далі, щоб дізнатися більше про це!


Основи сторінкової організації


Елемент управління DataPager реалізує сторінкову організацію за допомогою трьох бітів інформації:



Приміром, для того, щоб відобразити першу сторінку інформації при показі 10 записів на одній сторінці, значення StartRowIndex і MaximumRows повинні бути відповідно 0 і 10. Щоб відобразити другий сторінку інформації, значення повинні бути 10 і 10. Для того, щоб відобразити третю сторінку, значення повинні бути 20 і 10. Також існує властивість TotalRowCount доступне тільки для читання, яке повертає загальне число записів використовуваних при гортанні.


Елемент управління DataPager обробляє набір DataPagerFields, де кожен DataPagerField відображає інтерфейс лістингу. Тут. NET Framework версії 3.5 включає в себе три заздалегідь створених DataPagerFields: NextPreviousPagerField, NumericPagerField і TemplatePagerField. NextPreviousPagerField відображає кнопки First / Previous / Next / Last (Перша / Попередня / Наступна / Остання); NumericPagerField відображає серію номерів сторінок; TemplatePagerField відображає сторінковий інтерфейс за допомогою шаблону, який ми повинні створити.


Коли користувач взаємодіє з інтерфейсом, що надає сторінкову організацію інформації, при цьому він, наприклад, натиснув кнопку Next, буде виконаний постбек, і DataPagerField дізнається, що подія було викликано одним з його елементів інтерфейсу. DataPagerField потім визначає нові значення StartRowIndex і MaximumRows і передає їх в метод SetPageProperties класу DataPager. DataPager потім викликає асоційований метод SetPageProperties елемента ListView, який викличе повторну прив’язку ListView до джерела даних і виведення на екран лише відповідного набору записів.







Стандартне перегортання (Default Paging) проти спеціалізованого (Custom Paging)


Елементи управління ListView і DataPager пропонують дві моделі перегортання: стандартна і спеціалізована. Дві моделі надають компромісне рішення між продуктивністю і легкістю налаштування / конфігурації / використання . Елемент управління SqlDataSource використовує стандартне перегортання, а ObjectDataSource за замовчуванням використовує стандартну модель, але при цьому має простий механізм вказівки того, що він повинен використовувати спеціалізоване перегортання. Пам’ятайте, що ListView всього лише відображає інформацію – насправді елемент керування джерелом даних отримує інформацію з бази даних.


У випадку зі стандартним перегортанням, при кожному відображенні нової сторінки даних нам необхідно отримати всю інформацію з елемента керування джерелом даних. Як тільки ми отримаємо всю інформацію, ListView вибірково відобразить частину всього набору даних, грунтуючись на значеннях StartRowIndex і MaximumRows.


У випадку зі спеціалізованим перегортанням, вам, як розробнику, належить виконати трохи більше роботи. Замість того, щоб просто здійснювати прив’язку даних ListView до елемента керування джерелом даних і додавання елементу управління DataPager вам необхідно налаштувати елемент керування джерелом таким чином, щоб він вибірково отримував тільки ті записи, які повинні бути відображені на конкретній сторінці.


Створення DataPager та визначення його DataPagerFields


Реалізація інтерфейсу, що підтримує сторінкову організацію, за допомогою елементів управління ListView і DataPager не так проста, як здається на перший погляд. Додаток в кінці статті включає в себе два приклади DataPager, які ми обговоримо в даній статті.


Для початку додайте і настройте елемент управління ListView таким чином, щоб він відображав дані в такому форматі, який вам необхідний. Далі, щоб додати можливість перегортання, додайте один або більше елементів управління DataPager на сторінку, розташувавши їх де вам завгодно. DataPager може бути розташований в LayoutTemplate елемента ListView чи деінде на сторінці, за межами елемента управління.


Після додавання DataPager, він з’явиться в режимі Visual Studio Design в якості сірого прямокутника, оскільки нам ще необхідно вказати які DataPagerField необхідно використовувати. Щоб налаштувати DataPagerFields клацніть по посиланню Edit Pager Fields (Редагувати поля) з смарт-тега DataPager. Це виведе на екран діалогове вікно Fields (див. нижче). Тут ви можете вказати які DataPagerFields необхідно додати і їх відповідні властивості. У діалоговому вікні Fields я додав NextPreviousPagerField і встановив властивість ButtonType в Button (тому воно відобразить інтерфейс перегортання як кнопок, тобто елементів управління Button, замість використання стандартних посилань (LinkButtons)), а також властивості ShowFirstPageButton і ShowLastPageButton в True – тим самим вони будуть включені разом з кнопками Next (Наступна) і Previous (Попередня).

Використання елементів управління ListView і DataPager в ASP.NET 3.5 - ASP.NET - Microsoft. NET - Програмування, исходники, операційні системи


Після натискання кнопки OK для закриття діалогового вікна Fields, декларативна розмітка елемента DataPager оновлюється і вже включає в себе інформацію DataPagerField. Більш того, Designer відображає інтерфейс перегортання як кнопок First / Previous / Next / Last.


Існують ще дві властивості DataPager, які нам необхідно встановити до того, як сторінку можна буде використовувати. Нам необхідно вказати з яким ListView оперує DataPager. Для цього встановіть властивість PagedControlID елемента DataPager в ID елемента ListView на сторінці. Далі, встановіть властивість PageSize елемента DataPager таким чином, щоб воно містило в собі число записів, які необхідно відобразити на одній сторінці в ListView (за замовчуванням значення дорівнює 10). Після того, як ви зробите всі дані зміни, декларативна розмітка вашого DataPager повинна виглядати таким чином:


<asp:DataPager ID=”ProductListPagerSimple” runat=”server”
   PagedControlID=”ProductList” PageSize=”5″>
   <Fields>
      <asp:NextPreviousPagerField ButtonType=”Button” ShowFirstPageButton=”True”
                  ShowLastPageButton=”True” />
   </Fields>
</asp:DataPager> 


Маючи даний інтерфейс перегортання відвідайте сторінку в браузері. Як демонструє наступний скріншот, ListView відображає всього 5 записів на одній сторінці (тому, що властивість PageSize встановлено 5). Більш того, кнопки First (перша) і Previous (остання) не активовані оскільки ми знаходимося на першій сторінці.

Використання елементів управління ListView і DataPager в ASP.NET 3.5 - ASP.NET - Microsoft. NET - Програмування, исходники, операційні системи


Інтерфейс перегортання на даному зображенні відображений прямо над інформацією ListView. Пам’ятайте про те, що один єдиний ListView може включати в себе кілька елементів управління DataPager. Ми можемо модифікувати інтерфейс перегортання таким чином, щоб він також відображався в нижній частині ListView просто додавши елемент управління DataPager під ListView і встановивши його властивості PagedControlID і PageSize в ті ж значення, які містить інший елемент управління DataPager.


Визначення декількох DataPagerField в DataPager


Попередній приклад демонструє використання єдиного DataPagerField в DataPager (а саме, NextPreviousPagerField). DataPager досить гнучкий, щоб дозволити наявність безлічі DataPagerFields. Дана гнучкість дозволяє нам створювати різнорідні інтерфейси перегортання, такі як інтерфейс перегортання з номерами сторінки, а також кнопками First (перша) і Last (остання).


Щоб створити такий інтерфейс, додайте DataPager до сторінки і налаштуйте його властивості PagedControlID і PageSize. Далі викличте діалогове вікно Fields і додайте три DataPagerFields: NextPreviousPagerField, за яким слід NumericPagerField, а за ним слід NextPreviousPagerField. Налаштуйте властивості NextPreviousPagerField таким чином, щоб була відображена тільки кнопка First – аналогічно настройте властивості останнього NextPreviousPagerField таким чином, щоб була відображена тільки кнопка Last. Ви можете змінити текст кнопок First і Last на ваш смак – я ж використовував << для кнопки First і >> – для Last.


<asp:DataPager ID=”ProductListPagerCombo” runat=”server”
   PagedControlID=”ProductList” PageSize=”5″>
   <Fields>
      <asp:NextPreviousPagerField FirstPageText=”<<” ShowFirstPageButton=”True”
             ShowNextPageButton=”False” ShowPreviousPageButton=”False” />
      <asp:NumericPagerField />
      <asp:NextPreviousPagerField LastPageText=”>>” ShowLastPageButton=”True”
             ShowNextPageButton=”False” ShowPreviousPageButton=”False” />
   </Fields>
</asp:DataPager> 


Кінцевим результатом є гібрид інтерфейсів перегортання, як це продемонстровано на наступному зображенні. Зверніть увагу на те, що сторінка має два DataPagers. Той, що зверху має кнопками First / Previous / Next / Last, доданими в минулому прикладі. Той, що в нижній частині є гібридним.

Використання елементів управління ListView і DataPager в ASP.NET 3.5 - ASP.NET - Microsoft. NET - Програмування, исходники, операційні системи


Створення спеціалізованого інтерфейсу перегортання з TemplatedPagerField


Якщо ні NumericPagerField, ні NextPreviousPagerField не відповідають вашим вимогам, то ви можете створити спеціалізований інтерфейс перегортання використовуючи TemplatedPagerField. За допомогою даного поля ви, як розробник, відповідальні за створення інтерфейсу перегортання, а також за визначення моменту, коли користувач взаємодіє з інтерфейсом та оновлення DataPager і ListView у відповідь на його дії.


Давайте створимо інтерфейс перегортання, який перераховує доступні сторінки як ListItems в елементі управління DropDownList, тим самим дозволяючи користувачеві переходити на конкретну сторінку вибравши її номер в списку, що випадає. Для цього додайте елемент управління DataPager на сторінку і налаштуйте його DataPagerFields, при цьому додаючи також TemplatedPagerField. Вміст шаблона може бути визначено безпосередньо в розмітці або за допомогою опції Edit Templates (Редагувати шаблони) в смарт теге DataPager. У будь-якому випадку додайте елемент управління DropDownList до шаблону і встановіть його ID в PageJump, а також властивість AutoPostBack в True.


Нашим наступним завданням буде заповнення списку (DropDownList) номерами різних сторінок. Оскільки це повинно бути виконано кожен раз як ListView буде прив’язаний до його джерела даних, вам необхідно створити обробник для події DataBound елемента ListView і додати в нього наступний код:


Protected Sub ProductList_DataBound(ByVal sender As Object, ByVal e As System.EventArgs) Handles ProductList.DataBound
   Dim currentPage As Integer = (DataPagerID.StartRowIndex / DataPagerID.PageSize) + 1
   Dim totalPages As Integer = DataPagerID.TotalRowCount / DataPagerID.PageSize


“Заповнення DropDownList
   Dim ddl As DropDownList = CType(DataPagerID.Controls(0).FindControl(“PageJump”), DropDownList)
   If ddl.Items.Count = 0 Then
“Додавання елемента списку для кожної сторінки
      For i As Integer = 1 To totalPages
         ddl.Items.Add(i.ToString())
      Next


“Установка DDL у відповідне значення сторінки
      ddl.Items.FindByValue(currentPage.ToString()).Selected = True
   End If
End Sub 


Код починає обробку номера поточної сторінки, а також загального числа сторінки – дана інформація отримана з властивостей StartRowIndex, PageSize і TotalRowCount елемента DataPager.


Далі здійснюється посилання програмним шляхом нам PageJump DropDownList. Зверніть увагу, що для здійснення посилання на елемент управління в межах TemplatePagerField нам необхідно використовувати специфічний код: DataPagerID.Controls (0). FindControl (“controlID”). З якоїсь причини не існує властивості для елемента DataPager або його TemplatePagerField, яке дозволяло б здійснювати доступ до обробленого вмісту шаблону. Тому нам необхідно витончено обійти проблеми шляхом роботи безпосередньо через набір Controls. Цикл перераховує номери сторінок (від 1 до totalPages) і додає ListItem для кожної сторінки. Нарешті, вибирається елемент DropDownList з номером поточної сторінки.


При відвідуванні сторінки ви побачите, що інтерфейс DataPager включає в себе DropDownList з ListItem для кожної сторінки. Більш того, вибір іншої сторінки зі списку викликає постбек, але відображуване вміст не змінюється. Це відбувається тому, що нам потрібно також обробляти подія SelectedIndexChanged елемента DropDownList – тут ми повинні викликати метод SetPageProperties елемента DataPager, передаючи нові значення StartRowIndex і MaximumRows, тим самим він зможе оновити зовнішній вигляд елемента ListView.


Створення обробника події для елементу управління в межах шаблону вимагає додавання синтаксису OnEventName = EventHandler до декларативної розмітці елемента. Це можна додати вручну, або автоматично створити синтаксис, перейшовши до режиму Edit Templates і двічі клацнувши по DropDownList. У будь-якому випадку, як тільки обробник події буде створений, додайте наступний код:


Protected Sub PageJump_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs)
   Dim PageJumpDDL As DropDownList = CType(sender, DropDownList)
   Dim pageNo As Integer = Convert.ToInt32(PageJumpDDL.SelectedValue)


   Dim startRowIndex As Integer = (pageNo – 1) * ProductListPager.PageSize


   DataPagerID.SetPageProperties(startRowIndex, DataPagerID.PageSize, True)
End Sub 


Зазначений вище код починає роботу з програмною посилання на елемент управління PageJump (DropDownList) для того, щоб з’ясувати його значення SelectedValue. Необхідний номер сторінки використовується для підрахунку StartRowIndex і дана інформація (а також властивість PageSize елемента DataPager) передається в метод SetPageProperties елемента DataPager.


Кінцевим результатом виконаної роботи буде випадаючий список (DropDownList), що містить номер кожної сторінки. Зміна вибраної сторінки викликає запуск постбека і відображає інформацію вибраної сторінки.

Використання елементів управління ListView і DataPager в ASP.NET 3.5 - ASP.NET - Microsoft. NET - Програмування, исходники, операційні системи


Веселого програмування!

Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*