Редагування Web-документів

Web-форми і HTML-документи можна редагувати в графічному режимі з використанням "Drag & Drop", як звичайні Windows-форми, або в текстовому вигляді. Для перемикання між режимами достатньо клацнути на ярлички Design і Source, розташовані внизу вікна документа ( Мал. 2.7 ).

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

Для демонстрації режимів роботи зі сторінкою розглянемо приклад створення найпростішої сторінки Web-додатків, що складається з кнопки, при натисканні на яку у вікні Web-браузер виводиться текст "Це просте застосування ASP .NET".

Для реалізації даного прикладу скористаємося створеним раніше порожнім додатком. Помістимо в файл Default.aspx кнопку. Зробити це можна двома різними способами.

1. Перетягнути кнопку з вікна Toolbox в вікно, що містить код сторінки.

Для виконання цієї операції необхідно відобразити у вікні редактора файлу .aspx вихідний код файлу, а потім перетягнути з панелі Toolbox в потрібне місце сторінки кнопку. В результаті на сторінці буде розміщений код кнопки, як показано на Мал. 2.9 .

2. Перетягнути кнопку з вікна Toolbox в вікно, що містить зображення дизайну сторінки.

Для виконання цієї операції необхідно відобразити у вікні редактора файлу .aspx дизайн сторінки, а потім перетягнути з панелі Toolbox кнопку в будь-яке місце області вікна сторінки. Результат операції представлений на Мал. 2.10 .

Мал.2.10.

Приклад розміщення кнопки на сторінці за допомогою перетягування в режимі редагування дизайну сторінки

Перемикання між режимами Design і Source можливо в будь-який момент в процесі редагування вмісту сторінки.

Важливим моментом при розміщенні елементів всередині Web-сторінки є те, що форматування самої сторінки підпорядковується принципам форматування HTML-сторінок. Це логічно, т. К. Кістяк файлу .aspx становить саме HTML-код сторінки. Зокрема, через це неможливо розміщувати елементи управління в довільному місці Web-сторінки, так, як до цього звикли розробники Windows-додатків. Для форматування сторінок Web-додатків дуже часто використовуються таблиці, що дозволяють розміщувати елементи всередині осередків, позиціонуючи таким чином елементи управління в потрібному місці сторінки. Детальніше про рекомендовані принципах розробки призначеного для користувача інтерфейсу Web-додатків розповідається в "Основи Web-програмування з використанням ASP.NET" .

Наступним етапом нашого прикладу є створення обробника події натискання кнопки і виведення у вікні браузера необхідного тексту.

Для створення обробника події "натискання на кнопку" необхідно переключитися в режим дизайну, виділити кнопку, відкрити вікно властивостей виділеного об'єкта (вікно Properties) - це можна зробити за допомогою клацання правою кнопкою миші на кнопці і вибору пункту Properties з контекстного меню, - переключитися в режим показу подій обраного елемента управління (для цього необхідно натиснути кнопку у вікні властивостей кнопки) і зробити подвійне клацання лівою кнопкою миші по події, обробник якого необхідно створити, в нашому прикладі це Click ( Мал. 2.11 ).

Мал.2.11.

Вікно властивостей елемента керування Button

В результаті створюється процедура Button1_Click, пов'язана з подією Click елемента управління Button. Ця процедура поміщається в файл Default.aspx.cs. Введемо в тіло процедури програмний код, що дозволяє вивести на екран текст. Для виведення у вікно браузера інформації можна використовувати клас Response, який застосовується для формування відгуку сервера, пересилається браузеру клієнта. Більш докладно об'єкт Response розглядається в "Основи Web-програмування з використанням ASP.NET" .

Введемо наступний код в обробник події натискання кнопки:

Response.Write ( "Це просте застосування ASP.NET");

Вікно редактора коду при цьому буде виглядати наступним чином ( Мал. 2.12 ):

Мал.2.12.

Вікно редактора коду програми після створення обробника події натискання на кнопку Button1

Зробимо запуск програми. Для цього натиснемо F5 або зробимо клацання по кнопці панелі інструментів Visual Studio 2005. Якщо Web-додаток запускається вперше і для його запуску використовується режим налагодження (клавіша F5 або виклик команди Debug р Start Debugging (F5), то відобразиться діалог, зображений на Мал. 2.13 .

Мал.2.13.

Діалогове вікно вибору режиму запуску додатка при першому запуску

Якщо вибрати режим Add a new Web .config file with debugging enabled, в файл web .config буде додано рядок, що включає режим налагодження програми яку ви запускаєте. Надалі, при повторному запуску цього додатка в режимі налагодження це діалогове вікно не відображатиметься, а додаток буде відразу запускатися в режимі налагодження. Якщо ж вибрати режим Run without debugging, то додаток буде запущено в звичайному режимі.

Після запуску проекту Visual Studio. NET компонує його файли, показуючи у вікні Task List повідомлення про помилки.

Двічі клацнувши по опису помилки в вікні Task List, можна швидко знайти рядок з помилкою, щоб виправити її.

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

• якщо причина помилки відома, варто зупинити додаток, закривши вікно браузера, і повернутися в Visual Studio .NET, щоб виправити помилку;
• якщо причина помилки невідома, слід натиснути кнопку Back (Назад) в браузері і переключитися в Visual Studio .NET, щоб встановити в коді точку переривання перед передбачуваним місцем виникнення помилки. Потім, переключившись назад в браузер, спробувати ще раз виконати дію, що викликало помилку. Зустрівши точку переривання, Visual Studio .NET зупинить виконання програми. Далі шляхом покрокового виконання можливо локалізувати помилку.

Після виявлення причини помилки до її усунення необхідно зупинити додаток.

Після запуску програми буде запущений локальний Web-сервер, вбудований в Visual Studio. Повідомлення про це з'явиться в панелі індикації ( Мал. 2.14 ), Після чого буде відкрита сторінка Web-додатків в браузері, встановленому в системі за замовчуванням.

Мал.2.14.

Повідомлення про запуск локального Web-сервера

Сторінка створеного Web-додатків, що відображається у вікні браузера, буде виглядати наступним чином ( Мал. 2.15 ).

Мал.2.15.

Сторінка Web-додатки, що відображається в браузері Internet Explorer

Як видно з малюнка, сторінка складається з однієї кнопки. Зробимо клацання лівою кнопкою миші по ній. В результаті на екрані буде відображена рядок "Це просте застосування ASP .NET" ( Мал. 2.16 ).

Мал.2.16.

Результат відображення сторінки після натискання на кнопку Button