Реалізація ASP.NET сторінок каталогу автотоварів

 


 


Міністерство освіти і науки України

Національний лісотехнічний університет України

Факультет Технологічний

Кафедра Обчислювальної техніки і моделювання технологічних процесів

 

 

 

 

 

 

 

КУРСОВА РОБОТА

на тему:

Реалізація ASP.NET сторінок каталогу автотоварів

 

 

 

 

 

 

 

Виконав:

ст. гр. ІТПс-51         М. А. Муратов

Керівник:              А. В. Бакалець

 

Члени комісії:

1.______________________                                                                  

2.______________________                                           

 

 

 

Львів – 2010

 

Завдання №18

Тема:  Реалізація ASP.NET сторінок каталогу авто товарів

Теоретична частина

Навігація на сайті за допомогою карти сайту (SiteMap)

Практична частина

Необхідно розробити ASP.NET сторінки та структуру бази даних, які дають змогу реалізувати операції Створення, Зчитування, Модифікації та Видалення інформації про авто товари. База даних повинна зберігати наступну інформацію про наявність автотоварів:

    • фотографія автотовару;
    • параметри, які необхідні для опису;
    • відомості про товар (короткий опис);
    • виробник;
    • радіус (диска чи колеса);

ASP.NET сторінки повинні забезпечувати:

    • відображення списку авто товарів;
    • відображення списку автотоварів вказаного;
    • додавання даних про автотовари, які поступають;
    • видалення даних про автотовари;
    • редагування даних про автотовари;

ASP.NET сторінки повинні використовувати:

    • валідацію для перевірки коректності інформації, яку вводить користувач;
    • експорт даних в XML-файл (списку автотоварів вказаного);
    • файл web.config для збереження налаштувань веб-проекту;
    • елемент управління із теоретичної частини;
    • механізм мастер-сторінок для уніфікації зовнішнього вигляду сторінок.

Описати роботу розроблених ASP.NET сторінок та структуру бази даних.

 

Зміст

 

Вступ

Без перебільшень, ASP.NET є найбільш повною платформою для Web – розробки із всіх тих які коли не будь створювались. ASP.NET – це частина технології .NET, яка використовується для написання потужних клієнт-серверних інтернет-додатків. Вона дозволяє створювати динамічні сторінки HTML. ASP.NET виникла в результаті об’єднання більш старої технології ASP (активні серверні сторінки) і .NET Framework. Вона містить безліч готових елементів керування, застосовуючи які, можна швидко створювати інтерактивні Web-сайти, а також розширювати їх, створювати свої власні елементи керування з повторним використанням. Також можна використати сервіси, надані іншими сайтами, прозоро для користувачів власного сайту. Загалом, можливості ASP.NET обмежені тільки уявою.

Величезною перевагою, на мою думку, є те, що дана технологія дає змогу формувати сторінки на скомпільованій програмі, а також використовувати одну з найпотужніших мов програмування нашого часу C#. ASP.NET – це не мова, а технологія, на відміну від PHP, а використання таких мов високого рівня як C# чи Visual Basic дає змогу розробляти Web-додатки високого рівня. ASP.NET – це не продовження ASP, це концептуально нова технологія Microsoft, створена в рамках ідеології .NET. Ключовими сторонами .NET є масштабованість, міжмовна взаємодія й поняття безпечне програмування» (safe-programming). PHP – навпаки, відкрита й безкоштовна мова, яка вбудовується у вигляді блоків на сторінку. Зрозуміло, розшифровувати сьогодні PHP як Personal Home Page було б неправильно, але відгуки минулого дають про себе знати й до сьогодні. PHP – скриптова мова, створена винятково для динамічного виводу HTML. Це не означає, що на ньому не можна створити великий проект. Це значить, що створити великий проект на PHP дорого й важко. Щоб навчитися писати більш-менш працездатні скрипти, достатньо одного єдиного підручника. З ASP.NET такий фокус не пройде. Без Visual Studio, MSDN й іноді – доступу в Інтернет, робити немає чого. Більшу частину часу розробник витрачає на вивчення MSDN. А на той час, коли він вивчить модель класів і всі необхідні йому функції, Microsoft напевно придумає щось нове.

На сьогоднішній день щодо розробки сайтів народ надає перевагу PHP і ASP.NET. Як студент можу сказати що перевагу для заробітку грошей надаю PHP оскільки він безкоштовний. Але для розробки серйозних сайтів великого масштабу над яким працює не одна людина, а іноді й ціла команда, перевагу надають ASP.NET. В .NET є можливість міжмовної взаємодії, що дозволяє програмістам писати проект на різних мовах високого рівня. Всі роки навчання в університеті ми вивчали програмування під Windows, працювали над дизайном користувацього інтерфейсу, вивчали об’єктно-орієнтовне програмування. Так от розробники Microsoft ввели в технологію ASP.NET нову еру Web Forms. Аналогія взята з Windows Form. Щодо ООП тут його використання в повному обсязі, чого не скажеш про PHP.

 

Розділ 1. Дослідження стану предметної області

1.1. Програмні засоби

1.1.1. Навігація на сайті за допомогою карти сайту (SiteMap)

Клас SiteMap — це збурігаюче в пам’ятi представлення структури переходів вузла карти веб-сайту. Цей клас не можна наслідувати. Карти сайту використовуються з елементами керування такими як SiteMapDataSource і SiteMapPath щоб відобразити ефективний інтерфейс, який дозволяє користувачам переміщуватись по сайту. Об’єкт SiteMap є компонентом середовища,  підтримуючий структуру переходів веб-сайту ASP.NET, яка надає доступ тільки для зчитування інформації карти веб-сайту для сторінки і розробників елементів керування з використанням переходів, і елементів керування SiteMapDataSource.

Клас SiteMap виконує декілька функцій:

    • Надає кореневий вузол ієрархії структури веб-сайту. В структурі може бути лише один кореневий вузол.
    • Визначає постачальника даних.
    • Відслідковує всі об’єкти постачальника, які використовуються при створенні об’єкту SiteMap.

Клас SiteMap є контейнером для колекції об’єктів SiteMapNode. Однак, клас SiteMap не підтримує зв’язку між вузлами, тобто, він передає дану функцію постачальникам карти веб-сайту. Клас SiteMap виступає в якості інтерфейсу для інформації структури переходів веб-сайту (в формі об’єктів SiteMapNode). Він відслідковує постачальників, засобами яких можна отримати доступ до даних структури переходів веб-сайту, і надає колекцію Providers постачальників. Постачальник може зберігати інформацію карти веб-сайту в любій формі. Оскільки, він розширює абстрактний клас SiteMapProvider, з нього може бути ініціалізований клас SiteMap.

В якості постачальника по замовчуванню для класу SiteMap використовується клас XmlSiteMapProvider, який працює з файлом конфігурації XML Web.sitemap. Однак, користувач може написати власний SiteMapProvider, який буде використовуватись для ініціалізації карти веб-сайту.

Клас SiteMap пропонує тільки статичні елементи для підвищення продуктивності і постійно доступний на даному веб-сайті з веб-форми або серверного веб-елемента керування.

1.1.2. Створення навігаційної системи

Тепер, необхідно відшукати спосіб створення системи меню, зручне в обслуговуванні і яке буде зрозуміле користувачу. Для цього опції меню вказуються в XML-файлі карти сайту. Головний файл карти сайту для всього сайту називається web.sitemap який являє собою ієрархічну структуру вузлів <SiteMapPath>, який має атрибути title і url. Нижче наведено код карти сайту:

<?xml version=»1.0» encoding=»utf-8» ?>

<siteMap xmlns=”http://schemas.microsoft.com/AspNet/SiteMap-File-1.0” enableLocalization=”true” >

<siteMapNode url=”” title=”” description=””>

<siteMapNode url=”Home.aspx” title=”Домашня” description=”” />

<siteMapNode url=”~/Shop.aspx” title=”Магазин” description=”” />

<siteMapNode url=”~/About.aspx” title=”Довідка” description=”” />

<siteMapNode url=”~/Articless.aspx” title=”Статті” description=”” />

<siteMapNode url=”~/Contact.aspx” title=”Контакти” description=”” />

<siteMapNode url=”~/FAQ.aspx” title=”Про нас” description=”” />

... ... ... ... ... ... ... ... ... ... ... ... 

</siteMapNode>

</siteMap>

Після того як цей файл визначено, можемо його використати як джерело даних для нових елементів керування ASP.NET, таких як Menu, TreeView. ASP.NET 2.0 також пропонує нові не візуальні елементи керування, які називаються елементами керування DataSource і дозволяють встановлювати зв’язок з базою даних, XML-файлом і класом компонентом. Ці елементи керування використаємо з графічними елементами, які прив’язуються і відображають дані, але для подальшої візуалізації меню будемо використовувати технологію CSS-sprites, з допомогою якої меню набуде більш привабливого вигляду. Одним з таких елементів керування DataSource є елемент керування SiteMapDataSource, який призначений спеціально для файлу сайту web.sitemap і визначається він наступним чином:

<asp:SiteMapPath

ID=”SiteMapPath1” 

runat=”server”

meta:resourcekey=»SiteMapPath1Resource1» />

Елемент керування Menu дозволяє створювати популярні візуалізації. Тепер прив’яжемо цей елемент керування до елемента керування SiteMapDataSource:

<asp:Menu ID=»mnuHeader» runat=»server» CssClass=»headermenulink» DataSourceID=»SiteMapDataSource1»

Orientation=”Horizontal” MaximumDynamicDisplayLevels=”0” SkipLinkText=”” StaticDisplayLevels=”2”

meta:resourcekey=”mnuHeaderResource1” />

Файл таблиці стилів знаходиться в кореневій папці проекту (“style.css”). Переглянути всі стилі які підключаються можна там, їх багато, тому їх опущу щоб приділити увагу більш важливим питанням, за винятком тих стилів які використані для візуалізації меню.

Щоб створити красиве меню намалюємо в графічному редакторі Adobe Photoshop таку картинку:

Рис. 1.1. Картинка для візуалізації меню

 

Видно з рисунку 1.1. що це є одна суцільна картинка, після чого цілком справедливо має місце питання про те як бути з кожним словом, яке відображено на малюнку, як зробити, щоб при кліку на кожне з слів відбулося пере направлення на потрібну сторінку .aspx. Для цього використаємо однe з правил CSS, а саме background-position, і для кожного пункту меню покажемо картинку за наступними координатами:

Рис. 1.2. Координати для кожного з пунктів меню.

Аналогічним чином обробляємо подію .hower (тобто коли курсив буде наведений на один з пунктів меню) картинка даного пункту меню зміститься трішечки в низ.

Тепер в файлі style.css напишемо наступний код:

#wraper

{

margin: 0 auto;

width: 560px;

}

#navbar

{

width: 560px;

list-style: none;

}

ul#navbar li

{

display: inline;

}

ul#navbar li a

{

float: left;

height: 70px;

background: url(images/menu2.png) no-repeat;

text-indent: -9999px;

}

ul#navbar li a.home

{

width: 65px;

background-position: -5px 0px;

}

ul#navbar li a.home:hover

{

width: 65px;

background-position: 0px -69px;

}

ul#navbar li a.shop

{

width: 65px;

background-position: -85px 0px;

}

ul#navbar li a.shop:hover

{

width: 65px;

background-position: -75px -69px;

}

ul#navbar li a.about

{

width: 65px;

background-position: -150px 0px;

}

ul#navbar li a.about:hover

{

width: 65px;

background-position: -150px -69px;

}

ul#navbar li a.articless

{

width: 65px;

background-position: -217px 0px;

}

ul#navbar li a.articless:hover

{

width: 65px;

background-position: -217px -69px;

}

ul#navbar li a.contact

{

width: 65px;

background-position: -285px 0px;

}

ul#navbar li a.contact:hover

{

width: 65px;

background-position: -285px -69px;

}

ul#navbar li a.faq

{

width: 65px;

background-position: -358px 0px;

}

ul#navbar li a.faq:hover

{

width: 65px;

background-position: -358px -69px;

}

 

1.1.2. ADO.NET

Величезна кількість комп’ютерних додатків – як настільних, так і орієнтованих на Web – керуються даними. Ці додатки в основному зосередженні на зчитуванні, відображенні і модифікації даних. Зчитування і обробка даних здається достатньо прямолінійним завданням, але за останні багато років це все змінювалось. Розробники перейшли від простих клієнтських додатків з локальними базами даних, до розподілених систем, заснованих на централізованих базах даних і виділених серверах. В той же час розвивалась технологія доступу до даних .NET Framework, яка включає свою власну технологію доступу до даних – ADO.NET. ADO.NET складається з керованих класів, дозволяючи додаткам .NET підключатись до джерел даних (зазвичай до реляційних баз даних). Маленьке чудо ADO.NET, суть якої в тому, що ця технологія дозволяє писати більш-менш однаковий код доступу до даних, як в Web-додатках, так і в клієнт-серверних настільних базах даних.

ADO.NET використовує архітектуру, яка коливається навколо невеликого числа концепцій, таких як об’єкти Connection, Command і DataSet. Однак, архітектура ADO.NET суттєво відрізняється від класичного ADO. Одне із ключових відмінностей між ADO і ADO.NET є в тому, що вони працюють з різними джерелами даних. В ADO програмісти завжди використовують загальний набір об’єктів, незалежно від лежачих в їх основі джерел даних. Наприклад, якщо потрібно зчитати запис в базі даних Oracle, використовується той самий клас Connection, що застосовується для виконання того ж самого завдання в SQL Server. Це не стосується ADO.NET, який використовує постачальників даних. Постачальник даних (data provider) – це набори класів ADO.NET, які дозволяють отримати доступ до бази даних визначеного типу. По суті, це міст між двома додатками і джерелами даних. Класи, які складають постачальника даних, включають наступне:

  • Connection. Цей об’єкт використовується для встановлення з’єднання з джерелом даних.
  • Command. Цей об’єкт використовується для виконання команд SQL і процедур.
  • DataReader. Цей об’єкт є собою швидкий доступ тільки для читання даних.
  • DataAdapter. Цей об’єкт виконує два завдання. Перше – наповнення DataSet (автономна колекція таблиць та відношень) інформацією, зчитаною з джерела даних. Друге – його можна використовувати для застосовування змін даних до джерела даних у відповідності з модифікаціями, проведеними в DataSet, тобто оновлення бази даних.

ADO.NET не містить об’єкти узагальнені постачальниками даних. Замість цього він включає набір спеціалізованих постачальників для різних джерел даних. Кожен постачальник має специфічну реалізацію класів Connection, Command, DataReader і DataAdapter, оптимізованих для конкретних реляційних систем керування базами даних (СУБД). Наприклад, якщо потрібно створити підключення до бази даних SQL Server, використовується клас з’єднання по імені SqlConnection.

Одна із ключових ідей, які лежать в основі цієї моделі постачальника ADO.NET, є можливість її розширення. Іншими словами, розробники можуть створювати свої власні постачальники для відповідних типів даних. .NET Framework зв’язаний з невеликим набором із чотирьох постачальників:

  • Постачальник SQL Server. Надає оптимізований доступ до баз даних SQL Server (версії 7.0 і вище).
  • Постачальник OLE DB. Надає доступ до любого джерела даних, котрий має драйвер OLE DB. Це включають бази даних SQL Server попередніх версій.
  • Постачальник Oracle. Надає оптимізований доступ до баз даних Oracle (версії 8 і вище).
  • Постачальник ODBC. Надає доступ любому типу джерела даних, який має драйвер ODBC.

На рис. 1.2. показано рівні моделі постачальників ADO.NET.

Рис. 1.2. модель постачальників ADO.NET.

 

  Розділ 2. Створення проекту ASP.NET

2.1. Засоби розробки Visual Studio

2.1.1. Створення проекту в Visual Studio

При першому запуску IDE-середовища відображається початкова сторінка. На ній доступні різні користувацькі опції, а також посилання на он-лайн-інформацію, таку як останні статті MSDN, які постійно оновлюються та поповнюються. Для створення нового додатку ASP.NET потрібно обрати File (Файл) => команду New (Новий ) => New Website (Новий Web – сайт). Visual Studio відобразить діалогове вікно New Web Site (Новий Web – сайт), як показано на рис. 2.1.

рис. 2.1. створення Web-сайту в Visual Studio

У вікні New Web Site можна вказати наступне:

  • Шаблон. Визначає файли, з яких буде починатись Web-сайт. Visual Studio підтримує два типи базових додатків: ASP.NET-додаток Web-сайтів і Web-служб. Ці додатки скомпільовані і виконані аналогічним чином. Фактично можна додавати Web-сторінки в додаток Web-служб, а також Web-служби в звичайний Web-додаток. Єдина відмінність в файлах, створених в Visual Studio по замовчуванню. В Web-додатку ви починаєте роботу з зразка Web-сторінки а в Web-службі із зразка Web-служби. Ще Visual Studio містить більш складні шаблони типів сайту, і можна створювати свої шаблони для визначених типів сайтів, чи завантажувати їх із мережі від різних постачальників.
  • Місце положення. Визначає місце положення зберігання файлів Web-сайту. Зазвичай вибирається File System (Файлова система) і потім вказуєте папку на локальному комп’ютері або шлях. Проте також можна редагувати Web-сайт безпосередньо по HTTP або FTP (File Transfer Protocol – протокол передачі файлів). Це корисно при виконанні редагування Web-сайту на віддаленому Web-сервері. З іншого боку, це також тягне за собою додаткові непродуктивні витрати. Звичайно, не слід редагувати безпосередньо виробничий Web-сервер, оскільки зміни є автоматичними і повернення в попередній стан непередбачено.
  • Мова. Визначає мову програмування .NET, яка використовується для кодування Web-сайту. Вибирана мова є мовою по замовчуванням для проекту. Це означає, що можна явно додавати Web-сторінки, написанні на Visual Basic, до Web-сайту на С# і навпаки (властивість, не доступна в попередніх версіях Visual Studio).

Замість введення місця розташування вручну, можна клацнути на кнопці Browse (Огляд), після чого Visual Studio відобразить діалогове вікно Choose Location (Вибір місця розташування). Вздовж лівої сторони діалогового вікна Choose Location є чотири кнопки, що дозволяють з’єднуватися з різними типами місць розташувань:

  • File System (Файлова система). Це найпростіший вибір – необхідно лише проглянути дерево дисків і каталогів або ж спільно використаних ресурсів, що надаються іншими комп’ютерами мережі. Якщо потрібно створити новий каталог для власного застосування, просто клікаєм на піктограмі Create New Folder (Створити нову папку) над верхнім правим кутом дерева каталогів. (Також можна створити в Visual Studio каталог, додавши ім’я нового каталогу в кінці шляху.)
  • Local IIS (Локальний сервер). Цей вибір дозволяє проглянути віртуальні каталоги, доступні за допомогою програмного забезпечення Web-хостінгу HS, яке функціонує на поточному комп’ютері.
  • FTP Site (FТР-сайт). Ця опція не так зручна, як пошук каталогу – перед підключенням необхідно буде ввести всю інформацію про з’єднання, включаючи FTP-сайт, порт, каталог, ім’я користувача і пароль.
  • Remote Web Server (Віддалений Web-сервер). Ця опція – доступ до Web-сайту по визначеному URL (Unified Resource Locator – уніфікований вказівник інформаційного ресурсу) з використанням HTTP. На рис. 2.2. показані всі перераховані типи місць розташувань:

рис. 2.2. Типи місць розташувань

Після того, як зроблено вибір клікаєм Open (відкрити), Visual Studio повернеться до діалогового вікна створення Web – сайту.

Розділ 3. Реалізація ASP.NET сторінок каталогу автотоварів

3.1. Створення дизайну на основі шаблону

Першим кроком при створенні сайту є розробка візуального дизайну, а саме, схеми сайту і використання графіки. Ця візуальна архітектура визначає “зовнішній вигляд і поведінку” сайту з точки зору користувача. Спочатку потрібно вирішити, яке враження хочеться побачити в користувачів про сайт, а потім приступати до написання коду. Одною із основних деталей, є меню та можливість навігації, зображення і організація елементів на сторінці. Меню має бути інтуїтивно зрозуміле і підтримуватись навігацією, тобто користувач має бачити на якій сторінці він знаходиться. Перш ніж приступати до написання коду, слід ознайомитись із спеціальними засобами які доступні в ASP.NET, щоб мати можливість скористатись результатами роботи, зробленої розробниками фірми Microsoft. Добре продумана з технічної точки зору архітектура підвищує ймовірність повторного використання коду і робить це зручним в плані обслуговування. Тепер розглянемо функціональні можливості майстер сторінки (master pages). Ці сторінки застосовуються для поєднання функціональних можливостей в шаблони, які надають загальні елементи для використання їх на декількох сторінках.

Багато розробників починають писати код, не звертаючи увагу на головне завдання сайту: дизайн сайту та зрозумілий і зручний інтерфейс для користування та його обслуговування. Користувацький інтерфейс – це перше що бачить кінцевий користувач. Тому якщо йому не сподобається інтерфейс чи зручність використання, скоріш за все сайт на хорошу та стабільну відвідуваність не претендує. Процес написання рівня користувацького інтерфейсу не означає тільки написання HTML коду для сторінки. Після того як буде розроблена домашня сторінка сайту, розробка інших не займе багато часу, тому що домашня сторінка визначає схему (layout) і елементи навігації, які я застосую для всього сайту.

На практиці будуть реалізовані наступні кроки:

  • Привабливий графічний шаблон (схему), виглядаючи однаково як в браузері Internet Explorer, так і в Firefox та інших браузерах.
  • Спосіб, який дозволить застосувати даний шаблон для всіх інших сторінок сайту, не копіюючи і не вставляючи весь код в кожну сторінку фізично.
  • Навігаційну систему.
  • Спосіб, дозволяючи не лише застосовувати для всіх сторінок сайту загальний дизайн, а й загальну поведінку.
  • Технологію CSS-sprites, яка надасть красивий вигляд меню.

3.1.1. Проектування схеми сайту

Коли створюється дизайн сайту, зазвичай створюється модель при допомозі якого-небудь графічного редактору, наприклад Adobe Photoshop, щоб подивитись як може виглядати сайт в кінцевому результаті, перш ніж приступати до створення визначеної схеми чи коду HTML. Створивши таку модель, можна показати її потенційним користувачам, спеціалістам по тестуванню і керівництву, щоб отримати більш детальну інформацію. Це може бути простий малюнок, такий як на рис. 3.1., на якому зображені блоки, в яких будуть розміщуватись різні частини сторінки.

Рис. 3.1. Графічне представлення схеми сайту

ASP.NET 2.0 пропонує нову функціональну можливість, яка називається майстер-сторінка (master-page), за допомогою якої можна визначати загальні області, які будуть присутні на кожні сторінці, яка наслідує цю майстер-сторінку, подібно до верхніх, нижніх колонтитулів. Майстер-сторінка дозволяє розміщувати код загальної схеми в один файл і змушувати його візуально унаслідуватись на всі сторінки. Майстер-сторінка містить загальну схему сайту. Сторінки можуть унаслідуватись від майстер-сторінки і розміщувати свої власні дані в тих місцях, де на майстер-сторінці знаходиться елемент керування Content Placeholder. Майстер-сторінка має розширення “.master” і в принципі подібна на користувацький елемент керування. Проста сторінка містить на початку директиву “@ Page” а майстер-сторінки “@ Master”:

<%@ Master Language=”C#” AutoEventWireup=”true” CodeFile=”MasterPage.master.cs” Inherits=”MasterPage” %>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head runat=”server”>

<meta http-equiv=”Content-Type” content=”text/html; charset=windows-1252” />

<title>Автотовари</title>

</head>

<body>

<form id=”Main” runat=”server”>

<asp:ContentPlaceHolder ID=”MyContent” runat=”server”>

</asp:ContentPlaceHolder>

</form>

</body>

</html>

Ця сторінка подібна на стандартну, за виключенням того, що на початку директива @Master, а на місці, де в .aspx-сторінок додається їх власне вмістище, в неї оголошуються ContentPlaceHolder. Під час виконання ,Майстер-сторінка і сторінка вмістимого будуть поєднані, а це означає, що оскільки майстер-сторінка визначає дескриптори <html>, <head>, <body>, <forms>, сторінкам вмістимого цього робити не потрібно.

<%@ Page Language=”C#” MasterPageFile=”~/MasterPage.master” AutoEventWireup=”true”

CodeFile=”AboutUs.aspx.cs” Inherits=”AboutUs” Title=”…” %>

<asp:Content ID=”Content1” ContentPlaceHolderID=”MyContent” Runat=”Server”>

</asp:Content>

Першим головним моментом тут є те, що в директиві @Page встановлюється значення для атрибуту MasterPageFile. Це значення – це віртуальний шлях до майстер-сторінки, котра повинна використовуватись. Дані які містить сторінка розміщуються в елемент керування Content, значення ContentPlaceHolderID повинно відповідати ідентифікатору одного з елементів ContentPlaceHolder майстер-сторінки. На сторінці вмістимого крім Content розміщувати нічого не можна.

На рис. 3.2. функціональна можливість майстер-сторінки показана в графічному вигляді.

Рис. 3.2. Майстер-сторінка під час проектування і під час виконання

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

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>Untitled Page</title>

    <link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" />

    <link rel="stylesheet" href="style_ie.css" type="text/css" media="screen, projection" />

</head>

<body>

    <form id="form1" runat="server">

    <!-- шапка -->

    <div id="header">

        <div id="loginBox">

            <div style="right: 0px; top: 0px; padding: 3px 3px 3px 3px">

                <asp:LoginView ID="LoginView1" runat="server">

                    <AnonymousTemplate>

                        <a href="RegisterPage.aspx">зареєструватись</a><br />

                        <a href="LoginPage.aspx">"Залогінитись"</a><br />

                    </AnonymousTemplate>

                    <LoggedInTemplate>

                        <asp:LoginName ID="LoginName1" FormatString="Hello {0}" runat="server" />

                        <asp:LoginStatus ID="LoginStatus1" runat="server" />

                        <br />

                        <a href="EditProfile.aspx">"Редагувати профіль"</a><br />

                        <a href="Adminka.aspx">Адмін</a>

                    </LoggedInTemplate>

                </asp:LoginView>

            </div>

        </div>

        <div id="im">

        </div>

        <hr style="color: Red; margin-bottom: 0px;" />

    </div>

    <!-- левый вертикальный -->

    <div id="left">

        <asp:ObjectDataSource ID="Urldata" runat="server" SelectMethod="GetAllSite" TypeName="BLL_leftCol">

        </asp:ObjectDataSource>

        <div>

            <img id="Img17" style="position: fixed; float: left; padding-left: 0px;" src="images/vertex2.png"

                runat="server" />

            <img src="images/leftCollMenu2.png" style="margin-right: 0px;" runat="server" />

            <a href="http://skillcoding.com/">

                <img style="border: solid 1px gray;" id="Img1" src="images/skillcoding.png" runat="server" /></a><br />

            <br />

            <a href="http://www.techdays.ru/">

                <img style="border: solid 1px gray;" id="Img2" src="images/techdays.png" runat="server" /></a><br />

            <br />

            <a href="http://www.intuit.ru/">

                <img style="border: solid 1px gray;" id="Img3" src="images/intuit.png" runat="server" /></a><br />

            <br />

            <a href="http://www.templatemonster.com/">

                <img style="border: solid 1px gray;" id="Img4" src="images/template.png" runat="server" /></a><br />

            <br />

            <a style="margin-left: 5px;" href="http://www.football.ua/">

                <img style="border: solid 1px gray;" id="Img5" src="images/football.png" runat="server" /></a><br />

            <br />

            <a style="margin-left: 5px;" href="http://coding-plus.com/">

                <img style="border: solid 1px gray;" id="Img6" src="images/codingplus.png" runat="server" /></a><br />

            <br />

            <a style="margin-left: 5px;" href="http://winforms.ru/">

                <img style="border: solid 1px gray;" id="Img7" src="images/winforms.png" runat="server" /></a><br />

            <br />

        </div>

        <div style="border: solid 1px gray;" class="diwersion">

            <asp:Repeater runat="server" ID="Repeater1" DataSourceID="Urldata">

                <HeaderTemplate>

                    <div style="width: 185px; margin: 0 auto;">

                        <img src="images/leftCollMenu.png" runat="server" />

                    </div>

                </HeaderTemplate>

                <ItemTemplate>

                    <div style="width: 185px; padding-bottom: 5px; margin: 0 auto;">

                        <a style="font-size: medium; padding-left: 8px;" href="<%# Eval("Url")%>">

                            <%# Eval("Description")%></a>

                    </div>

                </ItemTemplate>

            </asp:Repeater>

        </div>

    </div>

    <!-- правый вертикальный -->

    <div id="right" style="padding: 2px 2px 2px 2px;">

        <div>

            <img id="Img8" src="images/leftCollMenu2.png" runat="server" />

            <a style="margin-right: 5px;" href="http://auto-tuning.in.ua/index.php?cPath=449">

                <img style="border: solid 1px gray;" id="Img9" src="images/sesija.png" runat="server" /></a><br />

            <br />

            <a href="http://www.techdays.ru/">

                <img style="border: solid 1px gray;" id="Img10" src="images/techdays.png" runat="server" /></a><br />

            <br />

            <a href="http://www.intuit.ru/">

                <img style="border: solid 1px gray;" id="Img11" src="images/intuit.png" runat="server" /></a><br />

            <br />

            <a style="margin-left: 5px;" href="http://www.templatemonster.com/">

                <img style="border: solid 1px gray;" id="Img12" src="images/template.png" runat="server" /></a><br />

            <br />

            <a style="margin-left: 5px;" href="http://www.football.ua/">

                <img style="border: solid 1px gray;" id="Img13" src="images/football.png" runat="server" /></a><br />

            <br />

Реалізація ASP.NET сторінок каталогу автотоварів