покрокове керівництво

Дане покрокове керівництво знайомить з основними можливостями програми Microsoft Visual Web Developer. Воно допоможе створити просту сторінку в Visual Web Developer, проілюструє базові методи створення нової сторінки, додавання елементів управління та написання коду.

У цьому покроковому керівництві, зокрема, розглядаються наступні завдання:

Створення файлового веб-вузла.

Ознайомлення з середовищем Visual Web Developer.

Створення однофайловий сторінки ASP.NET в Visual Web Developer.

Додавання елементів управління.

Додавання обробників подій.

Для виконання цього покрокового керівництва потрібно:

Програма Visual Web Developer.

Платформа .NET Framework.

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

У ньому створюється веб-вузол на базі файлової системи. для якого не потрібні служби Microsoft IIS. Замість цього сторінка створюється і запускається в локальній файловій системі.

У файловому веб-сайті сторінки і інші файли зберігаються у вибраній папці на локальному комп'ютері. Інші параметри веб вузла включають веб-вузол локальної IIS. який зберігає файли в теці локального кореня IIS (зазвичай, \ Inetpub \ Wwwroot \). FTP-вузол зберігає файли на віддаленому сервері, доступ до якого по всій мережі Інтернет здійснюється за допомогою протоколу FTP. Віддалений веб-вузол зберігає файли на віддаленому сервері, доступному через локальну мережу. Додаткові відомості див. У розділі Покрокове керівництво. Редагування веб-вузлів з FTP в Visual Web Developer. Також файли веб-вузла можуть зберігатися в системі управління версіями файлів, такий як Visual SourceSafe. Додаткові відомості див. У розділі Знайомство з системою управління версіями.

Створення файлового веб-вузла

Відкрийте Visual Web Developer.

У меню Файл виберіть пункт Створити веб-вузол.

З'явиться діалогове вікно Створити веб-вузол. як показано на наступному скріншоті.

У діалоговому вікні "Створити веб-вузол".
  • У групі Встановлені шаблони Visual Studio виберіть Веб-вузол ASP.NET.

    При створенні веб-вузла вказується шаблон. Кожен шаблон створює веб-додаток, що містить різні файли і папки. В ході даного покрокового керівництва буде створено веб-вузол на базі шаблону Веб-вузол ASP.NET. який створює деякі папки і кілька файлів за замовчуванням.

    В поле Розташування виберіть поле Файлова система і введіть ім'я папки, в якій будуть зберігатися сторінки веб-вузла.

    Наприклад, введіть ім'я папки C: \ BasicWebSite.

    У списку Мова виберіть Visual Basic або Visual C #.

    Вибрана мова програмування буде встановлений як мову за замовчуванням для даного веб-вузла. Проте, в одному і тому ж веб-додатку можна використовувати кілька мов, створюючи сторінки і компоненти на різних мовах програмування.

    Натисніть кнопку ОК.

    Visual Web Developer створить папку і нову сторінку з ім'ям Default.aspx. За замовчуванням при створенні нової сторінки Visual Web Developer відображає сторінку в поданні джерела, де можна бачити HTML-елементи сторінки. На наступному скріншоті показана веб-сторінка за замовчуванням в поданні джерела.

    Веб-сторінка за замовчуванням в поданні джерела.

  • Огляд можливостей Visual Web Developer

    Перш ніж продовжити роботу над сторінкою, корисно ознайомитися з середовищем розробки Visual Web Developer. На наступному малюнку показані вікна і засоби, доступні в Visual Web Developer.

    Схема середовища Visual Web Developer.

    Знайомство з Web designer в Visual Web Developer

    Панелі інструментів. Надають команди для форматування тексту, пошуку тексту і т. Д. Деякі панелі інструментів доступні тільки при роботі в уявленні конструювання.

    Оглядач рішень. Показує файли і папки на веб-сайті.

    Вікно документів. Відображає робочі документи у вікнах з вкладками. Для перемикання між документами потрібно клацнути вкладку.

    Вікно "Властивості". Дозволяє змінювати параметри сторінки, елементів HTML, елементів управління та інших об'єктів.

    Панель елементів. Надає елементи управління і елементи HTML, які можна перетягувати на сторінку. Елементи в Панелі елементів згруповані по загальних функцій.

    Оглядач серверів / оглядач баз даних. Відображає підключення бази даних. Якщо вкладка Оглядач серверів, хоч я знаю в Visual Web Developer, слід в меню Вид вибрати Оглядач серверів або Оглядач баз даних.

    Створення нової сторінки Web Forms

    При створенні нового веб-вузла Visual Web Developer додає ASP.NET сторінку (сторінки Web Forms) з ім'ям Default.aspx. Сторінку Default.aspx можна використовувати в якості домашньої сторінки веб-вузла. Але в даному покроковому керівництві ми створимо і будемо працювати з новою сторінкою.

    Додавання сторінки до веб-сайту

    Закрийте сторінку Default.aspx. Для цього клацніть правою кнопкою миші на вкладці і ім'ям файлу і виберіть команду Закрити.

    У браузері рішень клацніть правою кнопкою миші на веб-сайті (наприклад, C: \ BasicWebSite) і потім натисніть кнопку Додавання нового елемента.

    У розділі Встановлені шаблони Visual Studio виберіть Форма Web Forms. На наступному скріншоті показано діалогове вікно Додавання нового елемента.

    У діалоговому вікні "Додавання нового елемента".
  • У полі Ім'я введіть FirstWebPage.

    У списку Мова виберіть мову програмування, з яким ви вважаєте за краще працювати (Visual Basic. C # або J #). При створенні веб-вузла було вказано мову за замовчуванням. Проте кожного разу при створенні нової сторінки або компонента для веб-вузла можна задавати мову програмування, відмінний від встановленого за замовчуванням. Можна використовувати різні мови програмування на одному веб-сайті.

    Зніміть прапорець Розміщувати код в окремому файлі.

    В даному покроковому керівництві показано створення сторінки в одному файлі, що містить і код, і HTML. Код сторінок ASP.NET може перебувати як на сторінці, так і в окремому файлі класу. Докладні відомості про збереження коду в окремому файлі см. В розділі Покрокове керівництво. Створення базової веб-сторінки з поділом коду в Visual Web Developer.

    Натисніть кнопку Додати.

    Visual Web Developer створить нову сторінку і відкриє її в режимі джерела.

    Додавання на сторінку HTML-коду

    У цій частині покрокового керівництва на сторінку буде додано статичний текст.

    Додавання тексту на сторінку

    Щоб переключитися в уявлення конструювання, в нижній частині вікна документів виберіть вкладку Конструктор.

    Подання конструювання відображає сторінку, над якою ведеться робота, в режимі точного відображення (WYSIWYG). Після виконання цих дій сторінка не містить тексту або елементів управління.

    На сторінці введіть Ласкаво просимо в Visual Web Developer.

    На наступному скріншоті показаний текст, введений в режимі конструктора.

    Текст вітання в режимі конструктора.
  • Перейдіть в режим джерела.

    Можна бачити HTML-код, створений при введенні тексту в режимі конструктора, як це показано на наступному скріншоті.

    Текст вітання в режимі джерела.

  • виконання сторінки

    Перед тим як продовжити додавати елементи керування на сторінку можна спробувати її запустити. Для запуску сторінки потрібно веб-сервер. На робочому веб-сайті в якості веб-сервера використовується служба IIS. Однак щоб перевірити сторінку, можна використовувати ASP.NET Development Server, який працює локально і не вимагає служб IIS. Для веб-вузлів з файлової системою веб-сервером за замовчуванням в Visual Web Developer є сервер ASP.NET Development Server.

    запуск сторінки

    Щоб запустити сторінку, натисніть клавіші CTRL + F5.

    Visual Web Developer запускає сервер ASP.NET Development Server. З'явиться значок в панелі інструментів, який вказує, що веб-сервер Visual Web Developer працює, як показано на наступному скріншоті.

    Значок веб-сервера в Visual Web Developer.

    Сторінка відкриється в браузері. Хоча створена сторінка має розширення ASPX, вона в даний момент виконується як звичайна HTML-сторінка.

    Якщо в браузері відображається помилка 502 або помилка, яка свідчить про неможливість відображення сторінки, то, можливо, в браузері необхідно налаштувати виконання локальних запитів в обхід проксі-сервера. Додаткові відомості див. У розділі Практичний посібник. Обхід проксі-сервера для локальних веб-запитів.

    Схожі статті