Mvc на чистом javascript

Введение

В наше время сложно найти разработчика, который не слышал бы о паттерне под названием Model-View-Controller или сокращенно MVC, что вообщем не удивительно, с задачей отделения данных от их представления сталкиваешься практически на каждом проекте. Однако, как ни странно, столь же сложно найти разработчика, который действительно четко себе представляет, что такое на самом деле паттерн MVC и как его можно реализовать в конкретной ситуации. Подобное неведение явилось следствием того, что по историческим причинам данной аббревиатурой принято называть не один единственный паттерн, а целое семейство паттернов, призванное отделять представление от модели. Произошло это в силу разных обстоятельств. Отчасти из-за того что MVC не просто паттерн, а довольно объемное архитектурное решение, в котором каждый новый разработчик видел что-то свое и ставя во главу угла особенности своего проекта, реализовывал его по своему. Отчасти же из-за возраста данного паттерна, во времена его изобретения и сами приложения, и графические интерфейсы были существенно беднее чем в наше время, с тех пор они сильно эволюционировали и вместе с ними изменялся и сам паттерн. Данная статья посвящена также одному из паттернов входящих в это семейство, причинам его появления, особенностям применения, преимуществам и недостаткам, а так же описанию сопутствующих паттернов.

The View (V)

When users interacts with your app, they are interacting with the view layer. It should not contain any business logic. In code terms, you’ll normally see:

• subclasses: These range from a basic to complex custom UI controls.
• Classes that are part of UIKit/AppKit.
• Core Animation.
• Core Graphics.

Typical code smells found in this layer manifest in different ways but boil down to include anything unrelated to UI in your view layer. This can include network calls, business logic, manipulating models and so on.

Use the following as a checklist when inspecting your view layer:

• Does it interact with the model layer?
• Does it contain any business logic?
• Does it try to do anything not related to UI?

If you answer “yes” to any of these questions, you have an opportunity to clean up and refactor.

Of course, these rules aren’t written in stone and sometimes you’ll need to bend them. Nonetheless, it’s important to keep them in mind.

Well-written view components are often reusable, but don’t focus on that from the start. It’s easy to get caught up in the thought of taking a cool button you built and making it compatible for a dozen different scenarios that your app may never need.

Consider making components reusable only when you actually need to. When you have multiple use cases, that’s the time to make a component more generic.

From a testing perspective, UI testing in iOS allows you to test things like transitions, UI elements having specific attributes or UI interactions working as intended.

RV¶

См.также

• Pyramid wikipedia

В защиту своего дизайна авторы Pyramid написали довольно большой документ,
который призван развеять мифы о фреймворке. Например, на критику модели MVC в
Pyramid следует подробное объяснение, что MVC «притянут за уши» к
веб-приложениям. Следующая цитата хорошо характеризует подход к терминологии в
Pyramid:

Паттерн RV (Resources-View)

Веб ограничен URL, который и представляет из себя дерево ресурсов или
структуру сайта.

Также протокол HTTP не позволяет хранить состояние и
отправлять/принимать оповещения клиенту от сервера, что ограничивает
возможность отслеживания действий клиента для последующего уведомления модели
на изменение состояния.

Поэтому данные часто используются на «frontend»-е
(например в связке React/Redux), а на стороне сервера формируются только один
раз во время ответа, либо загружаются отдельным запросом при помощи AJAX, или
даже с помощью других протоколов, например WebSocket.

RV фреймворки:

MVC в реальном приложении

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

Сначала напишем небольшой интерфейс в HTML-документе. Мы просто добавим пару кнопок и два поля для ввода данных. Да, калькулятор у нас будет довольно посредственный и не особо умный. 

Потом добавим «слушатель», то есть дадим браузеру команду отслеживать клики по заранее определенным кнопкам. В нашем случае это кнопка с тегом summarize. Это и есть наш контроллер, он будет передавать данные из интерфейса в модель, а потом забирать их и возвращать в интерфейс. 

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

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

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

Основные сведения о представлениях

Два действия контроллера, предоставляемые классом HomeController, index () и About (), возвращают представление. Представление содержит разметку HTML и содержимое, отправляемое в браузер. Представление является эквивалентом страницы при работе с ASP.NET приложением MVC.

Необходимо создать представления в правильном расположении. Действие HomeController. index () возвращает представление, расположенное по следующему пути:

\виевс\хоме\индекс.аспкс

Действие HomeController. About () возвращает представление, расположенное по следующему пути:

\виевс\хоме\абаут.аспкс

В общем случае, если требуется возвратить представление для действия контроллера, необходимо создать вложенную папку в папке Views с тем же именем, что и у контроллера. Во вложенной папке необходимо создать файл. aspx с тем же именем, что и действие контроллера.

Файл в листинге 3 содержит представление About. aspx.

Листинг 3 — About. aspx

Если пропустить первую строку в листинге 3, большая часть представления состоит из стандартного кода HTML. Вы можете изменить содержимое представления, введя нужный HTML-код.

Представление очень похоже на страницу Active Server страниц или веб-форм ASP.NET. Представление может содержать HTML-содержимое и скрипты. Скрипты можно писать на любом языке программирования .NET (например, C# или Visual Basic .NET). Скрипты используются для просмотра динамического содержимого, например данных базы данных.

Передача данных из контроллера в представление

Тем не менее, прежде чем перейти к базе данных и поговорить о моделях, давайте сначала поговорим о передаче информации из контроллера в представление. Классы контроллеров вызываются в ответ на входящий запрос URL-адреса. Класс контроллера — это место написания кода, обрабатывающего входящие запросы браузера, получение данных из базы данных и, в конечном итоге, выбор типа ответа, отправляемого обратно в браузер. Шаблоны представлений можно использовать из контроллера для создания и форматирования HTML-ответа в браузере.

Контроллеры несут ответственность за предоставление любых данных или объектов, необходимых для отображения шаблона представления в ответ на браузер. Рекомендуется: шаблон представления никогда не должен выполнять бизнес-логику или напрямую взаимодействовать с базой данных. Вместо этого шаблон представления должен работать только с данными, предоставленными ему контроллером. Поддержание такого » разделения проблем » помогает обеспечить чистоту, тестирование и удобство сопровождения кода.

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

Вернитесь в файл HelloWorldController.CS и измените метод, чтобы добавить в объект значение и . — Это динамический объект, который означает, что вы можете поместить в него все необходимое. объект не имеет определенных свойств, пока вы не помещаете в него что-либо. Система привязки модели MVC ASP.NET автоматически сопоставляет именованные параметры ( и ) из строки запроса в адресной строке с параметрами в методе. Полный файл HelloWorldController.cs выглядит следующим образом:

Теперь объект содержит данные, которые будут автоматически передаваться в представление. Теперь вам нужен шаблон представления приветствия! В меню Сборка выберите собрать решение (или CTRL + SHIFT + B), чтобы убедиться, что проект скомпилирован. Щелкните правой кнопкой мыши папку виевс\хелловорлд и выберите Добавить, а затем выберите страницу представления MVC 5 с макетом (Razor).

В диалоговом окне Укажите имя для элемента введите Welcomeи нажмите кнопку ОК.

В диалоговом окне Выбор страницы макета примите значение по умолчанию ** _ Layout. cshtml** и нажмите кнопку ОК.

Будет создан файл мвкмовие\виевс\хелловорлд\велкоме.кштмл .

Замените разметку в файле Welcome. cshtml . Вы создадите цикл с текстом Hello столько » » раз, сколько говорит пользователь. Полный файл Welcome. cshtml приведен ниже.

Запустите приложение и перейдите по следующему URL-адресу:

Теперь данные берутся из URL-адреса и передаются контроллеру с помощью связывателя модели. Контроллер упаковывает данные в объект и передает этот объект в представление. Представление затем отображает данные в виде HTML-кода для пользователя.

В приведенном выше примере мы использовали объект для передачи данных из контроллера в представление. Далее в этом руководстве для передачи данных из контроллера в представление мы будем использовать модель представления. Подход модели представления для передачи данных, как правило, является более предпочтительным по сравнению с использованием контейнера представления. Дополнительные сведения см. в записи блога о строго типизированных представлениях Dynamic V .

Ну, это разновидность » M » для модели, но не тип базы данных. Итак, обобщим все полученные данные и попробуем создать базу данных фильмов.

Назад
Вперед

Изменение представлений и страниц макета

Сначала нужно изменить » ссылку на имя приложения » в верхней части страницы. Этот текст является общим для каждой страницы. Фактически он реализуется только в одном месте проекта, хотя он отображается на каждой странице приложения. Перейдите в папку /виевс/Шаред в Обозреватель решений и откройте файл * _ Layout. cshtml* . Этот файл называется страницей макета и находится в общей папке, используемой всеми остальными страницами.

С помощью шаблонов макета можно в одном месте задать макет контейнера HTML для всего сайта и затем использовать его на разных страницах сайта. Найдите строку .  — это заполнитель, в котором отображаются все создаваемые страницы для определенных представлений, «упакованные» на странице макета. Например, если выбрать ссылку About , представление виевс\хоме\абаут.кштмл будет отображено внутри метода.

Измените содержимое элемента title. Измените значение ActionLink в шаблоне макета с » » имя приложения» » на » «ролик» в MVC » и контроллер с на . Полный файл макета приведен ниже.

Запустите приложение и обратите внимание, что теперь он говорит о » ролике MVC «. Щелкните ссылку About (о программе ), и вы увидите, как на этой странице » также отображается ролик MVC »

Мы смогли внести изменения один раз в шаблон макета и все страницы сайта отражали новый заголовок.

Когда мы сначала создали файл виевс\хелловорлд\индекс.кштмл , он содержал следующий код:

Приведенный выше код Razor явно задает страницу макета. Изучите файл views \ _ViewStart. cshtml , он содержит точную разметку Razor. Файл views \ _ViewStart. cshtml определяет общий макет, который будет использоваться всеми представлениями, поэтому можно закомментировать или удалить этот код из файла виевс\хелловорлд\индекс.кштмл .

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

Теперь изменим заголовок представления индекса.

Откройте мвкмовие\виевс\хелловорлд\индекс.кштмл. Изменение состоит из двух мест: первый — текст, отображаемый в заголовке браузера, а затем во вторичном заголовке ( элемент). Сделайте их немного разными, чтобы видеть, какой именно фрагмент кода изменяет соответствующую часть приложения.

Чтобы указать отображаемый заголовок HTML, приведенный выше код задает свойство объекта (которое находится в шаблоне представления index. cshtml )

Обратите внимание, что шаблон макета ( Views\Shared \ _layout. cshtml ) использует это значение в ЭЛЕМЕНТЕ как часть раздела HTML, который мы изменили ранее

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

Запустите приложение

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

Нажмите сочетание клавиш CTRL + F5 в браузере, чтобы принудительно загрузить ответ от сервера.) Заголовок браузера создается с заданными в шаблоне представления index. cshtml и дополнительным » приложением-фильмом, » добавленным в файл макета.

Также обратите внимание, что содержимое в шаблоне представления index. cshtml было объединено с шаблоном представления * _ Layout

cshtml* и в браузер был отправлен один ответ HTML. С помощью шаблонов макета можно легко вносить изменения, которые применяются ко всем страницам приложения.

Немало » данных » (в данном случае » Hello из нашего шаблона представления! » Message) жестко закодированы. Приложение MVC имеет » V » (представление), и у вас есть » C » (контроллер), но » еще нет M » (модель). Вскоре мы рассмотрим, как создать базу данных и извлечь из нее данные модели.

Creating a View

You can create a view for an action method directly from it by right clicking inside an action method and select Add View...

The following creates a view from the action method of the , as shown below.

Create a View from Action Method

This will open the Add View dialogue box, shown below.
It’s good practice to keep the view name the same as the action method name so that you don’t have to explicitly specify the view name in the action method while returning the view.

Add a View

Select the scaffolding template. Template dropdown will show default templates available for Create, Delete, Details, Edit, List, or Empty view. Select «List» template because we want to show the list of students in the view.

ADVERTISEMENT

Now, select from the model class dropdown. The model class dropdown automatically displays the name of all the classes in the folder.
We have already created the model class in the previous section, so it would be included in the dropdown.

Add a View

Check «Use a layout page» checkbox and select the default page for this view and then click Add button.

This will create the view under View -> Student folder, as shown below:

View

The following code snippet shows an Index.cshtml created above.

Views\Student\Index.cshtml:
Copy

As you can see in the above view, it contains both HTML and razor codes.
Inline razor expression starts with @ symbol. @Html is a helper class to generate HTML controls. You will learn razor syntax and HTML helpers in the coming sections.

Index.cshtml

The above Index view would look as below when we run the application.

Index View

Note:

Every view in the ASP.NET MVC is derived from class included in namespace.

We need to pass a model object to a view in order to display the data on the view. Learn how to integrate a model, view, and controller in the next chapter.

What is MVC

With the project handy, it’s time to start learning about the Model, the View and the Controller. But first, what exactly is MVC?

Note: If you already know the concept of MVC, feel free to skip ahead to the next section, where you’ll start getting into best practices.

MVC is a software development pattern made up of three main objects:

• The Model is where your data resides. Things like persistence, model objects, parsers, managers, and networking code live there.
• The View layer is the face of your app. Its classes are often reusable as they don’t contain any domain-specific logic. For example, a is a view that presents text on the screen, and it’s reusable and extensible.
• The Controller mediates between the view and the model via the delegation pattern. In an ideal scenario, the controller entity won’t know the concrete view it’s dealing with. Instead, it will communicate with an abstraction via a protocol. A classic example is the way a communicates with its data source via the protocol.

When you put everything together, it looks like this:

Each one of these objects is meant to be separate from the other, and each fulfills a specific role. When building an app that uses a specific pattern, in this case MVC, the goal is to adhere to the pattern when building all layers of your app.

Apple’s MVC documentation explains these layers in detail and can give you a good theoretical understanding. From a practical perspective, though, it falls a little short.

In this tutorial, you’ll learn to treat MVC as a pattern and not as a strict rule that you must never break. As is the case with many things in software development, nothing is perfect and neither is MVC. There are gray areas that you’ll run into, but no decision you make is the wrong decision. As long as you don’t have files that are too big, or code that is difficult to expand upon, then you’re likely doing a good job. Use MVC — and other patterns for that matter — as architectural guidelines and foundations for your app.

Having said that, it’s time to look at each layer in more detail.

Изоляция CSS

Выделять стили CSS для отдельных страниц, представлений и компонентов, чтобы уменьшить или избежать:

• Зависимости от глобальных стилей, которые могут быть непростыми в обслуживании.
• Конфликты стилей во вложенном содержимом.

Чтобы добавить CSS-файл с заданной областью для страницы или представления, поместите стили CSS в сопутствующий файл, соответствующий имени файла. В следующем примере файл предоставляет стили CSS, которые применяются только к странице или представлению.

(Razor Pages) или (MVC):

Изоляция CSS выполняется во время сборки. Платформа переписывает селекторы CSS в соответствии с разметкой, отображаемой страницами или представлениями приложения. Перезаписанные стили CSS упаковываются и создаются как статический ресурс . Заполнитель — это имя сборки проекта. Ссылка на Объединенные стили CSS помещается в макет приложения.

В содержимом ( Razor страницы) или (MVC) приложения добавьте или подтвердите наличие ссылки на Объединенные стили CSS:

В следующем примере имя сборки приложения :

Стили, определенные в файле CSS с заданной областью, применяются только к отображаемым выходным данным соответствующего файла. В предыдущем примере любые объявления CSS, определенные в любом расположении приложения, не конфликтуют с стилем заголовка. Каскадные и правила наследования стилей CSS действуют для файлов CSS с заданной областью. Например, стили, применяемые непосредственно к элементу в файле, переопределяют стили файла CSS с заданной областью в .

Примечание

Чтобы обеспечить изоляцию стиля CSS при выполнении объединения, импорт CSS в Razor блоках кода не поддерживается.

Изоляция CSS применяется только к элементам HTML. Изоляция CSS не поддерживается для вспомогательных функций тегов.

В объединенном файле CSS каждая страница, представление или Razor компонент связаны с идентификатором области в формате , где заполнитель представляет собой строку из десяти символов, созданную платформой. В следующем примере показан стиль предыдущего элемента на странице Razor приложения страниц.

На странице, где применяется стиль CSS из объединенного файла, идентификатор области добавляется как атрибут HTML:

Идентификатор уникален для приложения. Во время сборки создается пакет проектов с использованием соглашения , где заполнитель является базовым путем к статическим веб-ресурсам.

Если используются другие проекты, такие как пакеты NuGet или библиотеки классов Razor, то объединенный файл:

• ссылается на стили с помощью импорта CSS;
• не публикуется как статический веб-ресурс приложения, использующего стили.

MVVM

MVVMдаModel-View-ViewModelСокращение для. MicrosoftWPF (Windows Presentation Foundation — среда пользовательского интерфейса Microsoft на базе Windows)Приносит новый технический опыт, делая уровень пользовательского интерфейса программного обеспечения более детализированным и настраиваемым. В то же время на техническом уровне WPF также предоставляетПривязка (привязка), свойство зависимости (свойство зависимости), перенаправленные события (перенаправленные события), команда (команда), DataTemplate (шаблон данных), ControlTemplate (шаблон элемента управления)И другие новые функции.Режим MVVM на самом деле представляет собой новый тип архитектурного режима, разработанный, когда режим MV объединяется с WPF. Он основан на исходной платформе MVP и включает новые функции WPF для удовлетворения все более сложных потребностей клиентов.

Идея дизайна MVVM: обратите внимание на изменения модели и позвольте платформе MVVM автоматически обновлять состояние DOM, тем самым освобождая разработчиков от утомительных шагов по эксплуатации DOM

В чем разница между mvvm и mvc?

Разница между mvc и mvvm не такая уж большая. Это дизайнерская идея. В основном контроллер в mvc превратился в viewModel в mvvm. mvvm в основном решает проблему, заключающуюся в том, что большое количество операций DOM в mvc снижает производительность рендеринга страницы, снижает скорость загрузки и влияет на взаимодействие с пользователем. А когда Модель часто меняется, разработчикам необходимо активно обновляться до View.

В рамках MVVM представление и модель не могут взаимодействовать напрямую. Они могут взаимодействовать только через ViewModel. Он может отслеживать изменения в данных, а затем уведомлять представление об автоматическом обновлении, а когда пользователь манипулирует представлением, виртуальная машина также может отслеживать изменения в представлении. , А затем уведомить данные о внесении соответствующих изменений, что фактически обеспечивает двустороннюю привязку данных. И V и VM могут общаться.

Преимущества MVVM:

Режим MVVM аналогичен режиму MVC,Основное назначение — разделить вид (View) и модель (Model)., Имеет ряд преимуществ:

1. Низкое сцепление, Представление может быть независимым от изменения и модификации модели. Модель представления может быть привязана к другому «представлению». При изменении представления модель может оставаться неизменной, а при изменении модели представление также может оставаться неизменным.

2. Возможность повторного использования, Вы можете поместить некоторую логику представления в ViewModel, позволить многим представлениям повторно использовать эту логику представления.

3. Самостоятельное развитие, Разработчики могут сосредоточиться на бизнес-логике и разработке данных (ViewModel), дизайнеры могут сосредоточиться на дизайне страниц, с помощью Expression Blend можно легко проектировать интерфейсы и генерировать XML-код.

4. ПроверяемыйИнтерфейс всегда было сложно тестировать, но теперь тест можно написать для ViewModel.

MVC¶

См.также

• Статья о фреймворке Ruby on Rails
• Концепция MVC для чайников

MVC (Model-View-Controller: модель-вид-контроллер) — шаблон архитектуры ПО,
который подразумевает разделение программы на 3 слабосвязанных компонента,
каждый из которых отвечает за свою сферу деятельности.

Бешеная популярность данной структуры в Веб-приложениях сложилась благодаря её
включению в две среды разработки, которые стали очень востребованными: Struts и Ruby on Rails. Эти среды разработки наметили пути
развития для сотен рабочих сред, созданных позже.

Паттерн MVC (Model-View-Controller)

• Model — модель, предоставляющая доступ к данным. Позволяет извлекать данные и менять их
  состояние;
• View — представление, отображающее данные клиенту. В веб-программировании
  существует в виде конечных данных (HTML, JSON, …), которые получает
  клиент. Может формироваться при помощи генераторов по заданному шаблону,
  например Jinja2, Mako; или систем для построения интерфейсов по разметке,
  таких, как Windows Presentation Foundation (WPF), либо Qt Widgets; или
  описываться декларативно, как это делается в QML и ReactJs.
• Controller — контроллер, отслеживающий различные события (действия пользователя) и по
  заданной логике оповещающий модель о необходимости изменить состояние системы.

Классические MVC фреймворки:

Возможности платформы ASP.NET MVC

Платформа ASP.NET MVC предоставляет следующие возможности.

• Разделение задач приложений (логика ввода, бизнес-логика и логика uI), тестируемость и разработка на основе тестов (TDD) по умолчанию. Все основные контракты платформы MVC основаны на интерфейсе и подлежат тестированию с помощью макетов объекта, которые имитируют поведение реальных объектов приложения. Приложение можно подвергать модульному тестированию без запуска контроллеров в процессе ASP.NET, что ускоряет тестирование и делает его более гибким. Для тестирования возможно использование любой платформы модульного тестирования, совместимой с .NET Framework.
• Расширяемая и дополняемая платформа. Компоненты платформы ASP.NET MVC можно легко заменить или настроить. Разработчик может подключать собственный механизм представлений, политику маршрутизации URL-адресов, сериализацию параметров методов действий и другие компоненты. Платформа ASP.NET MVC также поддерживает использование моделей контейнера внедрения зависимости (DI) и инверсии элемента управления (IOC). DI позволяет вводить объекты в класс, вместо того, чтобы полагаться на класс для создания самого объекта. Модель инверсии элемента управления указывает на то, что если один объект требует другой объект, то первые объекты должны получить второй объект из внешнего источника (например, из файла конфигурации). Это облегчает тестирование.
• Мощный компонент отображения URL, который позволяет создавать приложения с понятными и поисковыми URL-адресами. URL-адреса не должны содержать расширения имен файлов и предназначены для поддержки шаблонов именования URL-адресов, обеспечивающих адресацию, оптимизированную для поисковых систем (SEO) и для передачи репрезентативного состояния (REST).
• Поддержка использования разметки в существующих файлах страниц ASP.NET (ASPX), элементов управления (ASCX) и главных страниц (MASTER) как шаблонов представлений. Существующие ASP.NET функции с ASP.NET mVC, такие как вложенные мастер-страницы, линейные выражения (% -<%>), декларативные элементы управления сервером, шаблоны, связывание данных, локализация и так далее.
• Поддержка существующих функций ASP.NET. ASP.NET MVC позволяет использовать такие функции, как проверка подлинности с помощью форм и Windows, проверка подлинности по URL-адресу, членство и роли, кэширование вывода и данных, управление состоянием сеанса и профиля, наблюдение за работоспособностью, система конфигурации и архитектура поставщика.

Понятие привязки моделей

Привязка моделей представляет собой элегантный мост между HTTP-запросом и методами C#, определяющими действия. Большинство приложений ASP.NET MVC Framework в той или иной степени полагаются на привязку моделей, в том числе простой пример приложения, созданный в предыдущем разделе. Чтобы увидеть привязку моделей в работе, запустите приложение и перейдите на /Home/Index/1. Результат показан на рисунке ниже:

Указанный URL содержит значение свойства UserId объекта User, который необходимо отобразить, например:

/Home/Index/1

Инфраструктура ASP.NET MVC Framework транслирует эту часть URL и применяет ее в качестве аргумента при вызове метода Index() класса контроллера Home с целью обслуживания запроса:

public ActionResult Index(int id)

Процесс, с помощью которого сегмент URL был преобразован в аргумент int метода, является примером привязки моделей. В последующих разделах будет описан процесс, инициируемый этой простой демонстрацией, и затем объяснены более сложные функциональные возможности привязки моделей.

Процесс, приводящий к привязке моделей, начинается сразу после получения запроса и его обработки механизмом маршрутизации. В этом примере приложения конфигурация маршрутизации не изменялась, поэтому для обработки запроса использовался стандартный маршрут, который среда Visual Studio добавляет в файл /App_Start/RouteConfig.cs. В качестве напоминания, этот стандартный маршрут приведен ниже:

Вопросы определения и работы маршрутов подробно рассматривались ранее, поэтому здесь они повторяться не будут

Для процесса привязки моделей важной частью является необязательная переменная сегмента id. При переходе на URL вида /Home/Index/1 последний сегмент, который указывает интересующий объект User, присваивается переменной маршрутизации id

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

Стандартный активатор действий, ControllerActionInvoker, полагается на связыватели моделей при генерации объектов данных, которые требуются для вызова метода. Связыватели моделей определяются с помощью интерфейса IModelBinder, который показан в примере ниже. Мы еще вернемся к этому интерфейсу позже, когда будет рассматриваться создание специального связывателя модели.

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

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

Связыватель модели отвечает за предоставление значения int, которое может использоваться для вызова метода Index(). Это обычно означает трансформацию некоторого элемента данных запроса (такого как значения формы или строки запроса), но инфраструктура ASP.NET MVC Framework никак не ограничивает способ получения данных.

Позже будут предоставлены примеры специальных связывателей. Кроме того, будут продемонстрированы определенные возможности класса ModelBindingContext, экземпляр которого передается методу IModelBinder.BindModel().

Other Information

MVC is often seen in web applications, where the view is the actual HTML page, and the controller is the code that gathers dynamic data and generates the content within the HTML. Finally, the model is represented by the actual content, usually stored in a database or XML files, and the business rules that transform that content based on user actions.

Though MVC comes in different flavors, control flow generally works as follows:

1. The user interacts with the user interface in some way (e.g. presses a button).
2. A controller handles the input event from the user interface, often via a registered handler or callback.
3. The controller notifies the model of the user action, possibly resulting in a change in the model’s state. (e.g. controller updates user’s shopping cart).
4. A view uses the model (indirectly) to generate an appropriate user interface (e.g. the view produces a screen listing the shopping cart contents). The view gets its own data from the model. The model has no direct knowledge of the view.
5. The user interface waits for further user interactions, which begins the cycle anew.

By decoupling models and views, MVC helps to reduce the complexity in architectural design, and to increase flexibility and reuse.

Пример проекта

Для целей этой и последующих статей в Visual Studio создан новый проект MVC по имени MvcModels с использованием шаблона Empty (Пустой) и отметкой флажка MVC в разделе Add folders and core references for (Добавить папки и основные ссылки для).

Мы будем работать с тем же самым классом модели, что и в предшествующих статьях, поэтому в папке Models создан новый файл класса по имени User.cs с содержимым, приведенным в примере ниже:

Также определен контроллер Home, код которого показан в примере ниже. В этом контроллере определена коллекция объектов User и действие Index, которое позволяет выбирать одиночный объект User по значению свойства UserId:

Для поддержки метода действия Index() создан файл представления /Views/Index.cshtml, содержимое которого приведено в примере ниже. В нем с помощью шаблонизированного вспомогательного метода отображаются значения некоторых свойств модели представления User:

Наконец, создается папка Views/Shared, в которую добавляется компоновка по имени _Layout.cshtml:

Вспомогательные функции тегов

Вспомогательные функции тегов позволяют коду на стороне сервера принимать участие в создании и ОТРИСОВКЕ HTML-элементов в Razor файлах. Вспомогательные функции тегов используются для определения настраиваемых тегов (например, ) или для изменения поведения существующих тегов (например, ). Вспомогательные функции тегов привязываются к определенным элементам на основе имени элемента и его атрибутов. Они предоставляют преимущества отрисовки на стороне сервера, сохраняя при этом возможности редактирования HTML.

Существует множество встроенных вспомогательных функций тегов для общих задач — например, для создания форм, ссылок, загрузки ресурсов и т. д. Кроме того, огромное количество функций доступно в общедоступных репозиториях GitHub и в качестве пакетов NuGet. Вспомогательные функции тегов разрабатываются на C# и предназначены для HTML-элементов на основе имени элемента, имени атрибута или родительского тега. Например, встроенную функцию LinkTagHelper можно использовать для создания ссылки на действие для :

С помощью можно включать в приложения различные сценарии (например, необработанные или минифицированные) для конкретной среды выполнения (разработки, промежуточной или производственной):

Вспомогательные функции тегов обеспечивают удобный для HTML процесс разработки и расширенную среду IntelliSense для создания HTML и Razor разметки. Большинство встроенных вспомогательных функций тегов работают с существующими HTML-элементами и предоставляют для них атрибуты на стороне сервера.