Використання XML і LINQ в елементах управління TreeView і ListView, Різне, Програмування, статті

У той час як все більше інформації зберігається в XML-форматі, веб-додатків необхідно мати можливість в інтерфейсі веб-сторінки здійснювати перегляд і редагування інформації, що зберігається в XML-файлі. Якщо інформація зберігається в файлі і має табличний вигляд, то ми можемо використовувати елементи керування DataGrid, GridView і Repeater. Але що робити, якщо XML-дані представлені більш ієрархічною структурою? Уявіть телефонну книгу компанії, яка рекурсивно структурується в філії та відділи. Як таку інформацію, яка може мати безліч вузлів і будь-яку кількість рівнів, відобразити і відредагувати за допомогою веб-сторінки?

У даній статті ми створимо веб-сторінку, яка буде відображати вміст телефонної книги всієї компанії, де інформація знаходиться в XML-файлі. Сторінка рекурсивно буде відображати XML-інформацію з телефонної книги за допомогою TreeView для того, щоб перераховувати філії та відділи, а також ListView – для перерахування співробітників, що належать обраному філії або відділу. Зокрема, ListView відобразить співробітників, що належать обраному філії, а також тих, хто належить усім відділам даної філії. (У наступній статті ми розглянемо спосіб розширення можливостей ListView, дозволивши користувачеві додавати, редагувати і видаляти записи в телефонній книзі.) Читайте далі, щоб дізнатися більше про це!


 






Робочий приклад програми доступний в кінці статті


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


Зверніть увагу на те, що багато елементів управління і принципи, обговорені у статті стали доступні в ASP.NET версії 3.5 – тому, програма не працюватиме в Visual Studio 2005 і в попередніх версіях. Якщо у вас немає Visual Studio 2008, то ви завжди можете завантажити та встановити безкоштовну версію Visual Web Developer 2008, яка може бути встановлена ​​поряд з іншими версіями Visual Studio.


Дослідження джерела XML-даних


Дана стаття демонструє спосіб відображення XML-даних у веб-сторінці за допомогою елементів управління TreeView і ListView. До того як ми приступимо до створення сторінки, давайте приділимо пару хвилин ісследованіію структури XML-даних, які ми збираємося показувати. Наступна XML-структура являє собою телефонну книгу співробітників компанії. Компанія складається з філій та відділів. Філія може складатися з відділів, а вони, в свою чергу, з інших відділів. Співробітники можуть належати будь філії або відділу.


XML-дані можуть виглядати наступним чином:

<?xml version=”1.0″ encoding=”utf-8″?>
<PhoneBook>
   <Branch id=”1″ name=”Northern Branch”>
      <Department id=”1″ name=”Marketing”>
         <Employee id=”1″ name=”Miroslav” telephone=”555-5555″ />
         <Employee id=”2″ name=”Scott” telephone=”555-1111″ />
         <Department id=”2″ name=”Advertising”>
            <Employee id=”3″ name=”Chris” telephone=”555-2222″ />
            <Employee id=”4″ name=”Bruce” telephone=”555-3333″ />
            <Employee id=”5″ name=”Sam” telephone=”555-4444″ />
         </Department>
      </Department>
      <Employee id=”6″ name=”Jisun” telephone=”555-9999″ />
   </Branch>
   <Department id=”3″ name=”Executive Team”>
      <Employee id=”7″ name=”Davis” telephone=”555-8888″ />
      <Employee id=”8″ name=”Kate” telephone=”555-9900″ />
   </Department>
</PhoneBook>

Зазначений вище XML код демонструє те, що існує північний філія (Northern Branch) з відділом маркетингу (Marketing). Співробітники Miroslav і Scott працюють у відділі Marketing. Відділ реклами (Advertising) і належить йому відділ маркетингу (Marketing) є місцями де працюють Chris, Bruce і Sam. Jisun працює в північному філіалі (Northern Branch), але він не належить якомусь певному відділу даної філії. У відділі виконавчих директорів (Executive Team) працюють Davis і Kate – вони також не належать жодному з філій.


Заповнення елемента управління TreeView XML-даними


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


Елемент управління XmlDataSource дозволяє вам з легкістю відображати XML-дані в TreeView. Почніть з долучення XmlDataSource на сторінку. Далі, встановіть його властивість DataFile таким чином, щоб воно вказувало на XML-файл джерело:

<asp:XmlDataSource ID=”treeSource” runat=”server” DataFile=”~/PhoneBook.xml” /> 

Сам по собі XmlDataSource не відображає нічого. Він просто здійснює запит XML-даних. Щоб вивести інформацію нам потрібно додати елемент керування TreeView і прив’язати його до XmlDataSource. Перетягніть елемент TreeView з Toolbox на сторінку і встановіть його властивість DataSourceID в ID елемента XmlDataSource (treeSource). Далі, створіть TreeNodeBinding для кореневого елемента PhoneBook і TreeNodeBindings для дочірніх елементів Branch і Department. TreeNodeBinding вказує TreeView який XML-елемент і як він повинен відобразити.

<asp:TreeView ID=”tvwPhoneBook” runat=”server” DataSourceID=”treeSource” 
   AutoGenerateDataBindings=”False”>
   <DataBindings>
       <asp:TreeNodeBinding DataMember=”PhoneBook” Text=”Phone Book” />
            <asp:TreeNodeBinding DataMember=”Branch”
                   FormatString=”Branch “{0}”” TextField=”name” />
            <asp:TreeNodeBinding DataMember=”Department”
                   FormatString=”Dpt. “{0}”” TextField=”name” />
   </DataBindings>
</asp:TreeView> 

Запустивши сторінки ми можемо побачити TreeView з вузлами, відповідними XML-структурі філій та відділів. Зверніть увагу на те, що TreeView не включає в себе елементи Employee. Це тому, що в TreeNodeBinding немає елементів Employees.



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

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


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

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

Ваш отзыв

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

*

*