Как создать сайт на asp net core

Как создать сайт на asp net core

Данное руководство устарело. Актуальное руководство: Руководство по ASP.NET Core 7

Для разработки под ASP.NET Core мы можем использовать различный инструментарий. Если нашей рабочей платформой является Windows, то мы можем использовать полнофункциональную среду разработки Visual Studio. Если мы разрабатываем на Mac OS или Linux, то можем использовать расширенный редактор кода Visual Studio Code . Данный редактор также может работать и под Windows. В рамках данного руководства преимущественно будет использоваться среда Visual Studio 2019.

Программу для установки Visual Studio 2019 можно загрузить со страницы https://www.visualstudio.com/downloads/. В данном случае не важно, какой выпуск VS использовать — бесплатный Community или платные Professional или Enterprise. Все эти выпуски имеют встроенные средства для создания приложений на ASP.NET Core. В рамках этого руководства будет использоваться бесплатный выпуск VS 2019 Community.

Итак, загрузим установщик VS 2019 и запустим его. Вначале нам предлагается установить ряд опций. И так как мы будем работать с ASP.NET Core, то выбрать в программе для установке пункт ASP.NET и разработка веб-приложений :

Также при выборе этого пункта в поле справа можно выбрать также необязательные компоненты, которые будут устанавливаться вместе с ASP.NET. Можно выбрать все компоненты.

Кроме того, чуть ниже также в программе установщика нам надо выбрать другой пункт Кроссплатформенная разработка .NET Core :

Отметив все необходимые нам опции, выполним установку Visual Studio.

После установки откроем Microsoft Visual Studio 2019 и при создании проекта выберем пункт ASP.NET Core Web Application — тип проекта для создания веб-приложения ASP.NET Core:

На следующем шаге дадим какое-нибудь имя проекту, например, HelloApp, и определим для него местоположение на жестком диске:

После этого отобразится окно выбора шаблона нового приложения:

Здесь нам доступно несколько типов проектов:

ASP.NET Core Empty : пустой шаблон с самой минимальной функциональностью для создания приложений с нуля

ASP.NET Core Web API : проект веб-приложения, который использует архитектуру REST для создания веб-сервиса

ASP.NET Core Web App : проект, который для обработки запросов по умолчанию использует Razor Pages

ASP.NET Core Web App(Model-View-Controller) : проект, который использует архитектуру MVC

ASP.NET Core with Angular : проект, предназначенный специально для работы с Angular 2+.

ASP.NET Core with React.js : проект, который использует React.JS

ASP.NET Core with React.js and Redux : проект, который использует React.JS и Redux

Кроме того, здесь мы можем указать версию ASP.NET Core в выпадающем списке, но в данном случае оставим значение по умолчанию — ASP.NET Core 5.0.

Также здесь можно указать тип аутентификации, который по умолчанию используется в проекте, и подключить контейнер Docker.

Также здесь есть флажок «Configure for HTTPS». При установке этого флажка проект при отладке и тестировании по умолчанию будет запускаться по протоколу HTTPS. В данном случае установка и неустановка этого флажка не имеет значения. Кроме того, даже если мы установили эту отметку, то впоследствии через свойства проекта можно отменить запуск через HTTPS или, наоборот, заново установить.

Среди этих шаблонов выберем ASP.NET Core Empty , все остальные значения оставим по умолчанию и нажмем на кнопку ОК. И Visual Studio создает новый проект:

Структура проекта ASP.NET Core

Рассмотрим базовую структуру стандартного проекта ASP.NET Core. Проект ASP.NET Core Empty содержит очень простую структуру — необходимый минимум для запуска приложения:

Connected Services : подключенные сервисы из Azure

Dependencies : все добавленные в проект пакеты и библиотеки, иначе говоря зависимости

Properties : узел, который содержит некоторые настройки проекта. В частности, в файле launchSettings.json описаны настройки запуска проекта, например, адреса, по которым будет запускаться приложение.

appsettings.json : файл конфигурации проекта в формате json

Program.cs : главный файл приложения, с которого и начинается его выполнение. Код этого файла настривает и запускает веб-хост, в рамках которого разворачивается приложение

Startup.cs : файл, который определяет класс Startup и который содержит логику обработки входящих запросов

Данная структура, конечно, не представляет проект полнофункционального приложения. И если мы запустим проект, то в браузере увидим только строку «Hello World!», которая отправляется в ответ клиенту с помощью класса Startup:

Разработка веб-сайта на базе ASP.NET Core и Platformus CMS

В этой статье я хочу познакомить вас с Platformus CMS — молодой системой управления содержимым веб-сайтов (10-я альфа на момент написания статьи), построенной на базе не менее молодых ASP.NET Core и ExtCore framework. Подробно рассматривать архитектуру и другие технические детали мы сейчас не будем, а ограничимся упоминанием нескольких интересных фактов и затем сразу же попробуем CMS’ку в деле — создадим небольшой тестовый проект на ее основе.

Несколько интересных фактов

Платформус — бесплатная система управления содержимым с открытым исходным кодом. Она кроссплатформенная, модульная и расширяемая. Данные в ней представлены в виде объектов, которые описываются классами. Поддерживается мультиязычность.

Написана CMS на C#. Благодаря возможностям ASP.NET Core, она одинаково хорошо может работать на Windows, Linux и Mac. Сама исполняемая среда, необходимая для работы любого приложения на .NET Core, может быть как установлена отдельно, так и интегрирована непосредственно в само приложение. В качестве веб-сервера может использоваться IIS либо Kestrel (во втором случае приложение становится веб-сервером для самого себя и может работать самостоятельно или же быть встроено в контейнер вроде IIS или Nginx). В качестве хранилища данных на текущий момент поддерживаются Microsoft SQL Server, SQLite и PostgreSQL. С учетом всего перечисленного, можем получить конфигурацию, которой для работы не требуется вообще ничего стороннего — скопировал, запустил и пользуешься (может быть удобно для тестирования, например).

(В статье несколько десятков скриншотов.)

Приступаем

Если вы еще не работали с ASP.NET Core, то вот тут есть ссылки на все, что для этого понадобится.

Итак, скачиваем архив с 10-й альфой Платформуса по прямой ссылке (

9 МБ). Распаковываем его. (Как вариант, чтобы не выполнять самостоятельно все описанные в статье действия, можно скачать уже готовую демку, ссылка на нее есть в конце статьи.)

Чтобы запустить приложение, необходимо выполнить 2 команды в командной строке (предполагаем, что вы сейчас работаете в Windows-среде):

Результат должен быть примерно следующим:

Теперь открываем браузер и переходим на http://localhost:5000/:

Платформус работает! Приступим к наполнению нашего веб-сайта, для чего перейдем в бекенд (админку), кликнув по соответствующей ссылке на странице-заглушке:

Описание структуры данных

Как я упоминал выше, данные в Платформусе представлены в виде объектов. Например, любая страница является объектом. Если на странице необходимо отобразить список новостей, то каждая новость также будет отдельным объектом, опционально, со своей отдельной страницей (объекты бывают автономные и встраиваемые).

Объекты описываются классами. Каждый класс, в свою очередь, описывается членами класса, представляющими свойства или связи объектов этого класса, и источниками данных. По умолчанию в базе данных уже присутствует два класса: Base Page и Page. Первый является абстрактным и содержит такие базовые свойства страниц, как заголовок, META-description и META-keywords, сгруппированные в таб SEO. Большинству автономных объектов необходимы эти свойства, поэтому, чтобы их не дублировать в каждом классе, достаточно унаследовать соответствующие классы от Base Page. Второй класс представляет обычную страницу с HTML-содержимым. Он унаследован от Base Page и имеет еще одно дополнительное свойство — Content. Вот как выглядит список классов по умолчанию:

Классы

В качестве примера, который может продемонстрировать многие возможности CMS’ки, давайте добавим раздел с новостями на наш веб-сайт. Каждая новость будет снабжаться тегами и иметь свою собственную страницу с детальной информацией. Для начала, создадим класс News Page:

Т. к. каждая страница новости должна иметь заголовок, META-description и META-keywords, унаследуем наш класс от Base Page, выбрав его в выпадающем списке Parent class. Далее, укажем название нашего класса в единственном и множественном числе. Добавлять слово Page не обязательно, но, пожалуй, так нагляднее. Устанавливаем флаг Is standalone, означающий, что объекты этого класса будут автономными (т. е. будут иметь собственные URL). И напоследок, указываем название представления по умолчанию для будущих объектов нашего класса. Нажимаем Save. Наш класс News Page создан и добавлен в список:

Теперь создадим еще один класс — Tag. На этот раз объекты будут встраиваемыми, поэтому родительский класс не выбираем и флаг Is standalone не устанавливаем. Также, нет нужды указывать название представления по умолчанию:

Члены классов

Теперь определим члены класса News Page. Кликаем по ссылке Members в соответствующей строке и переходим к пустому списку (унаследованные от Base Page члены класса тут не отображаются):

Члены класса бывают двух типов — свойства и связи.

Значением свойства является простой текст, редактируемый различными редакторами, в зависимости от типа данных свойства. Например, есть однострочный текст, многострочный текст, HTML или изображение (в последнем случае значением свойства является URL изображения). Свойство опционально может быть локализируемым (т. е. его значение отличается в зависимости от культуры (языка)). В таком случае при редактировании свойства для каждой культуры отображается отдельный редактор. Также можно выводить значения ключевых свойств в списке объектов соответствующего класса.

Значением связи является другой объект или другие объекты указанного класса. Также, если один объект одного класса может быть связан только с одним объектом другого класса (например, статья может входить лишь в одну категорию), можно сгруппировать эти «дочерние» объекты относительно своего «родителя». Это может показаться немного запутанным. В конце статьи есть ссылка на пример на GitHub, там этот прием используется.

Первым делом опишем свойство Name — название новости:

На вкладке General мы указываем код, название и позицию члена класса. По коду мы затем будем получать значение свойств (но не связей!) объекта, название отображается в редакторе свойства или связи, а позиция определяет порядок следования этих редакторов.

На вкладке Property мы указываем тип данных нашего свойства. Для названия выберем Single line plain text — однострочный простой текст. Установим флаг Is property localizable, т. к. название новости будет разным для разных культур. Также, поскольку название является ключевым свойством, установим и флаг Is property visible in list, чтобы значение этого свойства отображалось в списке объектов класса News Page.

Т. к. мы описываем свойство, а не связь, ко вкладке Relation не обращаемся. Нажимаем Save, наш новый член класса добавлен.

Теперь аналогично опишем свойство Preview — укороченный текст новости, который будет отображаться в списке новостей. Т. к. в превью будет больше текста, чем в названии, в качестве типа данных свойства выберем Multiline plain text и флаг Is property visible in list на этот раз устанавливать не будем. Далее, точно так же добавим и свойство с основным содержимым новости — Content. Выберем тип данных Html, чтобы иметь возможность удобно форматировать содержимое.

Последнее свойство, которое я бы хотел добавить, — иллюстрация к новости. Все точно так, как и с другими свойствами, но в качестве типа данных выбираем Image и не устанавливаем флаг Is property localizable, т. к. иллюстрация у нас не зависит от текущей культуры.

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

На вкладке General все привычно. Переходим на этот раз на вкладку Relation:

В выпадающим списке Relation class выбираем класс, объекты которого будут привязываться к объектам класса News Page.

Все, теперь все готово. Должно получиться как-то вот так:

Аналогичным образом опишем единственное свойство класса Tag — Name. (Напомню, что флаги Is property localizable и Is property visible in list должны быть установлены.)

Источники данных

Несмотря на то, что мы описали связь между News Page и Tag, привязанные объекты класса Tag не будут загружены вместе с соответствующим объектом класса News Page. Чтобы это произошло, нам необходимо добавить еще кое-что в класс News Page — источник данных. Источники данных определяют, какие объекты загружаются вместе с текущим объектом и как именно. Например, если между объектом-новостью и несколькими объектами-тегами существуют связи, то с помощью источников данных, опираясь на связи, мы можем как загрузить все теги новости, так и все новости тега. Также, мы можем загружать объекты даже при отсутствии связи с текущим. Например, чтобы вывести новости на главной странице. Все источники данных описываются C#-классами, реализующими интерфейс IDataSource, и мы можем добавлять новые такие классы. Например, можно добавить источник данных, который будет выводит 100 последних новостей с разбивкой по 10 на страницу. Либо источник данных, отображающий самые популярные товары интернет-магазина. Удобно, что в итоге все данные группируются в единственном объекте, который является моделью для своего представления. Это вполне в духе MVC.

Итак, вернемся к списку наших классов и кликнем на ссылке Data sources в строке класса News Page. Добавляем новый источник данных:

Сохраняем и получаем такой список:

Наполнение содержимым

Ну что же, теперь можно приступить непосредственно к наполнению нашего веб-сайта содержимым. Переходим в раздел Objects:

Все объекты разделены на 2 группы — автономные (Standalone) и встраиваемые (Embedded). Внутри этих групп они отображаются по классам. Так как объекты класса News Page нуждаются в объектах класса Tag, начнем наполнение с последних:

Создадим наш первый объект:

Как видим, страница редактирования объекта очень простая и содержит всего 2 поля: View name (для встраиваемых объектов его можно не заполнять, а хардкодить позже в родительском представлении, если нет необходимости иметь возможность изменять представление в дальнейшем из бекенда) и Name. Свойство Name мы описали в нашем классе Tag. Давайте создадим несколько тегов, у меня получилось вот так:

Наконец-то перейдем к нашим новостям. Создадим объект класса News Page. Полей здесь уже больше:

Для свойств, имеющих тип данных Image, загрузка изображений производится с помощью вот такого загрузчика-обрезчика (на текущий момент манипуляции с изображениями в ASP.NET Core еще не поддерживаются, поэтому реальное кадрирование на сервере не происходит, изображение сохраняется как есть, целиком, вне зависимости от выбранной области):

А вот так выглядит редактор связи, выбор тегов в нашем случае:

Давайте создадим еще несколько новостей, чтобы было нагляднее, и попробуем протестировать, что у нас в итоге получилось. Перейдем по одному из URL наших новостей, предварительно добавив перед ним идентификатор культуры: http://localhost:5000/en/news/2016-olympic-games. И… получаем 500-ю ошибку. Если посмотреть в консоль, то становится очевидно, что мы не создали представление NewsPage для нашего объекта:

Представления и окончательная настройка

Попробуем создать представление для страницы новости. Перейдем в папку \Views\Default нашего приложения. Здесь мы увидим единственное представление Page.cshtml (наша главная страница). Скопируем его, назовем копию NewsPage.cshtml и откроем для редактирования в любом текстовом редакторе:

В качестве типа данных модели представления указан dynamic, но мы с вами знаем, что в действительности это будет объект C#-класса ObjectViewModel, содержащий данные нашего объекта класса News Page.

Доступ к значениям свойств объекта производится так:

Доступ к объектам в источниках данных производится так:

Модифицируем наше представление, например, таким образом (конечно, лучше было бы не описывать разметку, необходимую для отображения тега прямо тут, а сделать отдельное частичное представления _Tag для этого; мы так поступили для упрощения и наглядности):

Теперь обновляем страницу в браузере и видим такой результат:

Вот здорово, все работает! Осталось только вывести список новостей на главную. Для этого добавим в класс Page такой источник данных:

Как видим, C#-класс источника данных отличается от того, который мы использовали перед этим. Это более обобщенный источник данных, не учитывающий связей между объектами. Также, обратите внимание на поле Parameters. Здесь приведен идентификатор класса, объекты которого необходимо загрузить. В текущей версии Платформуса это делается не совсем изящно, без какого-либо визуального селектора.

Теперь перейдем к редактированию объекта главной страницы, уберем все лишнее содержимое. (Содержимое можно и не изменять, но открыть для редактирования и затем сохранить объект после добавления источника данных в его класс необходимо, иначе эта информация не подтянется в закешированный объект и не будет доступна представлению.)

Откроем теперь для редактирования представление Page.cshtml и изменим его примерно следующим образом:

Вот что мы получим теперь, если зайдем на главную страницу нашего веб-сайта в браузере:

Все готово! Конечно, было бы правильно добавить сюда еще, как минимум, меню или форму обратной связи, но сделать это очень просто (см. ссылку ниже), поэтому не будем на этом заострять внимание.

Заключение

Думаю, первый вопрос, на который необходимо ответить себе, прежде чем начинать разработку очередной CMS — «Зачем?». Если не вдаваться в подробности, то, как минимум, сейчас еще не так много CMS на ASP.NET Core, а мне эта платформа очень нравится и я верю в ее будущее.

Искренне надеюсь, что вам было интересно, а также, что получу критику, идеи, пищу для размышлений для дальнейшего совершенствования продукта — мы лишь в начале пути. Спасибо!

Я не выкладывал код именно этого проекта на GitHub, т. к. он очень похож на другой пример, который вы можете скачать и посмотреть, чтобы не проделывать все вручную.

Build a Web App with ASP.NET Core MVC and EF Core

In this post, I will show how to build a web application using ASP.NET Core MVC and Entity Framework Core. The application will manage a database of TV Shows and its main page will look like below at the end.

I will demonstrate how to

• Create an ASP.NET Core MVC project
• Add and scaffold a model
• Work with a database using Entity Framework Core
• Add validation
• Add a new field

For the application development, I will use

• Visual Studio 2017 Community Edition (free)
• .Net Core SDK 2.2 (free)
• Microsoft Sql Server Express (free)

For a better understanding of this post, I suggest you read the below post first:

ASP.NET Core MVC Web Application (Project Structure)

In this post, I will make a brief introduction to ASP.NET Core MVC and then explain the project structure of an ASP.NET…

If you are ready, let’s get started.

Creating the Starter Project

First, open File -> New -> Project.

Select ASP.NET Core Web Application, give your project a name and select OK.

In the next window, select .Net Core and ASP.Net Core 2.2 as shown in the red box and select Web Application (Model-View-Controller) and then click OK.

At this point, we have a starter project. Let’s run the project (Crtl + F5) to see everything is OK.

You can change the browser that you want to run the site from below:

After running we get the Welcome page as below:

MVC invokes controller classes (and the action methods within them) depending on the incoming URL. The default URL routing logic used by MVC uses a format like this to determine what code to invoke:

The routing format is set in the Configure method in Startup.cs file.

When you browse to the app and don’t supply any URL segments, it defaults to the HomeController and the Index method specified as above. So, if you enter https://localhost:/Home/Index as URL, you will get the same Welcome page shown above.

In the Views/Shared/_Layout.cshtml file, make the following changes in the title, menu link and the footer.

After the changes, our site looks like below:

We changed the menu link’s controller to TvShows and we will implement that in the next section.

Adding a Model and Scaffolding

Now, we will implement our data model class (Model part of the MVC app). We will use this class with Entity Framework Core (EF Core) to work with a database. EF Core is an object-relational mapping (ORM) framework that simplifies the data access code. Model classes don’t have any dependency on EF Core. They just define the properties of the data that will be stored in the database.

In this post, we will write the model classes first and EF Core will create the database. This is called Code First Approach.

Now, right click the Models folder and select Add->Class.

Give the name TvShow.cs to the class and select OK. Then add the following properties to the class.

Then add another class called Genre.cs as below:

At this point, we need to build the project.

Next, we will create our controller and views (View-Controller part of the MVC app).

Right click the Controllers Folder and select Add -> Controller.

In the following window, select MVC Controller with views, using Entity Framework and click Add.

In the next window, select TvShow as Model class and click + sign in the Data context class and give it a name. Keep the default for the other fields and select Add.

At this point, scaffolding tool works. The automatic creation of the database context and CRUD (create, read, update, and delete) action methods and views is known as scaffolding.

We will now examine what Visual Studio added to our project automatically as the result of scaffolding:

1. Controller class -> Controllers/TvShowsController.cs

The following methods are the action methods of the TvShowsController:

• Index (GET)
• Details (GET)
• Create (GET & POST)
• Edit (GET & POST)
• Delete (GET & POST)

2. Razor view files for Create, Delete, Details, Edit, and Index pages -> Views/TvShows/*.cshtml

3. Dll.s related to Entity Framework Core (under Dependencies menu)

4. EF Core database context class -> Data/TvShowsContext.cs

The TvShowsContext coordinates EF Core functionality (Create, Read, Update, Delete, etc.) for the TvShow model. The TvShowsContext is derived from Microsoft.EntityFrameworkCore.DbContext. The data context specifies which entities are included in the data model:

The preceding code creates a DbSet<TvShow> property for the entity set. In Entity Framework terminology, an entity set typically corresponds to a database table and an entity corresponds to a row in the table.

The name of the connection string is passed into the context by calling a method on a DbContextOptions object. For local development, the ASP.NET Core configuration system reads the connection string from the appsettings.json file.

ASP.NET Core is built with Dependency Injection (DI). Services (such as the EF Core DB context) are registered with DI during application startup. Components that require these services are provided with these services via constructor parameters.

The scaffolding tool registered the DB context (TVShowsContext) with the DI container in the ConfigureServices method of Startup.cs as below:

In the Controllers/TvShowsController.cs , the constructor uses dependency injection to inject the database context ( TvShowsContext ) into the controller.

TvShowsContext is used in each of the CRUD methods in the TvShowsController.

Creating Database using Migrations

Now, we will create the database using the EF Core Migrations feature. Migrations lets us create a database that matches our data model and update the database schema when our data model changes.

First, we will add an initial Migration.

Open Tools -> NuGet Package Manager > Package Manager Console(PMC) and run the following command in the PMC:

The Add-Migration command generates code to create the initial database schema which is based on the model specified in the TvShowsContext class. The Initial argument is the migration name and any name can be used.

After running the command, a migration file is created under the Migrations folder:

As the next step, run the following command in the PMC:

The Update-Database command runs the Up method in the Migrations/_InitialCreate.cs file, which creates the database.

Now, we will check the database created. Open View -> Sql Server Object Explorer.

You will see the newly created database under the following path:

As you see, the TvShows table and the migration history table are created automatically. Then a record is inserted to the migration history table to show the executed migrations on the database.

Creating the First Record

Now, run the app and click Tv Shows App and then click Create New link.

For now, Genre drop-downlist is empty. We will edit Create.cshtml to load the list from the Genre enum as below:

After saving the Create.cshtml, if you refresh the browser the change will be reflected and Genre drop-downlist is loaded. Now we can create the first record. (You should do the same change in the Edit.cshtml too)

After clicking the Create button, the new record is shown as below in the Index page:

Besides we can check this from the table in the Sql Server:

Now we will show Imdb Url as a link. Change Views/TvShows/Index.cshtml as follows:

If we run the app again, Index page is shown as below:

You can do the same change for the Details page (Views/TvShows/Detail.cshtml) as well.

Adding Data Annotations to the Model

In this section, we will add data annotations to our model for validation and display purposes. Data Annotations provides a built-in set of validation attributes that you apply declaratively to any class or property. It also contains formatting attributes that help with formatting and don’t provide any validation.

Change the TvShow.cs as follows:

If we run the application and try to create a new record as below, we can see the effect of these data annotations:

The errors are enforced both client-side (using JavaScript and jQuery) and server-side (in case a user has JavaScript disabled).

For server-side validation, the second Create method (POST version) calls ModelState.IsValid to check whether the movie has any validation errors.

Adding a New Field

We will now add Image Url field to our application and show the poster of the TV Show in the records.

First, add this property to the TvShow model (Models/TvShow.cs) as follows:

Then build the application.

Next, we will use Code First Migrations to add this field to the db table. Run the following commands in the PMC:

We can see from Sql Server Object Explorer that the ImageUrl is added to the table as below:

Now, we will update the [Bind] attribute for the Create and Edit POST methods in the TvShowsController.cs:

Next, we need to change the Index, Create, Edit, Delete views to show this new field.

Add the following part shown in the red box to the Edit.cshtml.

And change the Index.cshtml as below:

Go to the Edit page for the record we created and enter the following image url in the Poster field:

You should copy the image file under wwwroot/images directory.

After pressing the Save button, our record is shown as below in the Index page:

You should change the Create, Details and Delete views to show the new field as well.

Lastly, let’s change the display format of the Rating field so that it only shows one digit after the decimal separator. Add the following line to the TvShow.cs and build the application.

Now our application is ready to enter our favourite TV shows. I entered mine, you can enter yours 🙂

You can access the full project from here.

I hope you enjoyed reading this post and found it helpful and easy to understand. Please let me know if you have any comments and/or corrections.

And if you liked this post, please clap your hands ������

UPDATE (16/06/2019): If you are interested in .NET Core and want to find out more, you can check this .NET Core publication. The posts in the publication are as below:

If you want, you can follow this publication and be informed when a new post arrives.

First ASP.NET Core 6.0 MVC Application

In this ASP.NET Core Tutorial you will create your first application in Visual Studio 2022 .

Create ASP.NET Core 6.0 app in Visual Studio 2022

Open Visual Studio 2022, then select Create a new project under the Get started section.

This will open Create a new project window. Now here select the template called ASP.NET Core Web App (Model-View-Controller) , and then click the “Next” button.

What should I learn before learning ASP.NET Core

Before you start learning ASP.NET Core, you should have a basic knowledge of HTML CSS and C#. HTML and CSS are used in the Views which forms the UI component of ASP.NET Core MVC. C# is a programming language to create code logics like communicating with database, searching for a value in the data, and so on.

Is ASP.NET Core good for my Career? ASP.NET Core is currently in the top 3 – “most demanding programming technology”. It is a product of Microsoft who entered way back in 2002 with .NET framework. Twenty years have already passed, so it is a surety that this technology which remain for a very-very long time. Entry level ASP.NET Core developers are always in good demand, and get starting yearly salaries of around $50k in United States alone. In India the starting salaries are around 4 to 5 lakhs per annum.

Configure your new project in Visual Studio 2022

Next you will Configure your new project . So add the name of the project as FirstApp and select the location on your drive where you want this application to be created.

Click the Next button to continue. You will reach a Additional Information page where you have to select the framework and authentication .

Ensure that .NET 6.0 framework is selected and authentication is set to None. Option of Docker should also be un-checked.

Finally click the Create button to create your application.

You app will be created in a few seconds and is ready to be run. Select Start Debugging from the Debug menu (if it prompts you to enable debugging, just click the OK button). You can also start debugging by using a shortcut which is F5 key.

Visual Studio will build your application and open it on your default browser. It will look something like as shown on the below image.

MVC files and folders

• wwwroot – contains the static files like images, scripts, external frameworks and libraries like Bootstrap, jQuery.
• Controllers – This folder contains the controller files.
• Models – This folder contains the model files.
• Views – This folder contains the view files.
• appsettings.json – This file contains configuration settings of the application. You can use it to store database connection string, application variable values and other informations.
• program.cs – It is your application’s entry point which starts when you run your application. Here you create your application host, choose the web server, add services, authorization and authentications.
• startup.cs – Note – DOT NET 6.0 does not have startup.cs. If you are using earlier versions of .NET only then you need to have this file in your app. The startup.cs is called from the program.cs file. Here you add services and configure the HTTP pipeline. You also write URL Routes in this file.

The above are just a brief description of these MVC files and folders. You will get complete understanding on these files as you carry on with their individual tutorials which are already available on this site.

Adding a Controller

As explained earlier a ASP.NET Core Controller is a C#, VB or F# class, whose task is to handle all incoming HTTP requests. A Controller can have one or more action methods . Each action methods can be invoked from the web by some URL’s. For example: If a controller named ‘Home’ has an action method named ‘Calculate’ then this action method can be invoked by opening the URL – /Home/Calculate on the browser.

By default, the Visual Studio adds the ‘Home’ controller. Now you will add a new controller, so right click the Controllers folder on the Solutions Explorer. Then select Add ➤ Controller on the menu.

You will get a new dialog box, here select the first option saying – MVC Controller – Empty and click ‘Add’ button.

Next, another dialog box opens where you can give the name to the controller. Name this controller – FirstController , and click the ‘Add’ button.

The new controller gets added to your Application and VS opens it up for editing. By default it will have the following code given below:

I have written the controllers code without using the namespace parenthesis. See the highlighted code line given below.

Action method returning String

The Controller, which I created earlier, has one action method which is named Index . I am going to change this method so that it returns a string.

So, change this action method to:

Now the action method returns a string – ‘Hello World’.

Let us invoke this action on the browser. Run the application by clicking Debug ➤ Start Debugging or press the F5 key . Visual Studio will open the browser showing the Home page.

Change the URL on the browser to – http://localhost:59009/First/Index and press enter. You will see – ‘Hello World’ on the browser as shown below.

Here 59009 is the port of my application, in your case it will be different. So make sure you keep your application port in the browser url. The ‘Index’ action method is the default action method as set on the Program.cs (or Startup.cs file if you are using Dot Net 5 or earlier), so you don’t have to explicitly specify it on the browser URL. The above action can simply be invoked by http://localhost:59009/First.

This action method returns a string therefore there is no need to create a View. In general, most of the time you will need action methods that returns a ‘View’. So for these actions the return type should be specified as IActionResult

Action method returning View

Add a new action method to the controller and name it ‘Hello’. Note here we will have the return type of IActionResult as it is returning a View.

Run your application (shortcut F5 key) and then go to the action method’s URL – http://localhost:59009/First/Hello .

You will see that the application is trying to find the view, as shown in the error message displayed below.

The error states:

This is a helpful message explaining the error occurred due to absence of the View file in our application.

ASP.NET Core MVC Views are stored in the Views folder and organized into subfolders. Views associated with the controller called ‘FirstController.cs’ are stored in Views/First folder. Views, not specific to a single controller, are stored inside the folder called Views/Shared . So you create get rid of this error by creating the ‘Hello’ View in either ‘Views/First’ or ‘Views/Shared’ folder.

But there is a catch, if you put ‘Hello’ View inside the ‘Views/Shared’ folder, and another Controller, suppose AnotherController.cs also has an action method by the same name – ‘Hello’, and this action does not has it’s specific view (i.e. inside Views/Another folder). So, whenever the ‘Hello’ action of any controller (‘First’ or ‘Another’) is invoked then Views ➤ Shared ➤ Hello will be called by the ASP.NET Core runtime engine.

• /First/Hello
• /Another/Hello

Now let us create a specific view for the ‘Hello’ controller. Start by right clicking on the Views folder and select Add ➤ New Folder . Name this new folder First .

Next, right click on this ‘First’ folder and select Add ➤ New Item . Then on the dialog box that shows up, select Razor View – Empty, and click the Add button.

Name your view as ‘Hello’ and finally click the ‘Add’ button to create this view. VS will create it and opens it for editing. Add the following code looks to this newly created View file:

1. Added ViewData variable “Title” with a string value “Hello”. This will be set as the page title.
2. A H2 tag with Hello World which will be shown on the page.

Now run your application and go the URL – http://localhost:59009/First/Hello .

You will see the view rendered on the browser as shown below:

Notice 2 things, the page title on the browser is set as “Hello” and the page shows “Hello World” in h2 tag. You successfully created your first view and invoked it from the browser. Next you will see how to add dynamic data to the View.

Adding Dynamic Data to the View

Passing data from Controllers to Views are done in a number of ways. I will explain all these ways to you later on. For here, I will make use of ViewBag which is a dynamic object to assign any type of value.

Now change ‘Hello’ action method to include ‘ViewBag’ code that assigns a variable to a string “Hello World”. I have named the variable as ‘Message’ (it can be any name for the variable).

The action stores the string on the ‘ViewBag’ variable called Message. Now you have to display this stored string on the View. So change the Hello.cshtml code to this:

The change is inside the h2 tag which now contains @ViewBag.Message . It simply displays the value of the ‘ViewBag’s Message’ passed from the Controller.

Re-run the application and go to the /First/Hello on the browser. You will get the same result like before but here you have made it dynamic.

Adding Model and transferring it’s data to the View

In this section I will add a Model to the application. Model, as we all know, is the building block of an MVC application. I will fill this Model from the Controller and then pass it to the View, where it will be displayed on the browser. Note that Models are nothing but C# classes.

I will add a simple class to the Models folder. So, right click the Models folder and select Add ➤ Class . Name the class as ‘Person.cs’. Add the below properties to it:

It is a simple class that contains 3 properties – Nam, Age and Location. Now I will fill these 3 properties with values in the Controller.

Go to the ‘First’ Controller and add a new action method by the name ‘Info’. The code of the Controller looks like this:

In the Info Action Method I have created a new object for the Model class ‘Person’. Then assigned the Name property as ‘John’, Age property as 18 and Location property as ‘United States’ to this object. Finally at the end, the ‘person’ object is returned to the View (from code View(person) ).

Now Model is filled in the Controller and we have to show it’s data on the View. So create ‘Info’ view file inside the Views ➤ First folder.

The Info view initially will have the following code:

Update the View by defining the Model type (which is the Person class) it gets from the Controller, on the top like this:

Note: It will receive the Model of type ‘Person’ so I have added ‘Person’ there.

Finally, to show the Model data, add the below code to the View:

Run the application and navigate to /First/Info on the browser. Your Model data will be display like shown on the image below.