Asp.Net — чудовий вебфреймворк для багатьох проєктів. Але для створення повноцінного вебсайту вам потрібно буде мати більше, ніж лише головну сторінку. Ця стаття допоможе вам швидко створити нові вебсторінки та налаштувати маршрутизацію за допомогою шаблону проєктування MVC (Model-View-Controller).
Вимоги:
- Visual Studio 2022 — з установленим модулем "ASP.NET and web development".
Зображення модулів Visual Studio із вибраним необхідним модулем
- Створіть новий проєкт ASP.NET MVC.
Зображення створення проєкту із правильним вибором
- Назвіть проєкт і рішення, а також визначте місце збереження.
- Ви можете залишити значення за замовчуванням на наступному екрані.
Показаний останній екран із налаштуваннями за замовчуванням
- Ви зрозумієте, що все налаштовано, якщо натиснете кнопку Запуск/Відтворення (Run/Play) і побачите базовий вебсайт.
Базовий вебсайт, який з'являється з новим проєктом
MVC за 30 секунд
Щоб зрозуміти маршрутизацію сторінок, потрібно зрозуміти шаблон проєктування MVC (Model-View-Controller). Ось високорівневий опис, як цей шаблон розділяє вебсайт на три великі частини:
- Model: Дані — це представлення класів даних.
- View: Те, що бачить користувач — це представлення всіх візуальних елементів вебсайту. Усі вебсторінки будуть називатися "Вигляди" (Views).
- Controller: Те, з чим взаємодіє користувач — це міст між Model та View. Контролери — це класи C#, які обробляють запити користувачів.
Для того, що ми будемо робити, цього базового розуміння шаблону MVC достатньо. Для детальнішого ознайомлення можна звернутися до детального пояснення від Microsoft.
Ще важливо знати, що за замовчуванням ASP.NET використовує стиль маршрутизації [Domain]/[Controller]/[Action]. У цьому контексті Action має відповідати імені вашого View, але ми побачимо це на практиці.
У нашому новому проєкті ми можемо побачити папки Model, View та Controller, у яких зберігатимуться відповідні файли.
Показана структура папок у новому проєкті
Кроки
Отже, тепер, коли всі передумови виконані, можемо розпочати.
Створення нової вебсторінки
Ми створюємо нову вебсторінку, створюючи новий файл View.
Крок 1: У папці Views створіть нову папку під назвою "Test". Для цього клацніть правою кнопкою миші на папці Views, виберіть Add, а потім New Folder.
Створення нової папки
Крок 2: Створіть новий файл View із назвою "Index.cshtml". Зробіть це подібним чином, клацнувши правою кнопкою на щойно створеній папці, виберіть Add, потім View, оберіть Razor View — Empty, а тоді назвіть файл "Index.cshtml".
Назва нового файлу View
Крок 3: Додайте елемент HTML на сторінку View, щоб переконатися, що ви на правильній сторінці.
Створення Контролера
Щоб показати цей View, нам потрібен контролер.
Ми могли б використати HomeController, але давайте створимо власний.
Крок 1: Клацніть правою кнопкою миші на папці “Controllers”, оберіть Add, потім Controller, далі оберіть Add для MVC Controller — Empty, і назвіть файл “TestController.cs”.
Дуже важливо, щоб усі файли контролерів закінчувалися на “Controller”, щоб Visual Studio могла правильно зареєструвати їх.
Створений файл контролера
Оскільки наш файл View названий “Index”, створена функція буде обробляти повернення цього файлу, коли він буде запитаний.
Створення посилання на View
Тепер, коли ми створили View і Controller, ми можемо створити кнопку, яка напряму веде до нової вебсторінки.
Крок 1: Перейдіть до файлу Index контролера Home, відкривши Views>Home>Index.cshtml. Цей файл є головною сторінкою, і ми можемо додати кнопку до цієї сторінки.
Крок 2: Додайте тег anchor і стилізуйте його як кнопку, використовуючи Bootstrap.
Перейти на тестову сторінку
Крок 3: Усередині тегу anchor потрібно вказати контролер і дія (View), яку ми хочемо показати для нової вебсторінки.
asp-controller=”Test” asp-action=”Index”
Остаточний файл Home/Index виглядатиме приблизно так:
HTML остаточного файлу Home/Index
Тепер, коли ми запускаємо програму, ми побачимо кнопку. Натискання на кнопку перенесе нас на нову вебсторінку.
Висновок
MVC і ASP.NET роблять створення нових сторінок надзвичайно простим, коли ви освоїте шаблон. Просто пам’ятайте:
- Файли контролерів повинні закінчуватися на “Controller”
- Назва файлу контролера має збігатися з назвою папки у Views
- Назва файлу View має збігатися з назвою функції IActionResult у контролері
Ці строгі вимоги можуть спричиняти баги, але саме вони забезпечують зручність використання, яка дозволяє нам легко створювати вебсторінки.
Перекладено з: ASP.NET MVC Page Routing