02 — Среда разработки: запускаем и изменяем сайт

1. Устанавливаем средства разработки

1. Установите Visual Studio Community версии с поддержкой .NET 10. Если Visual Studio уже установлена, откройте Visual Studio Installer и проверьте, нужно ли обновление.
2. В окне установки отметьте ASP.NET and web development и нажмите Install. Для существующей установки нажмите Modify, отметьте компонент и завершите изменение.
3. Убедитесь, что установлен .NET 10 SDK. Если его нет, установите и перезапустите Visual Studio.

Проект содержит код сайта. Solution / Решение — контейнер, с помощью которого Visual Studio открывает проекты и управляет ими. У нас в нём будет один проект.

2. Выбираем место и имена

Visual Studio создаст папки проекта за вас. Начните со стартового экрана программы.

Открываем окно создания проекта

Находим и выбираем шаблон сайта

На любой снимок можно нажать, чтобы открыть его в полном размере.

Задаём имена и выбираем папку

Visual Studio создаст внешнюю папку решения и внутреннюю папку проекта, обе с выбранным именем. В нашем примере обе называются RazorPractice.

Если проект уже создан, откройте его через Open a project or solution и выберите RazorPractice.sln или RazorPractice.slnx в существующей папке. Для продолжения работы создавать ещё один проект не нужно. Для тренировки создания выберите новое имя и новую папку. Папку first-page с прошлого урока оставляем как есть.

3. Создаём проект Razor Pages

Если в списке нет шаблона Razor Pages или .NET 10, вернитесь к установке и обновлению. Не выбирайте другой шаблон ради перехода к следующему экрану; покажите учителю, чего не хватает.

4. Первая проверка: нажимаем Play и видим сайт

После Create дождитесь открытия окна проекта и окончания загрузки. Прежде чем менять код, проверьте, что созданный проект работает:

1. Нажмите зелёный треугольник ▶ (Play) на верхней панели Visual Studio.
2. Дождитесь сборки и открытия браузера. При первом запуске это может занять некоторое время.
3. Проверьте, что в браузере открылась начальная страница с заголовком Welcome, а в адресной строке указан localhost с номером порта. Это ваш сайт, работающий сейчас на вашем компьютере.

Проверка прошла: вы нажали Play, и страница Welcome открылась в браузере. Проект успешно создан; можно продолжать работу и пробовать изменения.

Если сайт не открылся или появилась ошибка сборки, остановитесь здесь и покажите сообщение учителю. Переходите к редактированию только после успешного запуска сайта.

Останавливаем, знакомимся с файлами и меняем заголовок

Вернитесь в Visual Studio и нажмите красный квадрат Stop на верхней панели, чтобы остановить сайт.

Откройте View → Solution Explorer. Раскройте проект RazorPractice и папку Pages. В файловом менеджере видна следующая структура:

source/repos/
└── RazorPractice/
    ├── RazorPractice.slnx (או RazorPractice.sln)
    └── RazorPractice/
        ├── RazorPractice.csproj
        ├── Program.cs
        ├── Pages/
        │   └── Index.cshtml
        └── wwwroot/

Pages содержит страницы сайта, а wwwroot — оформление, изображения и JavaScript. В дальнейшем путь RazorPractice/Pages/Index.cshtml начинается от папки решения RazorPractice; в Solution Explorer раскрывают проект, затем Pages.

1. В Solution Explorer откройте проект с выбранным именем, затем Pages → Index.cshtml.
2. В строке заголовка замените только Welcome на החיות שלי («Мои животные») и сохраните с помощью Ctrl+S.
3. Снова нажмите зелёный треугольник Play и убедитесь, что новый заголовок появился в браузере.
4. Вернитесь в Visual Studio и остановите сайт кнопкой Stop, прежде чем продолжать редактирование.

Теперь ваше изменение тоже видно на сайте. Сохраните файлы и переходите к общему уроку.

Как использовать свои имена в следующих уроках?

В примерах курса проект называется RazorTaba. У себя используйте выбранное имя: например, RazorTaba/Pages/Index.cshtml соответствует RazorPractice/Pages/Index.cshtml внутри папки решения. Не переименовывайте проект ради соответствия примеру. В Solution Explorer раскройте свой проект, затем Pages.

Оставьте Program.cs и Properties/launchSettings.json такими, какими они созданы. На этом этапе редактируем только содержимое и оформление. Создавать Git-репозиторий или публиковать на GitHub не нужно.

1. Подготавливаем инструменты

1. Установите VS Code и .NET 10 SDK. На Mac выберите Arm64 для Apple Silicon или x64 для Intel. Нужен SDK, а не только Runtime.
2. В VS Code откройте Extensions, найдите C# Dev Kit от Microsoft и нажмите Install. Расширение помогает редактировать C#; проект создадим в терминале.
3. Откройте Terminal → New Terminal. На Mac можно также открыть Terminal через Spotlight. Введите команду и нажмите Enter:

dotnet --list-sdks

Проверьте, что версия начинается с 10.0. Если команда не распознаётся, закройте и откройте VS Code после установки SDK. Если она по-прежнему не работает, обратитесь к учителю.

2. Выбираем родительскую папку и имя пробного проекта

Следующие команды предназначены для Terminal в macOS. Копируйте каждую строку отдельно и нажимайте Enter:

mkdir -p ~/WebProjects
cd ~/WebProjects
pwd

mkdir -p создаёт родительскую папку, если её нет. cd переводит терминал в неё, а pwd показывает текущее расположение. Проверьте, что путь заканчивается на WebProjects, а не на папку другого проекта.

Выберите любое имя на английском без пробелов, например RazorPractice. Во всех следующих командах заменяйте его одним и тем же выбранным именем. Если папка с таким именем уже существует, выберите новое, например RazorPractice2; не перезаписывайте её.

3. Создаём проект из шаблона Razor Pages

dotnet new webapp --name RazorPractice --output RazorPractice --framework net10.0 --auth None
cd RazorPractice

webapp — шаблон Razor Pages. --name задаёт имя проекта; --output создаёт новую папку с этим именем. net10.0 выбирает версию курса, а None создаёт сайт без учётных записей пользователей. Дождитесь сообщения об успехе и завершения восстановления пакетов. Не добавляйте --force, если сообщается, что папка уже содержит файлы.

В VS Code выберите File → Open Folder, перейдите в WebProjects в домашней папке и откройте RazorPractice. Если VS Code спросит, доверяете ли вы созданным файлам, можно подтвердить. В Explorer проверьте наличие RazorPractice.csproj, папок Pages и wwwroot.

Если открылось новое окно, снова выберите в нём Terminal → New Terminal. Убедитесь, что терминал находится в папке с файлом .csproj.

4. Запускаем сайт до внесения изменений

dotnet watch --launch-profile http

Дождитесь строки Now listening on: http://localhost:…. Откройте в браузере точный адрес, показанный у вас; номер порта выбран шаблоном и может отличаться в разных проектах. Если браузер не открылся автоматически, скопируйте адрес в его адресную строку. Во время просмотра сайта оставляйте терминал работающим.

Страница показывает Welcome и меню Home и Privacy. Это работающий шаблон Razor Pages, уже включающий Bootstrap и файл собственных стилей wwwroot/css/site.css.

5. Меняем, останавливаем и открываем снова

1. Откройте Pages/Index.cshtml и замените слово Welcome на החיות שלי («Мои животные»). Сохраните с помощью Cmd+S и обновите браузер, если изменение не появилось автоматически.
2. Вернитесь в терминал и нажмите Ctrl+C, чтобы остановить сервер. Одно лишь закрытие вкладки браузера его не останавливает.
3. В следующий раз откройте ту же папку и снова запустите dotnet watch --launch-profile http.
4. Для повторной тренировки создания остановите сервер, вернитесь в родительскую папку командой cd ~/WebProjects и повторите этап 3 с новым именем. Не создавайте проект внутри существующего проекта.

Оставьте Program.cs, настройки запуска и файлы Bootstrap такими, какими они созданы. На этом этапе Git и GitHub не нужны.

Справка: шаблоны dotnet new

1. Подготавливаем инструменты

Установите JetBrains Rider и .NET 10 SDK для своей операционной системы. На Mac выберите Arm64 для Apple Silicon или x64 для Intel. Если Rider был открыт при установке, перезапустите его.

2. Создаём решение и проект через интерфейс

Выбираем Web, затем Razor Pages

Проверяем настройки создания

1. В Solution name введите любое имя на английском без пробелов, например RazorPractice. Оставьте такое же Project name.
2. В Solution directory выберите свою родительскую папку, например WebProjects в домашней папке. Перед подтверждением проверьте полный путь. Не выбирайте папку другого проекта.
3. Оставьте Put solution and project in the same directory без флажка. Получатся внешняя папка решения и внутренняя папка проекта.
4. Выберите C# и платформу net10.0. Прокрутите окно вниз с помощью внешней правой полосы прокрутки, за список шаблонов, чтобы увидеть дополнительные параметры.
5. Оставьте Do not use top-level statements без флажка. В поле Auth выберите No authentication. Оставьте Add Dockerfile без флажка. В Advanced Settings ничего менять не нужно.
6. Снимите флажок Create Git repository. На этом этапе тренируемся создавать и запускать; доступ через GitHub настроим после Bootstrap.
7. Нажмите Create и дождитесь создания файлов и восстановления пакетов.

На любой снимок можно нажать для просмотра в полном размере.

Если .NET 10 или нужного шаблона нет, проверьте установку SDK и обратитесь к учителю. Не выбирайте другой шаблон, чтобы продолжить.

3. Запускаем и проверяем

1. В окне Solution слева (дерево файлов) раскройте проект и Pages. Убедитесь, что есть Index.cshtml, файл .csproj и папка wwwroot.
2. В списке конфигураций запуска на верхней панели выберите RazorPractice: http или имя своего проекта с http. Если этот профиль уже выбран, оставьте его. Нажмите Run ▶.
3. Дождитесь завершения сборки. Если браузер не открылся автоматически, откройте адрес http://localhost:… из окна Run. Используйте номер порта, показанный вашим проектом.
4. Проверьте наличие Welcome и меню Home и Privacy. Остановите сайт кнопкой Stop ■.
5. Откройте Pages/Index.cshtml, замените Welcome на החיות שלי («Мои животные»), сохраните и снова запустите. Убедитесь, что заголовок изменился.

У вас есть сайт Razor Pages, созданный из шаблона и работающий из Rider. Bootstrap уже находится в wwwroot/lib/bootstrap, а собственные стили — в wwwroot/css/site.css.

4. Продолжаем или пробуем ещё раз

Для существующей работы выберите Open и откройте файл решения .sln или .slnx. Для повторной тренировки остановите сайт, вернитесь в New Solution и выберите новое имя, например RazorPractice2, и новую папку рядом с первой. Сохраните прежний пробный проект; удалять его не нужно.

Оставьте Program.cs, настройки запуска и файлы шаблона на месте. Публиковать что-либо в сети не требуется.

Справка: создание сайта в Rider