Asp net mvc для начинающих

Особенности платформы 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 подобного не позволяет делать.

Обновленную версию этого учебника доступен здесь с последней версией Visual Studio. An updated version of this tutorial is available here using the latest version of Visual Studio. Использует новое учебное ASP.NET Core MVC, который предоставляет многих усовершенствования, внесенные через этот учебник. The new tutorial uses ASP.NET Core MVC, which provides many improvements over this tutorial.

В этом руководстве описывается модель MVC ASP.NET Core с контроллерами и представлениями. This tutorial teaches ASP.NET Core MVC with controllers and views. Страницы Razor — это новая альтернатива в ASP.NET Core 2.0, представляющая собой основанную на страницах модель программирования, которая упрощает и повышает эффективность создания пользовательского веб-интерфейса. Razor Pages is a new alternative in ASP.NET Core 2.0, a page-based programming model that makes building web UI easier and more productive. Рекомендуем вам сначала попробовать изучить руководство по Razor Pages, прежде чем использовать версию для MVC. We recommend you try the Razor Pages tutorial before the MVC version. Руководство по Razor Pages: The Razor Pages tutorial:

• проще для выполнения; Is easier to follow.
• охватывает дополнительные возможности; Covers more features.
• является предпочтительным подходом для разработки новых приложений. Is the preferred approach for new application development.

Этот учебник поможет основы создания приложения web ASP.NET MVC 5 с помощью Visual Studio 2017. This tutorial teaches you the basics of building an ASP.NET MVC 5 web app using Visual Studio 2017. Последний исходный код для руководства находится на GitHub. The final source code for the tutorial is located on GitHub.

Вам потребуется учетная запись Azure, чтобы развернуть это приложение в Azure: You need an Azure account to deploy this app to Azure:

• Вы можете открыть учетную запись Azure бесплатно -вы получаете кредиты можно использовать для опробования платных служб Azure и даже в том случае, если они используются, вы сохраняете учетную запись и использовать бесплатные службы Azure. You can open an Azure account for free — You get credits you can use to try out paid Azure services, and even after they’re used up you can keep the account and use free Azure services.
• Вы можете активировать преимущества подписчика MSDN -ваша подписка MSDN предоставляет вам кредиты каждый месяц, который можно использовать для оплаты служб Azure. You can activate MSDN subscriber benefits — Your MSDN subscription gives you credits every month that you can use for paid Azure services.

Начало работы Get started

Начните с установки Visual Studio 2017. Start by installing Visual Studio 2017. Откройте Visual Studio. Then, open Visual Studio.

Visual Studio является интегрированной среды разработки или интегрированной среды разработки. Visual Studio is an IDE, or integrated development environment. Так же, как использовать Microsoft Word для записи документов, вы используете интегрированную среду разработки для создания приложений. Just like you use Microsoft Word to write documents, you’ll use an IDE to create applications. В Visual Studio имеется список внизу отображаются различные параметры, доступные для вас. In Visual Studio, there’s a list along the bottom showing various options available to you. Имеется также меню, которое предоставляет еще один способ выполнения задач в интегрированной среде разработки. There’s also a menu that provides another way to perform tasks in the IDE. Например, вместо выбора новый проект на начальной страницы, можно использовать в строке меню и выберите файл > новый проект. For example, instead of selecting New Project on the Start page, you can use the menu bar and select File > New Project.

Создание первого приложения Create your first app

На начальной страницывыберите новый проект. On the Start page, select New Project. В новый проект диалоговом окне выберите Visual C# категории слева, затем Web, а затем выберите веб-приложение ASP.NET (.NET Framework) шаблона проекта. In the New project dialog box, select the Visual C# category on the left, then Web, and then select the ASP.NET Web Application (.NET Framework) project template. Назовите проект «MvcMovie», а затем выберите ОК. Name your project "MvcMovie" and then choose OK.

В новое веб-приложение ASP.NET диалоговом окне выберите MVC и выберите ОК. In the New ASP.NET Web Application dialog, choose MVC and then choose OK.

Visual Studio используется шаблон по умолчанию для проекта ASP.NET MVC, который вы только что создали, поэтому у вас есть рабочее приложение прямо сейчас не выполняя никаких действий! Visual Studio used a default template for the ASP.NET MVC project you just created, so you have a working application right now without doing anything! Это связано с простых «Hello World!» This is a simple "Hello World!" проекта, а вот отлично подходит для запуска приложения. project, and it’s a good place to start your application.

Нажмите клавишу F5 , чтобы начать отладку. Press F5 to start debugging. При нажатии клавиши F5, Visual Studio запускает IIS Express и запускает веб-приложения. When you press F5, Visual Studio starts IIS Express and runs your web app. Затем Visual Studio запустит браузер и откроется домашняя страница приложения. Visual Studio then launches a browser and opens the application’s home page. Обратите внимание, что говорит в адресной строке браузера localhost:port# и не что-либо типа example.com . Notice that the address bar of the browser says localhost:port# and not something like example.com . Это потому, что localhost всегда указывает на локальном компьютере, который выполняется, в этом случае приложение, вы только что выполнили. That’s because localhost always points to your own local computer, which in this case is running the application you just built. При запуске веб-проекта Visual Studio для веб-сервера используется случайный порт. When Visual Studio runs a web project, a random port is used for the web server. На рисунке ниже номер порта — 1234. In the image below, the port number is 1234. При запуске приложения вы увидите другой номер порта. When you run the application, you’ll see a different port number.

Готовые этот шаблон по умолчанию дает Home , Contact , и About страниц. Right out of the box this default template gives you Home , Contact , and About pages. На следующем рисунке не показывает Главная, о, и контакт ссылки. The image below doesn’t show the Home, About, and Contact links. В зависимости от размера окна браузера может потребоваться щелкнуть значок навигации, чтобы найти по следующим ссылкам. Depending on the size of your browser window, you might need to click the navigation icon to see these links.

Приложение также предоставляет поддержку для регистрации и входа. The application also provides support to register and log in. Следующий шаг — изменить работу этого приложения и немного поговорим об ASP.NET MVC. The next step is to change how this application works and learn a little bit about ASP.NET MVC. Закройте приложение ASP.NET MVC и изменим код. Close the ASP.NET MVC application and let’s change some code.

Список действующие руководства, см. в разделе MVC рекомендуется статьи. For a list of current tutorials, see MVC recommended articles.

Это приложение работает в Azure см. в разделе See this app running on Azure

Вы действительно хотите см. по завершении сайт, запущенный в качестве активного веб-приложения? Would you like to see the finished site running as a live web app? Полную версию приложения можно развернуть учетную запись Azure, просто нажав кнопку ниже. You can deploy a complete version of the app to your Azure account by simply clicking the following button.

Требуется учетная запись Azure для развертывания этого решения в Azure. You need an Azure account to deploy this solution to Azure. Если у вас нет учетной записи, воспользуйтесь одним из следующих параметров для ее создания. If you don’t already have an account, use one of the following options to create one:

• Открыть учетную запись Azure бесплатно -вы получаете кредиты можно использовать для опробования платных служб Azure и даже в том случае, если они используются, вы сохраняете учетную запись и использовать бесплатные службы Azure. Open an Azure account for free — You get credits you can use to try out paid Azure services, and even after they’re used up you can keep the account and use free Azure services.
• Активируйте преимущества для подписчиков Visual Studio -ваша подписка Visual Studio предоставляет вам кредиты каждый месяц, который можно использовать для оплаты служб Azure. Activate Visual Studio subscriber benefits — Your Visual Studio subscription gives you credits every month that you can use for paid Azure services.

Asp.net для начинающих: Базовые понятия в ASP.NET MVC. Создание проекта

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

Запустите Visual Studio, в меню выберите "File"->"New"->"Project. "

В открытом окне выбираем из списка Installed Templates "Web" (1). Дальше выбираем "ASP.NET MVC 3 Web Application" (2). Пишем название проекта и путь к каталогу, где оно будет находиться (3)

Жмем ОК. В следующем окне оставляем выбранным "Internet Application" и жмем ОК

У нас создаться базовый проект asp.net mvc. После нажатия клавиши F5 (Start Debugging), мы увидим наш сайт (запуститься виртуальный IIS и на панели Пуск появится значок, которые отображает его работу). Каждый сайт запущенный с помощью Visaul Studio работает на каком-то порту (например, localhost:29663) по этому не волнуйтесь, если цифры у Вас будут отличатся от моих.

Что же нам насоздавала студия, и как работает asp.net mvc приложение.

Для начала нужно понять простую логику работы всех сайтов и то чем они отличаются от дескоп/windows приложений.

Когда мы открываем какой-то сайт (например www.aspnet.com.ua/Category/category-3.aspx), то отправляется запрос на сервер (это равносильно событию нажатия какой-то кнопки в дескоп приложений), и говорим серверу отдать нам какую-то информацию (в нашем примере отдать инфу о "категории 3" сайта aspnet.com.ua).

Сервер, в свою очередь, либо знает эту команду (этот url) и отдает нам нужную инфу, либо возвращает ошибку (например страничку 404). После того, как сервер команду выполнил, он про нас запрос забывает.

Когда мы на сайте жмем какую-то кнопку, то в целом это равносильно открытию новой странички сайта новым пользователем. Сервер совершено не помнит, что он нам перед этим отдавал и кто мы. Т.е. сервер работает по принципу: отдал-забыл.

При дальнейшем развитии интернета начали придумывать всякие хитрости, что бы сервер как-то запоминал с кем он работает и что бы нам было легче напоминать серверу, какую инфу мы до этого получали (это я говорю про Cookie, Session и прочие вещи).

На заметку. Технология asp.net forms стремилась к такому принципу: легко напоминать серверу, какие действия применялись до этого клиентом и какую информацию клиент уже получил. Так появилось понятия ViewState — это сохраненная информация состоянии странички. Но эта технология была не удачной

Перейдем теперь к тому, как работает asp.net mvc технология. (Сейчас я опишу совсем базовые вещи, многие шаги упущены для простоты).

Для начала откройте окно "Solutin Explorer" в VS (если его нет, то его можно найти в меню "View"-> "Solutin Explorer"). В нем мы увидим все файлы проекта. (это окно удобно разместить справа, так как мы постоянно будем ним пользоваться).

Нас сейчас интересует папка Controllers — в ней мы создаем файлики, которые будут обрабатывать наши действия (обрабатывать наши url). Так же нас интересует файл Global.asax, в нем мы будет задавать какой файл из папки Controllers какой url будет обрабатывать. Откроем файл Global.asax и найдем вот такой код:

public static void RegisterRoutes(RouteCollection routes)
<
routes.IgnoreRoute(".axd/<*pathInfo>");

Это правило привязки url к Controllers. Удалим строку с "routes.MapRoute. " по ". UrlParameter.Optional > );" Вместо нее мы напишем свои три правила:

routes.MapRoute(
"Root", // название правила
"", // какой URL
new < controller = "Home", action = "Index" >//какой файл controller
);

routes.MapRoute(
"Home-About", // название правила
"About.aspx", // какой URL
new < controller = "Home", action = "About" >//какой файл controller
);

routes.MapRoute(
"Account-LogOn", // название правила
"Account/LogOn.aspx", // какой URL
new < controller = "Account", action = "LogOn" >//какой файл controller
);

Каждое правило имеет свое название, которое не должно повторятся ("Root" "Home-About" "Account-LogOn"). Так же каждое правило должно указывать URL и controller, который будет это действие обрабатывать.

Сейчас в моем сайте есть три странички/три правила:

— Account/LogOn.aspx — ее будет обрабатывать контроллер AccountController и метод этого контроллера LogOn

— About.aspx — эту страничку будет обрабатывать контроллер HomeController и метод этого контроллера About

— корневая стр — ее будет обрабатывать контроллер HomeController и метод этого контроллера Index

Теперь откроем файл HomeController (для открытия файлов пользуйтесь "Solutin Explorer") в этом файле вы увидите класс HomeController, которые наследуется от класса Controller и два метода этого класса Index и About. Эти методы и будут обрабатывать наши url.

Основная логика работы приложения пишется в этих методах (например считывания или внесение информации в базу данных). Давайте мы в методе Index считаем серверное время, а вот в методе About посчитаем сколько будет 345 умножить на 23.

public class HomeController : Controller
<
public ActionResult Index()
<
var date = DateTime.Now;

public ActionResult About()
<
var result = 345 * 23;
return View();
>
>

Теперь нам нужно результат свои действий отобразить пользователю. В web приложениях это делается с помощью html страничек. Эти странички, как правило, находятся в папке View (пользуйтесь "Solutin Explorer"). В папке View для каждого контролера создается своя папка с названием этого контроллера (так легче ориентироваться). Создадим несколько страничек.

Правой клавишей нажимаем на папке "Home" в контекстном меню выбираем "Add"->"View. "

Перед нами откроется окно, в котором мы укажем имя нашей страничке "ViewDateTime". Так же нужно убрать галочку "Use layout or master page", о ней мы поговорим позже. Итак, окно должно иметь вид:

Жмем Add. Студия создаст нам файл ViewDateTime.cshtml и создаст в нем базовую структуру html. Таким же образом добавим еще файл ViewResult

Вернемся теперь к нашим методам контролера. Изменим строку "return View();" в методе Index на "return View("

/Views/Home/ViewDateTime.cshtml", date);" а в методе About на "return View("

Это означает, что результат своих действий мы будем отображать на представлениях (View) ViewDateTime и ViewResult соответственно, так же мы в эти представления передали date и result.

Что бы упростить жизнь программистам и не писать всегда длинный путь ("

/Views/Home/. cshtml) к файлам отображения принято использовать такие правила:

return View(); // означает, что файл отображения находиться в папке с именем контролера, а файл имеет тоже название что и метод. Пример, для метода Index контролера HomeController представление будет находиться "

/Views/Home/Index.cshtml"
return View("MyView"); // означает, что файл отображения находиться в папке с именем контролера, а файл имеет название MyView. Пример, для метода Index контролера HomeController представление будет находиться

Исходя из выше сказанного еще раз изменим строки кода: метод Index будет возвращать return View("ViewDateTime", date); а метод About вернет return View("ViewResult", result);

Теперь обратите внимания, что кроме указания View-файла мы еще передаем данные для отображения (date и result). Сейчас нам нужно настроить их корректное отображение.

Откроем файл ViewDateTime.cshtml и вначале добавим код "@model DateTime". Он означает, что файл ViewDateTime будет отображать переменную типа DateTime. Если бы мы не задавали, какой тип переменой будет отображать данное представление, то код был бы рабочим, но тогда на этой страничке у нас не было подсказки. Между тегами добавим код @Model.ToShortDateString().

Используя код @Model — мы обращаемся к объекту, который передали в View. Полный код файла ViewDateTime.cshtml

@model DateTime
@ <
Layout = null;
>