Создание сайта с нуля на ASP.NET Core MVC
Архив с исходным кодом проекта можно скачать ниже на странице по ссылке.
Часть 1. В этом видео посмотрим на конечный результат, какое веб-приложение у нас получится в итоге. Можно сказать, придумаем себе техническое задание. Также определимся со стеком технологий, которые будут использоваться в проекте.
Часть 2. В этом видео мы подготовим базовую структуру проекта, на которой в дальнейшем будет строиться наше приложение. Также выберем HTML5-макет для сайта, установим WYSIWYG-редактор CKEditor.
Часть 3. В этом видео мы запрограммируем базовую необходимую инфраструктуру, чтобы подготовить наш сайт к первому запуску.
Часть 4. В этом видео мы определим доменные объекты для нашего приложения, создадим контекст базы данных и в целом наладим связь между SQL-сервером и сайтом.
Часть 5. В этом видео мы настроим правила для аутентификации и авторизации пользователей. Также запрограммируем панель администратора, где можно управлять контентом сайта.
Часть 6. В этом видео мы запрограммируем вывод контента из базы данных в браузер пользователя, создадим соответствующие разделы на сайте, исправим HTML-макет под эти требования.
Часть 7. В этом видео мы заканчиваем работу над нашим сайтом. Настроим публикацию, проанализируем написанный код и в целом подведем итоги по проекту.
Введение в ASP.NET MVC
ASP.NET MVC представляет собой платформу для создания сайтов и веб-приложений с использованием паттерна (или шаблона) MVC (model — view — controller).
Работа над новой платформой была начата в 2007 году, а в 2009 году появилась первая версия. В итоге к текущему моменту (2012 год) уже было выпущено 4 версии платформы, а сам фреймворк обрел большую популярность по всему миру благодаря своей гибкости и адаптивности.
Шаблон MVC, лежащий в основе новой платформы, подразумевает взаимодействие трех компонентов: контроллера (controller), модели (model) и представления (view). Что же представляют эти компоненты?
Контроллер (controller) представляет класс, с которого собственно и начинается работа приложения. Этот класс обеспечивает связь между моделью и представлением. Получая вводимые пользователем данные, контроллер исходя из внутренней логики при необходимости обращается к модели и генерирует соответствующее представление.
Представление (view) — это собственно визуальная часть или пользовательский интерфейс приложения — например, html-страница, через которую пользователь, зашедший на сайт, взаимодействует с веб-приложением.
Модель (model) представляет набор классов, описывающих логику используемых данных.
Общую схему взаимодействия упрощенно можно представить следующим образом:
ASP.NET MVC и ASP.NET Web Forms
ASP.NET MVC является в некотором роде конкурентом для традиционных веб-форм и имеет по сравнению с ними следующие преимущества:
- Разделение ответственности . В MVC приложение состоит из трех частей: контроллера, представления и модели, каждая из которых выполняет свои специфичные функции. В итоге приложение будет легче поддерживать модифицировать в будущем.
- В силу разделения ответственности приложения mvc обладают лучшей тестируемостью . И мы можем тестировать отдельные компоненты независимо друг от друга.
- Соответствие протоколу HTTP . Приложения MVC в отличие от веб-форм не поддерживают объекты состояния (ViewState). Ясность и простота платформы позволяют добиться большего контроля над работой приложения
- Гибкость . Вы можете настраивать различные компоненты платформы по своему усмотрению. Изменять какие-либо части конвейера работы MVC или адаптировать его к своим нуждам и потребностям.
В то же время не стоит однозначно сбрасывать со счетов ASP.NET WebForms. Поскольку она также имеет свои сильные стороны, например, модель событий, которая будет ближе тем разработчикам, которые ранее занимались созданием клиентских приложений.
В традиционных веб-формах вы имеете контроль над разметкой и можете в реальном времени в визуальном редакторе Visual Studio увидеть, как будет выглядеть та или иная страница. При работе с MVC Visual Studio подобного не позволяет делать.
В любом случае вы вольны выбирать ту платформу, которая приходится вам больше по душе. И если у вас написаны объемные проекты с применением традиционных веб-форм, возможно, стоит продолжать с ними работать. Тем более, что ASP.NET Web Forms еще не умирает и также продолжает развиваться.
Сайт на ASP.NET для начинающих — первые шаги
ASP.NET позволяет создавать сложные и многофункциональные веб-приложения. Эта статья является вводным курсом по созданию сайта на ASP.NET.
ASP.NET — платформа от Microsoft для создания и развёртывания сайтов, веб-приложений и сервисов. По данным SimilarTech, около 2 000 000 сайтов используют эту платформу. В этой статье описаны первые шаги создания сайта на ASP.NET.
Для разработки будем использовать Visual Studio.
Создание ASP.NET проекта
Откройте Visual Studio Installer и нажмите «Изменить» на нужной среде разработки. Перед вами откроется список всех нагрузок. В категории Веб-разработка и облако нужно включить ASP.NET и разработка веб-приложений. После этого нажмите на кнопку Изменить в нижнем правом углу и дождитесь установки нагрузки.
Перейдите в Visual Studio и создайте новый проект, выбрав тип Веб-приложение ASP.NET (.NET Framework). Потом нужно выбрать необходимую модель приложения:
- Веб-формы — можно легко создавать динамические веб-сайты, используя сотни элементов управления и компонентов.
- MVC — эффективный, основанный на шаблонах способ создания динамических сайтов. Предоставляет полный контроль над разметкой для гибкой разработки.
- Веб-API — позволяет легко создавать HTTP службы для широкого диапазона клиентов. Идеальная платформа для сборки REST-приложений.
- Приложение SPA — одностраничное веб-приложение, которое загружает HTML-страницу и динамически обновляет её при взаимодействии с пользователем.
Выберете модель Веб-формы и завершите создание проекта.
Внутренняя структура проекта
В проекте сайта уже загружены некоторые библиотеки, необходимые для комфортного старта: CSS-фреймворк Bootstrap, JS-фреймворк jQuery, MSAjax и некоторые другие.
После создания тут уже присутствуют 3 страницы: Default, About и Contact. Каждая страница состоит из 3 файлов:
- Page.aspx — содержит в себе HTML-разметку конкретной страницы;
- Page.aspx.cs — отвечает за логику работы конкретной страницы;
- Page.aspx.designer.cs — является мостом между Page.aspx и Page.aspx.cs.
Вот так выглядит About.aspx:
.
Your application description page.
Use this area to provide additional information.
Как видно, этот файл содержит лишь контент конкретной страницы. Вся общая разметка находится в Site.Master и Site.Mobile.Master .
Чтобы проверить и запустить проект, нажмите IIS Express или же традиционную клавишу F5. После этого все файлы скомпилируются и сайт откроется по адресу http://localhost:4400 в браузере по умолчанию. Номер порта может отличаться.
Создание веб-формы
Чтобы создать новую страницу, в контекстном меню проекта выберите Добавить→Веб-форма. После этого автоматически сгенерируются и заполнятся все 3 файла.
Примечание Веб-формы можно создавать с помощью встроенного графического конструктора веб-форм. Что бы открыть его, в контекстном меню нужной веб-формы нажмите на Открыть в конструкторе. Все необходимые элементы можно достать из Панели Элементов (Вид→Панель элементов). Но если вам нужна максимальная гибкость и функциональность — лучше разрабатывать формы вручную в коде.
Потом можно добавить ссылку на новую страницу в панель навигации в Site.Master :
Примечание Обратите внимание, что в ссылке указывается название страницы без расширения.
Если вы откроете новую страницу, то заметите, что вся общая вёрстка отсутствует. Это потому, что в новой странице не подвязывается разметка из Site.Master . Чтобы исправить это, нужно в новой форме вместо сгенерированной вёрстки вставить это:
Во всех упоминаниях нужно заменить News на название вашей страницы. Теперь форма будет отображаться вместе с общей вёрсткой.
Для интеграции значений в вёрстку из aspx.cs используют специальный тег :
В этом случае SomeVar должен быть публичным полем. Если нужно выполнить какой-либо код для присвоения значения этой переменной, то выполнить его нужно в сгенерированном методе Page_Load .
Получение значений параметров из URL производится через статический класс Request , в котором хранятся и прочие данные о запросе:
int data-v-801cb1c0>
Изучить все возможности веб-форм можно в официальной документации.
Движок представлений Razor
Razor позволяет делать вставки C# кода прямо в HTML разметке. Для этого нужно создать отдельный файл .cshtml (Контекстное меню проекта→Добавить→Страница представления MVC 5 (Razor)). Разметка в этом файле ничем не отличается от обычной HTML-вёрстки.
По умолчанию языком Razor является HTML. Для перехода с вёрстки на C# используют символ @ , а сам блок кода помещается в фигурные скобки.
Тут идёт ваша вёрстка
@ < // Тут идёт код на C# SomeMethod(); >Тут снова идёт вёрстка
В Razor также можно выполнять неявные выражения прямо в HTML разметке:
@DateTime.Now
Тут есть привычные для ЯП конструкции, которые могут значительно облегчить вёрстку. Вот некоторые из них:
@for (var i = 0; i < people.Length; i++) < var person = people[i]; Имя: @person.Name
> @if (value % 2 == 0) < Это значение чётное.
> else if (value >= 1337) < Это значение нечётное и больше либо равно 1337.
> else < Это значение нечётное и меньше, чем 1337.
> @try < throw new InvalidOperationException("Вы сделали что-то не то."); >catch (Exception ex) < Сообщение исключения: @ex.Message
> finally < Итоговый блок.
> Также всегда будет полезным просмотр open source проектов. Там вы найдёте не только лучшие практики по ASP.NET, но и просто решение популярных задач.
Следите за новыми постами по любимым темам
Подпишитесь на интересующие вас теги, чтобы следить за новыми постами и быть в курсе событий.
Создание веб приложения ASP.NET Core MVC
Создать веб-приложение ASP.NET Core в интегрированной среде программирования MS Visual Studio 2019 легко и просто. Для наглядности опишем этапы создания и проиллюстрируем их скриншотами.
Создание проекта
Работа с веб приложениями в Visual Studio ведётся посредством проектов. Проект подразумевает под собой комплект файлов, ресурсов, программных пакетов, различные настройки и параметры для будущего приложения.
По мере формирования программного кода, работу веб приложения можно тестировать в любом, установленном в операционную систему, браузере.
Создание проекта можно запустить в начальном окне загрузки и из меню студии. Создание проекта из интерфейса среды программирования:
Выбор шаблона проекта
После команды создания проекта откроется диалоговое окно для уточнения типа проекта. Visual Studio имеет множество встроенных шаблонов проектов. Для сужения круга поиска необходимого шаблона можно воспользоваться фильтрами выбора языка программирования, платформы (операционной системы) и типа проекта.
В нашем случае выбираем тип проекта Веб, а прилагаемом ассортименте шаблонов Веб-приложение ASP.NET Core.
Настройки проекта
В следующем диалоговом окне необходимо выбрать место расположения будущего проекта на вашем устройстве (компьютере) или на сетевом ресурсе. При установке галочки на выборе: «Поместить решение и проект в одном каталоге».
По умолчанию файл решения будет в корневой папке, файл проекта в своей папке внутри папки решения. Выбор этой опции всецело на усмотрение пользователя, но, если решение будет иметь в своем составе несколько проектов, предпочтительно не устанавливать галочку на боксе.
Диалоговое окно настройки проекта:
Создание веб-приложения ASP.NET Core MVC
В заключительном диалогом окне будет предложено конкретизировать вид создаваемого веб-приложения. Для этого прежде всего необходимо выбрать платформу разработки и её версию.
Для веб-приложения, предусматривающего паролевый вход или регистрацию пользователей выбирается способ проверки подлинности пользователей. В результате этого в проект добавятся пакеты поддержки аутентификации и будет минимально настроен интерфейс входа.
В этом же диалоговом окне, в секторе «Дополнительно» можно выбрать поддержку работы веб-приложения через безопасное соединение HTTPS и операционную систему для будущего приложения.
Примечание. При выборе режима проверки подлинности пользователей выбор безопасного соединения HTTPS обязателен.
Опция «Enable Razor runtime compilation» повышает удобство работы над проектом приложения. При запущенном в браузере веб-приложении возможна корректировка программного кода Razor (движок веб-страниц) представлений MVC структуры. При этом изменения кода, после перезагрузки страницы, тут же отображаются в браузере.
Выбираем веб-приложение ASP.NET Core We App (Model-View-Controller), устанавливаем желаемые настройки и нажимаем кнопку «Создать».
Проект создан полностью, можно приступать к творческой работе. Аналогично создаются проекты других шаблонов приложений.