Asp net mvc — Разработка под iOS для ASP.NET Developer


Содержание

Простое приложение ASP.NET MVC 5

ASP.NET — ASP.NET MVC 5 — Простое приложение ASP.NET MVC 5

В этой статье будут исследованы другие базовые функциональные средства MVC на примере построения простого приложения для ввода данных. Цель заключается в демонстрации инфраструктуры MVC в действии, поэтому некоторые из объяснений относительно того, что происходит «за кулисами», будут пропущены. Однако не беспокойтесь — мы вернемся к подробному обсуждению этих тем позже. А теперь продолжим работать над проектом, который мы создали в предыдущей статье.

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

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

домашняя страница, отображающая информацию о вечеринке;

форма, которая может использоваться для ответа на приглашение (repondez s’il vous plait — RSVP);

проверка достоверности для формы RSVP, которая будет отображать страницу с выражением благодарности за внимание;

средство отправки форм RSVP по электронной почте организатору вечеринки.

В последующих разделах мы достроим проект MVC, который был создан в предыдущей статье, и добавим в него перечисленные выше средства. Первый пункт можно убрать из списка, применив то, что было показано ранее — в существующее представление можно добавить HTML-разметку с подробной информацией о вечеринке. В примере ниже приведено содержимое файла Views/Home/Index.cshtml с внесенными дополнениями.

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

Проектирование модели данных

В аббревиатуре MVC буква «M» обозначает model (модель), и она является наиболее важной частью приложения. — это представление реальных объектов, процессов и правил, которые определяют сферу приложения, известную как предметная область.

Модель, которую часто называют моделью предметной области, содержит объекты C# (или объекты предметной области), которые образуют «вселенную» приложения, и методы, позволяющие манипулировать ими. Представления и контроллеры открывают предметную область клиентам в согласованной манере, и любое корректно разработанное приложение MVC начинается с хорошо спроектированной модели, которая затем служит центральным узлом при добавлении контроллеров и представлений.

Для приложения Party Invites сложная модель не требуется, поскольку оно совсем простое, и нужно создать только один класс предметной области, который будет назван GuestResponse. Этот объект будет отвечать за хранение, проверку достоверности и подтверждение ответа на приглашение (RSVP).

Добавление класса модели

По соглашению MVC классы, которые образуют модель, помещаются в папку Models, которую Visual Studio создает во время начальной настройки проекта. Щелкните правой кнопкой мыши на папке Models в окне Solution Explorer и выберите в контекстном меню пункт Add, а затем пункт Class (Класс). В качестве имени файла укажите GuestResponse.cs и щелкните на кнопке Add, чтобы создать класс.

Отсутствие пункта Class в контекстном меню может означать, что вы оставили отладчик Visual Studio в выполняющемся состоянии. Среда Visual Studio ограничивает виды изменений, которые можно вносить в проект при функционирующем приложении.

Отредактируйте код класса, чтобы он соответствовал примеру ниже:

Вы могли заметить, что свойство WillAttend имеет тип bool, допускающий null, т.е. оно может принимать значение true, false или null. Объяснение этого будет приведено в разделе «Добавление проверки достоверности» далее.

Связывание с методами действий

Одна из целей разрабатываемого приложения состоит в подключении формы RSVP, поэтому необходимо добавить ссылку на нее из представления Index.cshtml, как показано в примере ниже:

Html.ActionLink() — это вспомогательный метод HTML. В MVC Framework доступен набор встроенных вспомогательных методов, которые удобны при визуализации ссылок, полей ввода текста, флажков, списков выбора и другого вида HTML-содержимого. Метод ActionLink принимает два параметра: первым является текст (анкор ссылки), который должен отображаться в ссылке, а вторым — действие, которое должно выполняться, когда пользователь щелкает на ссылке.

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

Если навести курсор мыши поверх ссылки в браузере, станет видно, что ссылка указывает на http://ваш-сервер/Home/RsvpForm. Метод Html.ActionLink() исследовал конфигурацию маршрутизации URL приложения и определил, что /Home/RsvpForm представляет собой URL действия по имени RsvpForm в контроллере HomeController.

Обратите внимание, что в отличие от традиционных приложений ASP.NET, URL-адреса MVC не соответствуют физическим файлам. У каждого метода действия имеется собственный URL, а инфраструктура MVC использует систему маршрутизации ASP.NET для трансляции этих URL в действия.

Создание метода действия

Щелчок на ссылке приводит к выдаче ошибки 404 Not Found (не найдено). Она объясняется тем, что пока еще не создан метод действия, соответствующий URL вида /Home/RsvpForm. Это делается добавлением метода RsvpForm в класс HomeController, как показано в примере ниже:

Добавление строго типизированного представления

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

Прежде чем продолжать, удостоверьтесь, что проект MVC скомпилирован. Если код класса GuestResponse был написан, но не скомпилирован, инфраструктура MVC не сможет создать строго типизированное представление для этого типа. Чтобы скомпилировать приложение, выберите пункт Build Solution в меню Build среды Visual Studio.

Щелкните правой кнопкой мыши внутри метода RsvpForm в редакторе кода и выберите в контекстном меню пункт Add View (Добавить представление), чтобы открыть диалоговое окно Add View. Удостоверьтесь, что в поле View Name (Имя представления) указано имя RsvpForm, выберите в списке Template (Шаблон) вариант Empty (Пустой), а в списке Model Class (Класс модели) — вариант GuestResponse. Оставьте все флажки в разделе View Options (Параметры представления) неотмеченными:

Щелкните на кнопке Add, среда Visual Studio создаст новый файл по имени RvspForm.cshtml в папке Views/Home и откроет его для редактирования. В примере ниже приведено первоначальное содержимое этого файла. Это еще один скелетный HTML-файл, но в нем присутствует Razor-выражение @model. Как вы вскоре убедитесь, этот файл служит ключом к созданию строго типизированного представления и к получению предлагаемых им удобств.

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

Построение формы

Теперь, когда строго типизированное представление создано, можно дополнить содержимое файла RsvpForm.cshtml, чтобы превратить его в HTML-форму для редактирования объектов GuestResponse, как показано в примере ниже:

Для каждого свойства класса модели GuestResponse мы используем вспомогательный метод HTML, чтобы визуализировать подходящий элемент управления HTML типа input. Эти методы позволяют с помощью лямбда-выражения выбрать свойство, с которым связан элемент input, как показано в следующей строке:

Вспомогательный метод HTML по имени TextBoxFor генерирует HTML-разметку для элемента input, устанавливает параметр type в text, а атрибуты id и name — в Email (имя выбранного свойства класса предметной области):

Это удобное средство работает, потому что представление RsvpForm является строго типизированным, а инфраструктуре MVC было указано, что GuestResponse — тип, который нужно визуализировать с помощью этого представления. Это снабжает вспомогательные методы HTML информацией, которая им необходима для выяснения того, из какого типа данных должны быть прочитаны свойства через выражение @model.

Альтернативой применению лямбда-выражений является ссылка на имя свойства типа модели как на строку:

Подход с использованием лямбда-выражения предотвращает неправильный ввод имени свойства типа модели, т.к. среда Visual Studio активизирует средство IntelliSense, позволяя выбрать свойство автоматически:

Еще одним удобным вспомогательным методом является Html.BeginForm(), который генерирует HTML-элемент form, сконфигурированный на выполнение обратной отправки методу действия. Поскольку никакие аргументы вспомогательному методу не передаются, он предполагает, что требуется выполнить обратную отправку по тому же самому URL, из которого запрашивался HTML-документ. Изящный трюк заключается в том, чтобы поместить этот метод внутрь C#-оператора using, как показано ниже:

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

Вместо освобождения объекта вспомогательный метод Html.BeginForm закрывает HTML-элемент form, когда тот покидает область действия. Это означает, что вспомогательный метод Html.BeginForm создает обе части элемента формы:

Не беспокойтесь, если не знакомы с удалением объектов C#. В данном случае задача заключается в том, чтобы продемонстрировать создание формы с помощью вспомогательного метода HTML.

Установка начального URL-адреса

Стремясь быть полезной, среда Visual Studio будет выполнять запрос в браузере URL-адреса, основываясь на представлении, которое редактируется в текущий момент. Это ненадежная возможность, поскольку она не работает при редактировании файлов других видов, к тому же в сложных веб-приложениях нельзя просто переходить в произвольные точки.

Чтобы установить фиксированный URL-адрес для запроса в браузере, выберите в меню Project (Проект) среды Visual Studio пункт PartyInvites Properties (Свойства PartyInvites), перейдите в раздел Web и отметьте переключатель Specific Page (Определенная страница) в категории Start Action (Начальное действие), как показано на рисунке ниже:

Вводить значение в поле рядом с переключателем вовсе не обязательно — Visual Studio будет запрашивать стандартный URL-адрес для проекта, который указывает на метод действия Index контроллера Home.

Форму в представлении RsvpForm можно увидеть, запустив приложение и щелкнув на ссылке «Форма RSVP». Результат показан на рисунке ниже:

Обработка форм

Инфраструктуре MVC пока еще не указано, что должно быть сделано, когда форма отправляется серверу. В нынешнем состоянии приложения щелчок на кнопке «Отправить форму RSVP» лишь очищает любые значения, введенные в форму. Причина в том, что форма осуществляет обратную отправку методу действия RsvpForm из контроллера Home, который только сообщает MVC о необходимости повторной визуализации представления.

Факт утери введенных данных при повторной визуализации представления может вас удивить. Если это так, то вам, скорее всего, приходилось разрабатывать приложения с помощью инфраструктуры ASP.NET Web Forms, которая в такой ситуации автоматически сохраняет данные. Вскоре будет показано, как добиться аналогичного эффекта в MVC.

Чтобы получить и обработать данные отправленной формы, мы собираемся воспользоваться одной интересной возможностью. Мы добавим второй метод действия RsvpForm, чтобы обеспечить перечисленные ниже аспекты.

Метод, который отвечает на HTTP-запросы GET. Каждый раз, когда кто-то щелкает на ссылке, браузер обычно выдает именно запрос GET. Эта версия действия будет отвечать за отображение изначально пустой формы, когда кто-нибудь впервые посещает /Home/RsvpForm.

Метод, который отвечает на HTTP-запросы POST. По умолчанию формы, визуализированные с помощью Html.BeginForm, отправляются браузером в виде запросов POST. Эта версия действия будет отвечать за получение отправленных данных и принятие решения о том, что с ними делать.

Обработка запросов GET и POST в отдельных методах C# способствует обеспечению аккуратности кода контроллера, т.к. ответственность у этих двух методов разная. Оба метода действий вызываются через один и тот же URL, но MVC вызывает соответствующий метод в зависимости от вида запроса — GET или POST. В примере ниже показаны изменения, которые необходимо внести в класс HomeController.

К существующему методу действия RsvpForm был добавлен атрибут HttpGet. Это указывает MVC, что данный метод должен использоваться только для запросов GET.

Затем была добавлена перегруженная версия метода RsvpForm, принимающая параметр GuestResponse, к которой применен атрибут HttpPost. Этот атрибут указывает MVC, что новый метод будет иметь дело только с запросами POST. Обратите внимание, что также было импортировано пространство имен PartyInvites.Models. Это сделано для того, чтобы на тип модели GuestResponse можно было ссылаться без необходимости в указании полностью определенного имени класса. Работа всех этих добавлений к коду объясняется в последующих разделах.

Использование привязки модели

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

Вторая перегруженная версия более интересна из-за наличия параметра. Но с учетом того, что этот метод действия будет вызываться в ответ на HTTP-запрос POST, а тип GuestResponse является классом C#, каким образом они соединяются между собой?

Секрет кроется в привязке модели — чрезвычайно полезной функциональной возможности MVC, согласно которой входящие данные анализируются, а пары «ключ/значение» в HTTP-запросе используются для заполнения свойств в типах модели предметной области. Этот процесс противоположен применению вспомогательных методов HTML; т.е. при создании данных формы для отправки клиенту мы генерируем HTML-элементы input, в которых значения атрибутов id и name производятся из имен свойств класса модели.

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

— мощное и настраиваемое средство, которое избавляет от кропотливого и тяжелого труда по взаимодействию с HTTP-запросами напрямую и позволяет работать с объектами C#, а не иметь дело со значениями Request.Form[] и Request.QueryString[]. Объект GuestResponse, который передается в качестве параметра этому методу действия, автоматически заполняется данными из полей формы.

Визуализация других представлений

Вторая перегруженная версия метода действия RsvpForm также демонстрирует, как можно указать MVC, что в ответ на запрос должно визуализироваться специфическое представление, отличное от стандартного. Ниже приведен соответствующий оператор:

Этот вызов метода View сообщает MVC, что нужно найти и визуализировать представление Thanks и передать ему объект GuestResponse. Чтобы создать указанное представление, щелкните правой кнопкой мыши на любом из методов класса HomeController и выберите в контекстном меню пункт Add View (Добавить представление). С помощью открывшегося диалогового окна Add View создайте строго типизированное представление по имени Thanks, в котором применяется класс модели GuestResponse и которое основано на шаблоне Empty. Среда Visual Studio создаст представление в виде файла Views/Home/Thanks.cshtml.

Отредактируйте код представления так, чтобы он соответствовал коду, приведенному в примере ниже:

Представление Thanks использует механизм визуализации Razor, чтобы отображать содержимое в зависимости от значения свойства GuestResponse, переданного вызову View в методе действия RsvpForm. Выражение @model синтаксиса Razor указывает тип модели предметной области, для которого представление строго типизировано.

Для получения доступа к значению свойства в объекте предметной области применяется конструкция Model.ИмяСвойства. Например, для получения значения свойства Name используется Model.Name.

Теперь, когда создано представление Thanks, появился работающий базовый пример обработки формы с помощью MVC. Запустите приложение в Visual Studio, щелкните на ссылке «Форма RSVP», введите какие-нибудь данные внутри формы и щелкните на кнопке «Отправить форму RSVP». Отобразится результат, показанный на рисунке ниже (он может отличаться, если введено другое имя и было указано о невозможности посетить вечеринку).

Добавление проверки достоверности

Теперь пора добавить в приложение проверку достоверности вводимых данных. В отсутствие проверки достоверности пользователи смогут вводить бессмысленные данные или даже отправлять пустую форму.

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

Инфраструктура ASP.NET MVC поддерживает декларативные правила проверки достоверности, определенные с помощью атрибутов из пространства имен System.ComponentModel.DataAnnotations, а это значит, что ограничения проверки достоверности выражаются с помощью стандартных атрибутов C#. В примере ниже показано, как применить эти атрибуты к классу модели GuestResponse:

Инфраструктура MVC обнаруживает атрибуты проверки достоверности и использует их для проверки данных во время процесса приписки модели. Обратите внимание, что мы импортировали пространство имен, которое содержит средства проверки достоверности, так что к ним можно обращаться, не указывая полные имена.

Как уже отмечалось ранее, для свойства WillAttend был выбран булевский тип, допускающий значение null. Это было сделано для того, чтобы можно было применить атрибут проверки Required. В случае использования обычного булевского типа значением, получаемым посредством привязки модели, могло бы быть только true или false, и не было бы возможности определить, выбрал ли пользователь значение. Булевский тип, допускающий null, имеет три разрешенных значения: true, false и null. Значение null будет применяться, если пользователь не выбрал значение, и это вынудит атрибут Required сообщить об ошибке проверки достоверности. Это хороший пример того, насколько элегантно инфраструктура MVC Framework сочетает средства C# с HTML и HTTP.

Проверку на наличие проблемы с достоверностью данных можно выполнить с использованием свойства ModelState.IsValid в классе контроллера. В примере ниже показано, как это реализовано в методе действия RsvpForm, поддерживающем запросы POST, внутри класса контроллера Home:

Если ошибки проверки достоверности отсутствуют, мы указываем MVC, что нужно визуализировать представление Thanks, как это делалось ранее. В случае обнаружения ошибок проверки достоверности мы повторно визуализируем представление RsvpForm вызывая метод View() без параметров.

Простое отображение формы в ситуации, когда имеется ошибка, не особенно полезно — мы должны также предоставить пользователю информацию, в чем заключается проблема, и почему принять отправку формы невозможно. Это делается с применением вспомогательного метода Html.ValidationSummary() в представлении RsvpForm, как показано в примере ниже:

В отсутствие ошибок метод Html.ValidationSummary() создает скрытый элемент списка в виде заполнителя внутри формы. Инфраструктура MVC делает заполнитель видимым и добавляет сообщения об ошибках, определенные атрибутами проверки достоверности. Результирующее окно показано на рисунке:

Пользователь не увидит представление Thanks до тех пор, пока не будут удовлетворены все ограничения проверки достоверности, примененные к классу GuestResponse. Обратите внимание, что введенные в форму данные были сохранены и отображены снова при визуализации представления со сводкой проверки достоверности. Это еще одно преимущество, обеспечиваемое средством привязки модели, и оно упрощает работу с данными формы.

Если вам приходилось иметь дело с ASP.NET Web Forms, то вы знаете, что в Web Forms имеется концепция серверных элементов управления, которые сохраняют состояние, сериализуя значения в скрытое поле формы по имени _VIEWSTATE. Привязка модели ASP.NET MVC не имеет никакого отношения к концепциям серверных элементов управления, обратным отправкам или средству View State, характерным для Web Forms. Инфраструктура ASP.NET MVC не внедряет скрытое поле _VIEWSTATE в визуализированные HTML-страницы.

Подсветка полей с недопустимыми значениями

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

Если свойство класса модели не пройдет проверку достоверности, вспомогательные методы HTML будут генерировать несколько иную HTML-разметку. В качестве примера ниже приведена HTML-разметка, генерируемая в результате вызова Html.TextBoxFor(х => x.Name) при отсутствии ошибок проверки достоверности:

А вот HTML-разметка, генерируемая этим же вызовом, когда пользователь не вводит значение (что является ошибкой проверки достоверности, поскольку мы применили атрибут Required к свойству Name в классе модели GuestResponse):

Этот вспомогательный метод добавил к элементу input класс по имени input-validation-error. Мы можем воспользоваться этой возможностью, создав таблицу стилей, которая содержит стили CSS для этого класса и другие стили, применяемые различными вспомогательными методами HTML.

Соглашение, принятое в проектах MVC, предусматривает помещение статического содержимого, такого как таблицы стилей CSS, в папку по имени Content. Создайте эту папку, щелкнув правой кнопкой мыши на элементе PartyInvites в окне Solution Explorer, выбрав в контекстном меню пункт Add New Folder (Добавить Новая папка) и указав Content в качестве имени папки.

Чтобы создать файл CSS, щелкните правой кнопкой мыши на только что созданной папке Content, выберите в контекстном меню пункт Add New Item (Добавить Новый элемент) и выберите Style Sheet (Таблица стилей) из набора шаблонов элементов. Установите имя нового файла Styles.css, как показано на рисунке ниже:

Щелкните на кнопке Add и Visual Studio создаст файл Content/Styles.css. Приведите содержимое этого файла в соответствие со следующим кодом:

Для использования этой таблицы стилей добавляется новая ссылка в раздел head представления RsvpForm, как показано в примере ниже. Элементы link добавляются к представлениям точно так же, как к обычным статическим файлам HTML, хотя позже будет продемонстрировано средство пакетов, которое позволяет объединять сценарии JavaScript и таблицы стилей CSS и доставлять их в браузеры с помощью единственного HTTP-запроса.

Файлы JavaScript и CSS можно перетаскивать из окна Solution Explorer в редактор кода. Среда Visual Studio создаст элементы script и link для выбранных файлов.

Если вы перешли на MVC 5 непосредственно с MVC 3, то могли ожидать, что файл CSS добавляется к представлению за счет указания атрибута href в виде @Href(«

/Content/Site.css») или @Url.Content(«

/Content/Site.css»). Начиная с MVC 4, механизм Razor обнаруживает атрибуты, начинающиеся с

/ и автоматически вставляет вызов @Href или @Url.

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

Стилизация содержимого

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

Я не являюсь большим поклонником упомянутых шаблонов, но мне нравятся некоторые из используемых ими библиотек, и одним таким примером из числа задействованных в MVC 5 является Bootstrap, которая представляет собой удобную библиотеку CSS, первоначально разработанную в Twitter и получившую широкое применение.

Разумеется, вы не обязаны применять шаблоны проектов Visual Studio, чтобы пользоваться библиотеками вроде Bootstrap. Можно загрузить файлы напрямую из веб-сайтов с нужными библиотеками или воспользоваться инструментом NuGet, интегрированным в Visual Studio и предоставляющим доступ к каталогу заранее упакованного программного обеспечения, которое может быть загружено и установлено автоматически.

Одной из лучших характеристик NuGet является то, что данный инструмент управляет зависимостями между пакетами, так что во время установки, к примеру, библиотеки Bootstrap инструмент NuGet также загрузит и установит библиотеку jQuery, от которой зависит Bootstrap.

Использование NuGet для установки Bootstrap

Чтобы установить пакет Bootstrap, выберите пункт Library Package Manager Package Manager Console в меню Tools среды Visual Studio. Откроется окно командной строки NuGet. Введите следующую команду и нажмите клавишу :

Команда Install-Package сообщает NuGet о необходимости загрузки пакета вместе с его зависимостями и затем добавления всего этого в проект. Нужный пакет называется bootstrap. Имена пакетов можно либо искать на веб-сайте NuGet (http://www.nuget.org), либо прибегнуть к услугам пользовательского интерфейса NuGet в Visual Studio (выберите пункт меню Tools Library Package Manager Manage NuGet Packages for Solution.

Ключ командной строки -version использовался для указания на то, что требуется версия 3 библиотеки Bootstrap, которая является последней доступной стабильной версией. Без ключа -version инструмент NuGet загрузил бы последнюю версию пакета, но для гарантии того, что вы в точности воссоздадите примеры, приведенные ниже, необходимо установить эту конкретную версию.

Инструмент NuGet загрузит все файлы, требующиеся для библиотеки Bootstrap, а также для библиотеки jQuery, на которую опирается Bootstrap. Файлы CSS помещаются в папку Content. Кроме того, создается папка Scripts (которая в MVC является стандартным местоположением для файлов JavaScript) и заполняется файлами Bootstrap и jQuery. (Также создается папка fonts — это индивидуальная особенность библиотеки Bootstrap, которая ожидает наличия файлов в определенных местах.)

Цукерберг рекомендует:  25 полезных для разработчика привычек

Причина рассмотрения Bootstrap в этой статье — иллюстрация того, насколько легко HTML-разметка, генерируемая MVC Framework, может применяться с популярными библиотеками CSS и JavaScript. Тем не менее, основное внимание в настоящем руководстве уделяется разработке серверной стороны.

Стилизация представления index

Базовые средства Bootstrap работают путем применения классов к элементам, которые соответствуют селекторам CSS, определенным внутри добавленных в папку Content файлов. Подробную информацию о классах, определенных в библиотеке Bootstrap, можно получить на веб-сайте Bootstrap, а в примере ниже демонстрируется использование ряда базовых стилей в представлении Index.cshtml:

В разметку были добавлены элементы link для файлов bootstrap.css и bootstrap-theme.css из папки Content. Они являются файлами Bootstrap, требуемыми для базовой стилизации CSS, обеспечиваемой этой библиотекой. Вдобавок в папке Scripts имеется соответствующий файл JavaScript, но в данной статье он не нужен. Кроме того, определен также элемент style, который устанавливает цвет фона для элемента body и стили текста для элементов .

Вы заметите, что для каждого файла Bootstrap в папке Content имеется двойник с суффиксом min — например, есть файлы bootstrap.css и bootstrap.min.css. Это распространенная практика минимизации файлов JavaScript и CSS при развертывании приложений в производственной среде, которая представляет собой процесс удаления всех пробельных символов, а также в случае файлов JavaScript замену имен функций и переменных более короткими метками. Целью минимизации является сокращение объема передаваемых данных, необходимых для доставки содержимого в браузер.

После импортирования стилей Bootstrap и определения пары собственных стилей осталось стилизовать элементы. Рассматриваемый пример прост, поэтому необходимо использовать только три класса CSS из Bootstrap: text-center, btn и btn-success.

Полученные в итоге результаты показаны на рисунке ниже:

Стилизация представления RsvpForm

В библиотеке Bootstrap определены классы, которые могут использоваться для стилизации форм. Я не планирую вдаваться в особые детали, но в примере ниже показано, как были применены эти классы:

Классы Bootstrap в этом примере создают панель с заголовком, просто чтобы придать компоновке структурированность. Для стилизации формы используется класс form-group, который стилизует элемент, содержащий label и связанный элемент input или select.

Эти элементы созданы посредством вспомогательных методов HTML, что означает отсутствие статически определенных элементов, к которым можно было бы применить требуемый класс form-control. К счастью, вспомогательные методы принимают в качестве необязательного аргумента объект, который позволяет указывать атрибуты создаваемого элемента, например:

Объект для атрибутов создается с использованием анонимных типов C# и указывает, что в элементе, генерируемом вспомогательным методом TextBoxFor, атрибут class должен быть установлен в form-control. Свойства, определяемые этим объектом, применяются для имени атрибута, добавляемого к HTML-элементу, а поскольку class является зарезервированным словом в языке C#, оно предваряется символом @. Это стандартная возможность C#, которая позволяет использовать ключевые слова в выражениях.

Результаты стилизации можно видеть на рисунке ниже:

Стилизация представления Thanks

Последним представлением, подлежащим стилизации, является Thanks.cshtml, в примере ниже показано, как это делается. Вы заметите, что добавленная разметка похожа на таковую из представления Index.cshtml. Чтобы упростить управление приложением, имеет смысл избегать дублирования кода и разметки везде, где это возможно. Позже будут рассмотрены компоновки Razor и описаны частичные представления, которые способствуют сокращению дублирования разметки.

Класс lead применяет один из типографских стилей Bootstrap. Результаты можно видеть на рисунке ниже:

Завершение примера


Последнее требование для примера приложения заключается в отправке завершенных ответов RSVP по электронной почте организатору вечеринки. Это можно было бы сделать за счет добавления метода действия для создания и отправки сообщения с использованием классов, работающих с электронной почтой, которые доступны в .NET Framework — такой подход лучше всего согласуется с шаблоном MVC.

Однако вместо этого мы намерены воспользоваться вспомогательным классом WebMail. Он не является частью инфраструктуры MVC, но позволяет завершить пример, не вникая в нюансы настройки средств для отправки электронной почты. Нам требуется, чтобы электронное письмо отправлялось при визуализации представления Thanks. Необходимые изменения показаны в примере ниже:

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

Мы добавили выражение Razor, которое применяет вспомогательный класс WebMail для настройки параметров нашего почтового сервера, в том числе имени сервера, обязательности использования безопасных подключений (SSL) и сведений об учетной записи. Как только все эти детали сконфигурированы, с помощью метода WebMail.Send() отправляется сообщение по электронной почте.

Весь код отправки сообщения помещен внутрь блока try. catch, что позволяет предупредить пользователя, если сообщение не отправлено. Это осуществляется путем добавления текстового блока в вывод представления Thanks. Более рациональным подходом было бы отображение отдельного представления ошибки в случае невозможности отправки электронного сообщения, но мы хотели максимально упростить это первое приложение MVC.

ASP.NET

Изучение ASP.NET Core MVC / #1 — Создание сайта на C#

Видеоурок

Полезные ссылки:

Подавляющее большинство хоть что-то, но слышали о платформе ASP.NET. Правда, знания очень разбросанные и неструктурированные, от чего нет чёткого представления о возможностях данной платформы. В рамках данного материала рассмотрим ключевые особенности ASP.NET.

ASP.NET – это платформа для разработки в вебе (сайты, приложения). Она поддерживает работу с несколькими языками программирования, входящими в сборку фреймворка: Basic NET, C# , J# и ряд прочих. С данной платформой есть возможность создавать как простейшие веб-ресурсы, так и очень сложные сайты, способные к обработке многотысячного потока пользователей.

ASP.NET по скорости работы значительно превосходит прочие скриптовые языки. Причина быстрой обработки заключается в том, что основа компилируется при первом подключении пользователя и сразу добавляется в кэш компьютера. Все последующие переходы по сайту используют уже кэшированный код, который просто извлекается из памяти, а не скачивается с сервера повторно. Такой подход сильно экономит время на парсинге, загрузке и обработке файлов.

Популярнейшие технологии и языки программирования для разработки веб-ресурсов:

В нынешних реалиях ASP .NET невероятно популярна, она лежит в основе огромных интернет-порталов. Нам удалось найти хороший материал , в котором освещено 10 лучших веб-ресурсов, созданных на данной платформе.

В этом списке присутствуют:

  • StackOverflow – это один из самых больших форумов. С его помощью тысячи людей ежедневно получают ответы на насущные вопросы;
  • Основной портал корпорации Microsoft ;
  • Крупнейший сайт для регистрации доменов GoDaddy . Сегодня занимает лидирующие места в сфере веб-хостинга.
  • Официальный веб-сайт Dell .

Этим список не ограничивается, есть масса других сайтов.

В ASP .NET применяется традиционная схема MVC – Модель-Вид-Контроллер. Все элементы отвечают за конкретные действия. Для примера, пользователь запускает процесс регистрации и отправляет на сервер регистрационные данные. Контроллер интерпретирует действия человека и передаёт модели информацию о внесённых изменениях в статус пользователя. Модель реагирует на действия контроллера и работает с поставляемыми данными. Вид отвечает за отображение информации с модели.

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

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

ASP .NET или ASP .NET Core?

.NET Core – кроссплатформенная среда выполнения для приложений из веба или консольных программ. Программные продукты, разработанные на ней, могут успешно исполняться на Linux, Windows, MacOS.

Основные плюсы: мультиплатформенность, открытый исходный код.

.NET Framework – среда исполнения, которая предназначена исключительно для Виндовс. Помогает в разработке десктопных программ под Windows и веб-приложений ASP .NET под IIS.

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

Сегодня Microsoft усиленно продвигает и модернизирует Core, постоянно добавляя полезный функционал. Может быть скоро эта среда сравняется с .NET Framework.

Лично я выбрал .Net Core, ведь считаю эту платформу перспективнее, да и на сегодняшний день её функционала мне достаточно. Очень много NuGet модулей и библиотек берут курс на адаптацию под .NET Standart, то есть становятся доступными в Core.

Пара сценариев для разработчиков веб-ресурсов на профессиональном уровне.

ASP .NET Core – лучше применять, если вы:

  • Желаете установить таргетинг в приложении на все популярные ОС;
  • Не страшитесь изучения нового;
  • Не боитесь уделять достаточно времени исправлениям и доработкам, ведь Core не дошёл до статической точки, периодически меняется.

ASP .NET – идеальное решение, если вы:

  • Не испытываете необходимости организовывать кросплатформенную поддержку веб-приложения;
  • Нуждаетесь в стабильной среде разработки;
  • Не имеете большого количества времени для разработки, то есть дедлайны поджимают;
  • Уже занимаетесь разработкой или модернизацией существующей программы;
  • Входите в состав команды, обладающей опытом работы с ASP.NET.

Тем, кто сегодня только планирует начать обучение и в ближайший год начать работать на крупные компании, ASP .NET Core идеально подходит. С этой средой вы получаете много перспектив на будущее.

Дополнительные курсы

Фреймворк .NET поддерживает множество языков, но самым популярным является C#. Прежде чем приступать к видео курсу вам следует изучить C#. На нашем ресурсе представлено множество курсов на эту тематику. Просмотреть их все можете по этой ссылке .

Большое задание по курсу

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

Создание нового ASP.NET MVC проекта

Мы начнем с создания нового MVC проекта в Visual Studio. Выберите New Project из меню File , чтобы открыть диалоговое окно New Project . Если вы выберите в разделе Visual C# шаблоны Web , вы увидите, что одним из доступных типов проекта является ASP.NET MVC 4 Web Application . Выберите этот тип проекта, как показано на рисунке 2-1.

Рисунок 2-1: Шаблон Visual Studio MVC 4 проекта

Visual Studio 2012 включает в себя поддержку MVC 3, также как и MVC 4, и вы видите, что старые шаблоны доступны вместе с новыми. При создании нового проекта обратите на это внимание и выберите правильный

Назовите новый проект PartyInvites и нажмите кнопку ОК , чтобы продолжить. Вы увидите другое диалоговое окно, показанное на рисунке 2-2, где вас попросят выбрать между тремя различными типами шаблонов MVC проекта.

Рисунок 2-2: Выбор типа MVC 4 проекта

Разные шаблоны MVC проектов создают проекты с разной базовой поддержкой таких функций, как аутентификация, навигация и стили. Мы не будем все усложнять в этой главе. Выберите вариант Empty , который создает проект с базовой структурой папок, но без файлов, необходимых для создания MVC приложений. Мы будем добавлять файлы, которые нам понадобятся, по мере прочтения главы, и каждый раз будем пояснять, что мы делаем.

Нажмите кнопку OK , чтобы создать новый проект.

На рисунке 2-2 вы можете увидеть выпадающее меню, которое позволяет вам указать вид движка представления. В MVC 3 Microsoft представила новый и улучшенный вид движка, который называется Razor, и мы будем использовать Razor в этой книге. Мы рекомендуем вам сделать то же самое. Но если вы хотите использовать стандартный вид ASP.NET движка (известный как ASPX) – это ваш выбор. Мы расскажем все о Razor и о том, что делает движок представления, в главах 5 и 18.

Когда Visual Studio создаст проект, вы увидите файлы и папки, отображаемые в окне Solution Explorer . Это стандартная структура MVC 4 проекта. Вы можете попробовать запустить приложение, выбрав Start Debugging из меню Debug (если он попросит вас включить отладку, просто нажмите кнопку ОК ). Результат показан на рисунке 2-3. Поскольку мы начали с пустого шаблона проекта, приложение ничего не содержит, так что мы получаем ошибку 404 Not Found .

Рисунок 2-3: Попытка запустить пустой проект

Когда вы закончите, не забудьте остановить отладку, закрыв окно браузера, который показывает ошибку, или вернитесь к Visual Studio и выберите Stop Debugging в меню Debug .

Visual Studio открывает браузер для отображения проекта, и вы можете изменить браузер, который используется, в меню, показанном на рисунке 2-4. Вы видите, что тут представлены Microsoft Internet Explorer и Google Chrome.

Рисунок 2-4: Смена браузера, который Visual Studio использует для запуска проекта

В этой книге мы будем использовать Internet Explorer 10. Все современные веб браузеры довольно хорошо на сегодняшний день, но мы будем работать с IE, потому что он установлен у многих людей.

Добавление первого контроллера

В архитектуре MVC входящие запросы обрабатываются контроллерами. В ASP.NET MVC контроллеры являются простыми C# классами (как правило, наследуются от System.Web.Mvc.Controller , встроенных во фреймворк базовых классов контроллеров). Каждый открытый метод в контроллере известен как метод действия, то есть вы можете вызвать его из Интернет через некоторые URL, чтобы выполнить действие. В MVC контроллеры находятся в папке под названием Controllers , которую Visual Studio создала для нас при создании проекта. Вам не нужно следить за этим и большинством других соглашений MVC, но мы рекомендуем вам сделать не в последнюю очередь потому, что это поможет вам разобраться в примерах, приведенных в данной книге.

Чтобы добавить контроллер в наш проект, просто щелкните правой кнопкой мыши по папке Controllers в окне Solution Explorer Visual Studio и затем выберите Add во всплывающем меню, как показано на рисунке 2-5.

Рисунок 2-5: Добавление контроллера в MVC проект

Когда появится диалоговое окно Add Controller , назовите контроллер HomeController , как показано на рисунке 2-6. Это еще одно соглашение: имена, которые мы даем контроллерам, должны быть описательными и заканчиваться Controller .

Рисунок 2-6: Называем контроллер

Раздел диалогового окна Scaffolding options позволяет нам создать контроллер с помощью шаблона с общими функциями. Мы не собираемся использовать эту возможность, поэтому убедитесь, что в меню Template выбрано Empty MVC controller , как показано на рисунке.

Нажмите кнопку Add , чтобы создать контроллер. Visual Studio создаст новый файл с C# кодом с названием HomeController.cs в папке Controllers и откроет его для редактирования. Мы показали контент по умолчанию, который Visual Studio помещает в классовый файл, в листинге 2-1. Вы видите, что класс называется HomeController , и он является производным от System.Web.Mvc.Controller .

Листинг 2-1: Содержание по умолчанию класса HomeController

Хороший способ начать работу с MVC – это сделать несколько простых изменений в классе контроллера. Измените код в файле HomeController.cs так, чтобы он соответствовал коду листинга 2-2. Мы выделили изменения, чтобы их было легче увидеть.

Листинг 2-2: Изменение класса HomeController

Мы не создали ничего захватывающего, но это хороший пример. Мы изменили метод действия (action method) Index таким образом, что он возвращает строку » Hello, world «. Запустите проект еще раз, выбрав Start Debugging в Visual Studio меню Debug . Браузер отобразит результат метода действия Index , как показано на рисунке 2-7.

Рисунок 2-7: Результат, возвращенный методом контроллера

Роуты

Также как и модели, представления и контроллеры, MVC приложения используют систему маршрутизации (роутинговую систему) ASP.NET, которая решает, как URL-адреса картируют конкретные контроллеры и действия. Когда Visual Studio создает MVC проект, она в начале добавляет некоторые роуты по умолчанию. Вы можете запросить любую из следующих ссылок, и они будут направлены на HomeController метод Index :

Поэтому когда браузер запрашивает http://yoursite/ или http://yoursite/Home , он получает выходные данные HomeController метода Index . Вы можете попробовать сделать это самостоятельно, изменив URL в браузере. На данный момент, это будет http://localhost:61982/ , за исключением того, что порт может быть другим. Если добавить в URL /Home или /Home/Index и обновить страницу, вы увидите тот же Hello World MVC приложения.

Это хороший пример пользы от MVC соглашений. В данном случае соглашение заключается в том, что у нас есть контроллер HomeController и что он будет отправной точкой для нашего MVC приложения. Роуты по умолчанию, которые Visual Studio создает для нового проекта, предполагают, что мы будем следовать этому соглашению. И так как мы следовали соглашению, мы получили поддержку для URL адресов из предыдущего списка.

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

Курс «20486 Разработка Web приложений с использованием ASP.NET 4.5 MVC 4 (20486 Developing ASP.NET MVC 4 Web Applications)»

Код: 20486
Специализация: Microsoft Visual Studio 2015

Продолжительность — 5 дней

Расписание:
16 декабря 2020 года (Москва)
2 марта 2020 года (Москва)
15 июня 2020 года (Москва)
3 августа 2020 года (Москва)
12 октября 2020 года (Москва)
21 декабря 2020 года (Москва)
Стоимость: 32 990 руб.

Курс 20486 Разработка Web приложений с использованием ASP.NET 4.5 MVC 4 научит создавать Web-приложения с использованием ASP.NET MVC из .NET Framework 4.5, а также позволит заметно повысить производительность и масштабируемость разработанных Вами Web-приложений. В ходе обучения проводится сравнение технологий ASP.NET MVC и ASP.NET Web Forms и даются рекомендации по выбору той или иной технологии.

Курс проводится с использованием последней версии Visual Studio 2012 , примеры основаны на движке MVC4 .

Курс ориентирован на профессиональных web-разработчиков, имеющих опыт создания приложений с использованием Visual Studio.

Предварительный уровень подготовки:

Данный курс готовит к сдаче сертификационных экзаменов:

Прослушав данный курс, слушатели научатся:

Программа курса

Модуль 1: Обзор ASP.NET MVC 4

Цель этого модуля научить слушателей описывать основные технологий Microsoft, которые используются для размещения завершенных веб-приложений. Слушатели также узнают о ASP.NET 4.5 и MVC, моделях программирования веб-форм и веб-страниц. Будет сделан обзор и сравнение технологий ASP.NET и MVC 4.

  • Обзор веб-технологий Microsoft
  • Обзор ASP.NET 4.5
  • Введение в ASP.NET MVC 4

Лабораторная работа: Изучение ASP.NET MVC4

  • Изучение приложений для совместного использования фотографий
  • Изучение веб-страниц приложения
  • Изучение форм веб-приложения
  • Изучение приложения MVC

После завершения этого модуля, студенты научатся: описывать основные технологии Microsoft в области web-разработки и выбирать наиболее подходящие для решения конкретных задач.

Модуль 2: Проектирование веб-приложения ASP.NET MVC 4

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

  • Планирование на этапе разработки проекта
  • Проектирование модели, контроллеры и представления

Лабораторная работа: Проектирование веб-приложений ASP.NET MVC 4

  • Модели планирования
  • Планирование контроллеров
  • Планирование просмотров
  • Создание архитектуры приложения MVC

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

Модуль 3: Разработка ASP.NET MVC 4 моделей

Цель этого модуля заключается в том, чтобы научить слушателей создавать модели шаблона MVC и реализовывать бизнес-логику в рамках этих моделей. Модуль также описывает, как выполнить подключение к базе данных или хранилищу альтернативных данных, с помощью Entity Framework и LINQ.

  • Создание модели MVC
  • Работа с данными

Лабораторная работа : Разработка ASP.NET MVC 4 моделей

  • Создание проекта MVC и Добавление модели
  • Создание нового SQL Azure баз данных в Visual Studio
  • Добавление свойств и методов в модели MVC
  • Редактирование заметок в модели MVC

После завершения этого модуля, студенты научатся: Создавать модели шаблона MVC и реализовывать бизнес-логику в рамках этих моделей.

Модуль 4: Разработка контроллеров ASP.NET MVC 4

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

  • Написание контроллеры и действия
  • Написание фильтров действий

Лабораторная работа : Разработка контроллеров ASP.NET MVC 4

  • Добавление контроллера MVC и запись действий
  • Написание фильтров действий в контроллере
  • Использование контроллера фото

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

Модуль 5: Разработка ASP.NET MVC 4 представлений

Целью данного модуля является описание роли представлений в веб-приложении MVC и научить слушателей создавать и кодировать их. Также будут рассмотрены: Razor, как решающий элемент для создания и функционирования макета отображения данных. Будут обсуждены вспомогательные элементы Html.ActionLink() и Html.EditorFor


  • Создание представлений с использованием движка Razor
  • Использование HTML Helpers
  • Повторное использование кода в представлениях

Лабораторная работа: Разработка ASP.NET MVC 4 представлений

  • Добавление представления для отображения фото
  • Добавление представления для новых фотографий
  • Создание и использование частичного представления
  • Добавление домашнего просмотра и тестирования просмотров

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

Модуль 6: Тестирование и отладка веб-приложений ASP.NET MVC 4

Цель этого модуля заключается в том, чтобы научить студентов создавать unit-тесты и использовать средства отладки Visual Studio 2012 при разработке веб-приложений.

  • Создание unit-тестов
  • Реализация стратегии обработки исключений

Лабораторная работа: Тестирование и отладка веб-приложений ASP.NET MVC 4

  • Выполнение модульных тестов
  • Настройка обработки исключений

После завершения этого модуля, студенты научатся: Запускать модульные тесты, использовать средства отладки Visual Studio 2012 и настраивать приложение для устранения неполадок.

Модуль 7: Структурирование ASP.NET MVC 4 веб-приложений

Целью данного модуля является дать возможность учащимся структурировать веб-приложения таким образом, чтобы пользователи могли находить нужную им информацию быстро и легко. Наиболее важной темой этого модуля является – поисковая оптимизация.

  • Конфигурирование шаблонов url
  • Создание навигационных элементов управления
  • Создание структуры переходов

Лабораторная работа: Структурирование ASP.NET MVC 4 веб-приложений

  • Используя механизм маршрутизации
  • Строительные элементы управления навигацией

После завершения этого модуля, студенты научатся: Создавать веб-приложения, которые использует механизм маршрутизации ASP.NET, с удобочитаемыми для человека URL.

Модуль 8: Применение стилей к ASP.NET MVC 4 веб-приложений

Цель этого модуля рассказать слушателям о том, как создать единый стиль и интерфейс MVC-приложений. Будут также рассмотрены методы адаптации отображения сайта для маленьких экранов и мобильных устройств.

  • С помощью шаблонов представлений
  • Применение CSS в приложение MVC
  • Создание адаптивной пользовательский интерфейс

Лабораторная работа: Применение стилей к ASP.NET MVC 4 веб-приложений

  • С помощью шаблонов представлений
  • Применяя согласованный внешний вид для приложения MVC
  • Адаптация веб-страниц для различных браузеров

После завершения этого модуля, студенты научатся: Использовать единый интерфейс и стиль в MVC приложении.

Модуль 9: Создание интерактивных страниц в веб-приложениях ASP.NET MVC 4

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

  • Использование AJAX и частичного обновления страницы
  • Реализация стратегии кэширования

Лабораторная работа: Создание интерактивных страниц в веб-приложениях ASP.NET MVC 4

  • Частичное обновление страницы
  • Настройка кэша ASP.NET

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

Модуль 10: Использование JavaScript и jQuery для создания интерактивных страниц

Целью данного модуля является научить студентов методам, с помощью которых код запускается в браузере. Этот подход может увеличить скорость отклика приложения, потому что подготовленная к просмотру страница может реагировать на действия пользователя без перезагрузки всей страницы с сервера. Студенты узнают о jQuery библиотеки сценариев и как его использовать для вызова веб-служб и обновления компонентов пользовательского интерфейса.

  • Размещение и запуск JavaScript на странице
  • Использование jQuery и jQueryUI

Лабораторная работа: Использование JavaScript и jQuery для создания интерактивных страниц

  • Использование jQuery для ответа пользователям
  • Создание пользовательского интерфейса с помощью jQueryUI

После завершения этого модуля, студенты научатся: Создавать клиентский код на JavaScript, использующий библиотеку jQuery.

Модуль 11: Управление доступом в ASP.NET MVC 4 веб-приложений

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

  • Реализация проверки подлинности и авторизации
  • Назначение ролей

Лабораторная работа: Управление доступом в ASP.NET MVC 4 веб-приложений

  • Настройка проверки подлинности и поставщики членства
  • Строительство входа и регистра просмотров
  • Авторизация доступа к ресурсам
  • Создание пароля Сброс представления

После завершения этого модуля, студенты научатся: Создавать защищенные MVC приложения.

Модуль 12: Безопасность в ASP.NET MVC 4 веб-приложении

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

  • Разработка надежных сайтов
  • Управление состоянием

Лабораторная работа: Создание устойчивых ASP.NET MVC 4 веб-приложения

  • Хранение пользовательских настроек
  • Использование пользовательских настроек в фото галерее

После завершения этого модуля, студенты научатся: Создавать MVC приложения , которые не подвержены вредоносным атакам и сохраняют сведения о пользователях.

Модуль 13: Использование Windows Azure в веб-приложениях ASP.NET MVC 4

Целью данного модуля является познакомить студентов с Windows Azure и объяснить, почему разработчик использует Windows Azure вместо кода в веб-приложении. Студенты увидят, как написать такой службы и вызвать его из веб-приложения или из других приложений, таких как приложение для мобильного устройства.

  • Представляя Windows Azure
  • Услуги проектирования и написания Windows Azure
  • Потребители Windows Azure служб в веб-приложении

Лабораторная работа: Использование Windows Azure веб-служб в веб-приложениях ASP.NET MVC 4

  • Создание и написание кода Windows Azure служба
  • Использование данных из Windows Azure служба

После завершения этого модуля, студенты научатся: Использовать web-сервисы Windows Azure из MVC приложения.

Модуль 14: Реализация WebAPI в ASP.NET MVC 4 веб-приложении

Цель модуля – объяснить, что такое Web API и как использовать основные функциональные возможности приложения для интеграции в других веб и мобильных приложениях. Студенты узнают о новой особенности Web API MVC 4, о том, как построить RESTful Web API.

  • Разработка Web API
  • Вызов Web API в мобильных и веб-приложениях

Лабораторная работа: Реализация WebAPI в ASP.NET MVC 4 веб-приложении

  • Разработка Web API в MVC 4
  • Добавление маршрутов и контроллеры для обработки запросов, отдых
  • Вызов служб RESTful из клиентского кода

После завершения этого модуля, студенты научатся: Работать с Web API

Модуль 15: Обработка запросов в ASP.NET MVC 4 веб-приложений

Цель данного модуля – научить слушателей, как создавать компоненты, которые перехватывают запросы от браузеров, прежде, чем они поступают к контроллерам MVC. Эти компоненты включают в себя модули HTTP, обработчики HTTP и протокола веб-сокеты. Модуль описывает сценарии, в которых разработчики используют такие компоненты и показывает, как добавить их в приложение MVC.

  • Использование HTTP-модулей и обработчиков HTTP
  • Использование Web Sockets

Лабораторная работа: Обработка запросов в ASP.NET MVC 4 веб-приложений

  • Написание обработчика веб что использует веб-сокеты
  • Строительство чат в приложение обмена фотографиями

После завершения этого модуля, студенты научатся: Изменять способ обработки запросов в приложениях MVC.

Модуль 16: Развертывание MVC в ASP.NET 4 веб-приложений

Цель для этого модуля заключается в том, чтобы научить студентов развертывать завершенные приложения MVC на веб-сервере или Windows Azure. Модуль описывает преимущества и недостатки использования Windows Azure для размещения приложения. Студенты также увидеть все варианты развертывания, доступные в Visual Studio.

  • Развертывание веб-приложения
  • Развертывание MVC 4 приложения

Лабораторная работа: Развертывание MVC в ASP.NET 4 веб-приложений

  • Развертывание приложения в Windows Azure
  • Тест завершенного приложения

После завершения этого модуля, студенты научатся: Развертывать веб-приложения ASP.NET MVC 4

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

Если вы хотите узнать больше о том, как использовать возможности Visual Studio для создания превосходных современных веб-приложений и облачных служб с помощью набора инструментов для совместной работы, то вам сюда. Эти учебные ресурсы помогут быстро приступить к работе: от знакомства с продуктом до его освоения и сертификации.

Пройдите курс обучения по Visual Studio и приобретите навыки, необходимые для создания и предоставления приложений различных типов на самых разных платформах. Если вы хотите изучить C# или HTML5, каждый указанный ниже путь обучения структурирован для обучения либо C# на платформе .NET, либо HTML5 с JavaScript и CSS3, а также для получения навыков работы с Microsoft Visual Studio . Путь начального уровня является прекрасным вариантом для начинающих, которым необходимо обучение базовым и основным навыкам работы с .NET и HTML5. Эти курсы подготовят вас также к сертификации по Microsoft Visual Studio .

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

Начальный уровень: Developer

Пройдите один из данных курсов Visual Studio и подготовьтесь к сертификации Microsoft Technology Associate (MTA)

  • Software Development Fundamentals Подготовка к экзамену 98-361 / Пройдите курс 40361
  • HTML5 App Development Fundamentals Подготовка к экзамену 98-375 / Пройдите курс 40375

Уровень «Эксперт»: Windows Store apps using HTML5

  • Programming in HTML5 with JavaScript and CSS3 Подготовка к экзамену 70-480 / Пройдите курс 20480
  • Essentials of Developing Windows Store Apps Using HTML5 and JavaScript Подготовка к экзамену 70-481 / Пройдите курс 20481
  • Advanced Windows Store App Development Using HTML5 and JavaScript Подготовка к экзамену 70-482 / Пройдите курс 20482

Уровень «Эксперт»: Windows Store Apps Using C#

Пройдите эти курсы и подготовьтесь к сертификации MCSD: Windows Store Apps Using C#.

  • Programming in C# Подготовка к экзамену 70-483 / Пройдите курс 20483
  • Essentials of Developing Windows Store Apps Using C# Подготовка к экзамену 70-484 / Пройдите курс 20484
  • Advanced Windows Store App Development Using C# Подготовка к экзамену 70-485 / Пройдите курс 20485

Уровень «Эксперт»: Web Applications

Пройдите эти курсы и подготовьтесь к сертификации MCSD: Web Applications .

10 причин начать использовать MVC ASP.NET

Сегодня я хочу привести 10 веских причин, почему ASP.NET для начинающих подходит больше всего:

Если вы уже работаете с PHP или Java ( или даже .NET ), или просто хотите понять, как создавать веб-приложения, то я бы рекомендовал вам задуматься об ASP.NET .

1. Отсутствие System.Web

Для нас, пользователей WebForm , без нее не обойтись при разработке веб-приложений. Если вы решитесь перейти к ASP.NET MVC Core 1.0 , то в нем исключено взаимодействие с библиотекой System.Web , что позволяет ускорить загрузку и работу сайта на базе ASP.NET .

2. Новая улучшенная модель 2020 года

ASP.NET MVC 4 для начинающих и ASP.NET MVC 5 канул в Лету… Некоторое время назад .NET был полностью переписан и переименован в ASP.NET Core 1.0 . Это еще больше облегчило жизнь разработчиков. Из привычного цикла, состоящего из написания кода, компиляции и тестирования работоспособности был исключен этап компиляции. Это значительно ускоряет процесс разработки.

3. Более естественные ощущения

Я был разработчиком в Microsoft еще со времен Classic ASP , и когда я перешел на WebForms , этот переход вовсе не показался мне естественным. С появлением MVC процесс разработки веб-приложений стал более натуральным, и такой формат работы мне понравился. В MVC нет ViewState или IsPostback , и о них не нужно постоянно беспокоиться. Все очень похоже на PHP .

4. Самый популярный в школе

Так как ASP.NET базируется на IIS – одном из самых популярных веб-серверов, то работа с MVC кажется вполне привычной. Большинство корпораций во времена Classic ASP начинали именно с IIS . На сегодняшний день IIS-серверы занимают 28% всего интернета и уступают по популярности только Apache и nginx .

5. Упрощенная интеграция с Javascript

В WebForms при попытке использовать Javascript могли возникнуть всевозможные проблемы, о которых многие из нас даже не подозревают. Мне доводилось видеть, как разработчики мучились с интеграцией JavaScript в код WebForm Page_Load ! В свою очередь, ASP.NET MVC для начинающих позволяет практически безукоризненно интегрировать Javascript в приложения. Просто попробуйте внедрить AngularJs в какое-нибудь веб-приложение на WebForms , а потом расскажите мне, сколько волос осталось на вашей голове.

6. Открытый исходный код


Теперь каждый может просматривать код! Если вы хотите дополнить View , и создать собственный ViewEngine , просто ознакомьтесь с кодом на Github , и посмотрите, как он реализован. Доступ к исходному коду развивает воображение!

7. Кроссплатформенная поддержка

Теперь можно создавать веб-приложения на любой платформе: Apple , Linux или Windows .

Ваше первое ASP.NET 5 веб приложение, созданное при помощи Visual Studio¶

В этом руководстве вы увидите, как создать простое веб приложение при помощи ASP.NET 5. В этом приложении данные будут связаны с базой данных SQL при помощи Entity Framework (EF), а ASP.NET MVC будет поддерживать операции CRUD.

Начальные реквизиты¶

Прежде чем начать, убедитесь, что вы сделали вот это: Установка ASP.NET 5 для Windows. Мы предполагаем, что у вас установлена Visual Studio 2015 и последняя версия среды и инструментария ASP.NET 5.

Дополнительную информацию по установке ASP.NET 5 на других платформах вы можете получить тут: Начинаем.

Создание нового ASP.NET 5 проекта¶

Запустите Visual Studio 2015. Из меню File выберите New > Project.

Выберите шаблон ASP.NET Web Application. Он находится в Installed > Templates > Visual C# > Web. Назовите проект ContosoBooks и нажмите OK.

В диалоговом окне New ASP.NET Project выберите Web Application под ASP.NET 5 Preview Templates. Кроме того, убедитесь, что галочка не стоит на Host in the cloud, и нажмите OK.

Не меняйте метод аутентификации. Оставьте по умолчанию Individual User Accounts.

Запуск приложения по умолчанию¶

После того как Visual Studio закончит создание приложения, запустите его, нажав Debug -> Start Debugging. Как вариант, вы можете нажать F5.

Для инициализации Visual Studio и нового приложения может потребоваться время. После завершения браузер покажет запущенное приложение.

После запуска приложения закройте браузер и нажмите на иконку “Stop Debugging” в Visual Studio, чтобы остановить приложение.

Просмотр проекта¶

В Visual Studio окно Solution Explorer позволяет вам управлять файлами проекта. Шаблон веб приложения, который вы использовали для создания этого приложения, добавляет следующую базовую структуру папок:

Visual Studio создает некоторые начальные файлы и папки для проекта. Вот первичные файлы, с которыми вам стоит ознакомиться:

Имя файла Цель
project.json Присутствие файла project.json определяет проект .NET Execution Environment (DNX). В файле project.json содержится вся информация, которая нужна DNX, чтобы запустить и упаковать ваш проект. Дополнительную информацию, включая файловую схему project.json, вы можете найти тут: see Работа с DNX проектами.
global.json Visual Studio использует этот файл для конфигурации проекта.
appsettings.json Этот файл позволяет вам включать дополнительную информацию о проекте. Дополнительную информацию вы можете получить тут: Конфигурация.
Startup.cs Класс Startup является начальной точкой приложения. В классе Startup должен быть определен метод Configure , кроме того, здесь может быть определен метод ConfigureServices , и он может быть вызван при запуске приложения. Дополнительную информацию вы можете получить тут: Запуск приложения.
Index.cshtml Здесь view содержит HTML для основной страницы.
_Layout.cshtml Здесь view содержит общий HTML для разных страниц веб приложения.
HomeController.cs Этот controller содержит классы, которые обрабатывают входящие запросы браузера, получают модельные данные, а затем определяют шаблоны представлений, которые возвращают ответ браузеру.

Понимание MVC¶

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

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

Понимание .NET Core¶

.NET Core 5 — это модальная реализация среды разработки и библиотек, которая включает в себя некоторые аспекты .NET Framework. .NET Core 5 разрабатывается для Windows, Linux и OS X. .NET Core 5 состоит из набора библиотек “CoreFX” и маленькой среды разработки “CoreCLR”. .NET Core имеет открытый исходный код, так что вы можете отслеживать развитие проекта на GitHub. Больше информации вы можете получить тут: Выбор правильного .NET сервера.

Entity Framework¶

Entity Framework (EF) — это ORM (object-relational mapping) фреймворк. Он позволяет работать с реляционными данными как с объектами, и при этом вам нужно писать намного меньше кода для доступа к данным, чем обычно. Используя EF, вы можете работать с запросами при помощи LINQ, затем получать и обрабатывать данные как строго типизированные объекты. LINQ предлагает паттерны для запроса и обновления данных. Использование EF позволяет сфокусироваться на остальной части проекта, а не на основах доступа к данным.

Откройте файл project.json. В разделе dependencies вы увидите следующие строки, связанные с EF:

Здесь показано, что вы можете использовать команды EF из командного окна, а также что пакет EF NuGet включен в ваш проект.

Создание модели данных и скаффолдинг¶

Entity Framework поддерживает парадигму разработки Code First. Code First позволяет определять модели данных при помощи классов. Класс — это конструкция, которая позволяет создавать собственные пользовательские типы, группируя переменные разных типов, методы и события. Классы могут работать с существующей базой данных или генерируют базу данных. В данном руководстве вы начнете с создания entity-классов, которые определяют модели данных для веб приложения. Затем вы создадите контекстные классы, которые управляют entity-классами и дают данным доступ к базе данных. Далее вы настроите EF и заполните базу данных.

Создание entity-классов¶

Классы, которые вы создаете для определения схемы данных, называются entity-классами. Если вы новичок в работе с базами данных, подумайте об entity-классах как о табличной структуре базы данных. Каждое свойство класса определяет колонку таблицы базы данных. Эти классы предлагают легкий, объектно-реляционный интерфейс, совмещающий объектно-ориентированный код и реляционную табличную структуру базы данных.

В веб приложении будет две сущности:

Вы определите класс для каждой из них в папке Models в Solution Explorer.

Модельный класс вы можете поместить в любое место вашего проекта. Папка Models — это просто соглашение.

Кликните правой кнопкой мышки по папке Models и выберите Add > New Item. В диалоговом окне Add New Item выберите шаблон Class. В поле Name напишите “Author.cs” и нажмите OK.

Замените код по умолчанию следующим кодом:

Повторите эти шаги для создания другого класса Book со следующим кодом:

Чтобы не уложнять приложение, пусть у каждой книги будет один автор. Свойство Author определяет способ управления отношениями между автором и книгой. В EF этот тип свойства называется navigation property. Когда EF создает схему базы данных, EF автоматически вставляет AuthorID , и это будет вторичным ключом для таблицы Authors.

Скаффолдинг¶

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

Чтобы добавить скаффолдинг кликните правой клавишей мышки по папке Controllers в Solution Explorer. Выберите Add –> New Scaffolded Item.

Если вы не видите опцию New Scaffolded Item, убедитесь, что при создании проекта вы использовали Individual User Accounts.

Из диалогового окна Add Scaffold выберите MVC 6 Controller with views, using Entity Framework, а затем нажмите на кнопку Add.

Далее, в диалоговом окне Add Controller в списке с модельными классами выберите Book (ContosoBooks.Models). Также установите контекстный класс на ApplicationDbContext (ContosoBooks.Models). Флажок на Generate views должен быть установлен. Нажмите на кнопку Add.

Как вы видите, диалоговое окно Add Controller дает вам возможность выбирать опции для создания контроллеров и представлений.

Этот скаффолд создает код, который предоставляет контроллер и набор представлений. В представлениях есть UI и код для создания, чтения, обновления, удаления и перечисления данных из базы данных.

Повторите вышеперечисленные шаги по скаффолдингу, чтобы создать контроллер Author и связанные с ним представления. Используйте модельный класс Author (ContosoBooks.Models) и контекстный класс ApplicationDbContext (ContosoBooks.Models), как показано на следующем рисунке.

В Solution Explorer вы увидите, что новые контроллеры добавлены в папку Controller, а новые представления в папку Views.

Настройка приложения перед добавлением данных¶

Далее, к приложению нужно добавить пакет Microsoft.Extensions.DependencyInjection . В Solution Explorer найдите и откройте project.json. В разделе dependencies в конце раздела пропишите эту строку.

IntelliSense помогает вам, когда вы набираете. Когда вы сохраните project.json, Visual Studio автоматически даст ссылку на новый пакет.

После добавления этой строки раздел dependencies в файле project.json будет выглядеть вот так:

Добавление данных¶

Мы не будем вручную набирать данные — мы используем код, который заполнит базу данных. Добавьте класс SampleData в папке Models со следующим кодом:

Вы не будете вставлять этот класс данных в производственный код, но для нашего сценария он годится.

Далее, в Solution Explorer, откройте файл Startup.cs. Добавьте следующую строку кода в методе Configure:

После этого полный файл Startup.cs будет выглядеть вот так:

Обратите внимание, что в ConfigureServices приложение вызывает Configuration[«Data:DefaultConnection:ConnectionString»] , чтобы получить строку соединения с базой данных. Во время разработки эта настройка идет из файла appsettings.json. Когда вы разворачиваете приложение в производственной среде, вы устанавливаете строку соединения в переменную среды на хосте. Если Configuration API находит переменную среды с тем же ключом, то возвращает переменную среды, вместо того значения, что находится в appsettings.json.

Создание веб приложения¶

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

Из меню Build выберите Build Solution.

Отображается окно Output, и если все прошло успешно, вы увидите соответствующее сообщение.

Если же произошла ошибка, то просмотрите предыдущие шаги. Информация в окне Output покажет, в каком файле возникла проблема и где требуется изменение. Эта информация поможет вам определить, какие предыдущие шаги вам стоит повторить, чтобы устранить проблему.

Прежде чем запустить приложение, вы должны создать БД, используя миграцию данных.

Использование миграции данных для создания базы данных¶

Миграция данных в EF используется для обновления моделей во всем приложении. Изначально используя миграцию данных для создания базы данных, вы можете легко изменить базу, после того как была изменена модель. Это позволит вам более эффективно создавать и поддерживать приложение. Альтернативой миграции данных, когда требуются изменения в модели или схеме после изменения базы данных, является пересоздание всей базы данных.

Откройте Command Prompt в директории проекта (ContosoBooks/src/ContosoBooks).

Чтобы открыть Command Prompt, кликните правой кнопкой мышки по кнопке start в Windows и выберите из меню Command Prompt.

Чтобы найти директорию проекта, кликните правой кнопкой мышки в Visual Studio по имени проекта (ContosoBooks) в Solution Explorer и выберите Open Folder in File Explorer. Скопируйте путь к проекту из File Explorer в Command Prompt. Например, введите следующее из Command Prompt, чтобы сменить директорию:

Убедитесь, что вы перешли к папке ContosoBooks, что в папке src.

Из Command Prompt запустите следующие команды:

Если dnu restore не распознается, вам нужно полностью повторить шаг с начальными реквизитами (или частично). Но сперва вам надо проверить Active версию .NET Version Manager (dnvm). Чтобы сделать это, введите dnvm list в командной строке. Если рядом с какой-либо версией нет *, установите активную версию, то есть, введите dnvm use 1.0.0-rc1-update1 -p , так что нужная версия будет выбрана.

.NET Version Manager (dnvm) — это набор утилит командной строки, которые используются для обновления и конфигурации .NET Runtime.

DNX обозначает .NET Execution Environment. Команда ef указана в файле project.json проекта. Больше информации по dnvm , dnu , and dnx , вы можете получить тут: DNX Overview.

Команда “ add Initial ” создает миграцию “Initial”, которая добавляет в проект код, позволяя EF обновлять схему базы данных. Команда update создает актуальную базу данных. После запуска этой команды папка Migrations будет обновлена:

Если вы хотите получить помощь по EF командам, введите следующее в командной строке: dnx ef -? . Для помощи с командой add введите следующее: dnx ef migrations add -? . А для помощи с командой update — следующее: dnx ef database update -? .

Кроме того, вы сможете увидеть новую базу данных в SQL Server Object Explorer.

Добавление навигации¶

Обновите навигацию для веб приложения. Из Solution Explorer откройте файл Views/Shared/_Layout.cshtml. Найдите следующий код:

Замените выше представленный код вот этим:

Данные изменения добавят ссылку к представлению Books и ссылку к представлению Authors. Вы создали эти представления, когда добавили в проект скаффолдинг.

Создание веб приложения¶

Чтобы убедиться, что все работает, вам снова нужно собрать приложение.

Из меню Build выберите Build Solution.

Локальный запуск веб приложения¶

Запустите приложение, чтобы увидеть, как выглядит вся продукция или категория продуктов.

В Solution Explorer кликните правой клавишей мышки по названию проекта и выберите View -> View in Browser. Либо же просто нажмите F5.

Откроется браузер и покажет приложение. Нажмите на ссылку Books вверху страницы.

Закройте браузер и нажмите на иконку “Stop Debugging” в Visual Studio.

Публикация приложения на Azure¶

В Solution Explorer в Visual Studio кликните правой кнопкой мышки по проекту и выберите Publish.

В окне Publish Web нажмите на Microsoft Azure Web Apps и залогиньтесь на Azure.

После этого нажмите New, чтобы создать на Azure новое приложение.

Назовите сайт, выберите сервисный план, ресурсную группу и регион. Также выберите сервер базы данных, а также имя пользователя и пароль к нему. Если вы уже создавали сервер базы данных, используйте его. После этого нажмите Create.

В Connection в окне Publish Web нажмите Publish.

Прогресс публикации вы можете просмотреть в окне Output или в окне Azure App Service Activity в Visual Studio.

После публикации на Azure ваше приложение, запущенное на Azure, будет отображено в браузере.

Дополнительная информация доступна вот тут: Publishing and Deployment.

Создание представлений в ASP.NET MVC 4, оптимизированных для мобильных приложений

Посетителей: 1068 | Просмотров: 1261 (сегодня 0) Шрифт:

Проблема не в media-запросах CSS как технологии. Проблема даже не в адаптивном веб-проектировании (responsive Web design, RWD) как вспомогательной методологии media-запросов CSS. Что же делает media-запросы CSS и адаптивные разметки подходом «мобильные устройства в последнюю очередь» (mobile-last approach)? Ключ к разгадке кроется в самом слогане, используемом для продвижения этого подхода: одна кодовая база может обслуживать множество представлений. С этой точки зрения, CSS — клиентская технология — используется, чтобы переключаться между представлениями для дополнительной адаптации, когда одной CSS недостаточно.

На мой взгляд в этом подходе предлагается обслуживать все устройства одинаковым контентом, просто подгоняя разметку страницы под размеры экрана. Делая так, вы не сможете обеспечить максимально возможное удобство всем пользователям. Я считаю, что вполне разумно ориентироваться на единую кодовую базу (это стандартный подход в Web API), но определенно имеет смысл уделять особое внимание специфическим сценариям использования для каждого класса устройств, которые вы намерены поддерживать. Термин «мобильный» в наши дни вообще стал весьма размытым, поскольку широко распространились такие классы устройств, как смартфоны, планшеты, лэптопы и смарт-телевизоры, не говоря уже о всяких гаджетах вроде очков дополненной реальности и интеллектуальных наручных часов.

Примерно год назад я представил в этой рубрике серверный подход к разработке сайтов на основе ASP.NET MVC — создание специализированных представлений для каждого класса поддерживаемых устройств («Mobile Site Development: Markup», msdn.microsoft.com/magazine/jj133814). Я сделал это в контексте ASP.NET MVC 3. Приятно отметить, что в ASP.NET MVC 4 теперь имеются ранее упомянутые режимы отображения, с помощью которых легко реализовать логику на серверной стороне, способную создавать оптимальные представления и контент для конкретного устройства. Чтобы добиться максимальной эффективности при таком подходе, вы должны как можно больше знать о функциональности запрашивающего устройства. Однако, помимо базовой информации о размере экрана и его текущей ориентации, вы больше ничего особенного получить от клиента не сможете. И тогда вы должны прибегнуть к серверному хранилищу информации об устройствах.

Введение в режимы отображения в ASP.NET MVC 4

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

В ASP.NET MVC 4 режимы отображения являются системной функциональностью, которая расширяет классическое поведение механизмов представлений возможностью выбора файла представления, наиболее подходящего для запрашивающего устройства. В ранее упомянутой статье по ASP.NET MVC 3 я использовал для этой цели собственный механизм представлений. Кроме того, в том решении я был ограничен представлениями Razor. Благодаря функционалу режимов отображения методы вашего контроллера по-прежнему будут вызывать, скажем, представление с именем Index, а исполняющая среда ASP.NET MVC будет вместо этого выбирать файл представления с именем index.mobile.cshtml, если о запрашивающем устройстве известно, что оно мобильное.

Это отличные новости, поскольку вы сможете по-прежнему использовать одну кодовую базу для своего сайта. Вам просто потребуется добавить дополнительные CSHTML-файлы представлений для каждого класса устройств, который вы намерены поддерживать. Для начала рассмотрим пример кода на рис. 1.

Рис. 1. Стандартный список поддерживаемых режимов отображения

Страница с кодом, приведенным на рис. 1, выводит стандартный список поддерживаемых режимов отображения. Вывод, генерируемый этой страницей, показан на рис. 2.

Рис. 2. Исходный список режимов отображения

Режимы отображения в ASP.NET MVC 4 следуют нескольким соглашениям. В частности, каждый режим отображения сопоставляется с ключевым словом. Это ключевое слово используется для формирования имени соответствующего файла представления. Режим отображения по умолчанию (default display mode) связывается с пустой строкой. В итоге следующие файлы представлений корректно обрабатываются любым приложением ASP.NET MVC 4 без дополнительного вмешательства с вашей стороны: index.cshtml и index.mobile.cshtml.

Для демонстрации скопируйте файл index.cshtml в новый файл с именем index.mobile.cshtml и добавьте его в проект. Чтобы различать эти два файла, добавьте в «мобильный» файл такую строку:

Если вы запустите приложение и протестируете его, используя Internet Explorer или другой настольный браузер, то ничего не меняется. Попробуйте нажать F12, чтобы открыть Internet Explorer Developer Tools и указать агент мобильного пользователя (user agent, UA), выбрав Tools | Change user agent string, как показано на рис. 3.

Рис. 3. Принудительный запуск агента мобильного пользователя в Internet Explorer для тестовых целей

Я уже сконфигурировал несколько мобильных и планшетных UA. Например, чтобы запрашивающий браузер был идентифицирован как смартфон HTC Desire Android, используйте следующее:

На рис. 4 показано, что вы получите с сайта ASP.NET MVC 4. Страница, обслуживаемая той же парой методов контроллера и действия (action methods), является index.mobile.cshtml. Что важнее, все это происходит безо всяких изменений в стиле программирования и не требует обучения новым навыкам.

Рис. 4. Переключение в мобильное представление

Идем дальше


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

Встроенная в ASP.NET MVC логика для распознавания мобильных устройств оставляет желать много лучшего. Вероятно, она работает с большинством смартфонов, но бесполезна для обнаружения более старых сотовых телефонов. Рассмотрим, к примеру, следующий UA:

Этот UA относится к устаревшему смартфону (довольно популярному несколько лет назад) под управлением закрытой ОС и с нестандартным браузером на основе WebKit. Этот смартфон не поддерживает соединения по Wi-Fi, но обладает удивительно хорошими возможностями рендеринга HTML. Его экран меньше, чем у большинства смартфонов, но поддерживает сенсорный ввод. При использовании базовой поддержки режимов отображения из ASP.NET MVC этот смартфон не распознается как мобильное устройство и получает полные версии страниц. Здесь проявляются два недостатка. Во-первых, пользователи с трудом могут просматривать контент, поскольку он растягивается и выходит за пределы экрана. Во-вторых, загружается слишком много контента, а поскольку данный смартфон не поддерживает Wi-Fi, весь этот контент скорее всего будет загружаться по 3G-соединению, т. е. медленно и весьма дорого для пользователя.

Когда я поднимаю этот вопрос, некоторые отвечают, что их сайты просто не поддерживают такие типы устаревших устройств. Замечательно, но в таком случае разве не лучше было бы отправлять вежливое сообщение пользователю вместо того, чтобы пускать все на самотек? Чтобы отправить сообщение наподобие «Извините, этот сайт нельзя просматривать с вашего устройства», вам все равно нужно правильно распознавать данное устройство и понимать, что оно отличается, скажем, от iPhone. Более того, вопрос игнорирования устаревших устройств является бизнес-решением, а не проблемой реализации. Отказ от обслуживания прежних поколений устройств может отразиться не только на вашем имидже, но и на бизнесе. Поэтому давайте рассмотрим, как добавить несколько режимов отображения на сайт для корректного обслуживания нескольких классов устройств.

Классы устройств

Современный веб-сайт обеспечивает максимально возможное удобство использования независимо от типа устройства. «Максимально возможное удобство использования» означает, что предусматриваются специфические сценарии применения, избирательная передача данных и специфические функции. Конечная разметка должна зависеть от конкретного устройства. Если вы вместо этого подстраиваете все на клиенте, как это бывает, когда полагаются на media-запросы CSS, то на самом деле у вас есть унифицированное представление страниц, которое затем просто адаптируется под экраны разных размеров. По большей части это требует скрытия некоторых блоков, смены размещения некоторых других блоков на вертикальное и, возможно, уменьшения набора визуальных элементов. Унифицированное представление зачастую является страницей для настольного браузера. Лично я не считаю этот вариант тем, где на первое место ставятся мобильные устройства.

Говоря «тип устройства», я не имею в виду то, как различать iPhone от Windows Phone. Вместо этого я подразумеваю применение логики, способной генерировать разную разметку для смартфонов, планшетов и лэптопов. В ASP.NET MVC 4 у нас есть минимум три режима отображения: smartphone, tablet и default (для настольных браузеров). Я добавлю новый класс DisplayConfig, вызываемый из App_Start (рис. 5).

Рис. 5. Класс DisplayConfig

Этот класс сначала опустошает предоставляемый набор режимов отображения. Тем самым он избавляется от режимов по умолчанию. Затем код заполняет предоставленный системный набор только что созданным списком режимов отображения. Новый режим отображения — это экземпляр класса DefaultDisplayMode. Имя режима задается через конструктор. Логика, которая определяет, подходит ли данный UA, устанавливается через свойство ContextCondition.

Свойство ContextCondition — это делегат, который принимает объект HttpContextBase и возвращает булево значение. В теле делегата анализируется HTTP-контекст текущего запроса, чтобы определить, годится ли данный режим отображения. На рис. 5 я использую несколько методов расширения, чтобы сохранить читаемость кода, а на рис. 6 перечислены эти методы расширения.

Рис. 6. Методы расширения, сохраняющие читаемость кода

Весь рассмотренный до сих пор код является чисто инфраструктурным. В конечном счете вы пишете по одному методу для каждого режима отображения. Каждый метод принимает UA и должен возвращать булево значение. Вот самая базовая процедура для проверки на запрос с какого-либо планшета:

Эта процедура гарантированно распознает только iPad и Galaxy Tab, но из нее видно, как нужно писать такие процедуры. Как минимум, вы могли бы добавить код для проверки на обращения со смартфонов. Для обнаружения планшетов и смартфонов можно задействовать преимущества любой инфраструктуры Device Description Repository (DDR) — коммерческой или с открытым исходным кодом. Об этом мы поговорим в следующей статье.

Серьезный бизнес

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

Программист ASP.NET MVC C#

Кнопка для разрабоки, просьба не нажимать

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;
>

Use Firebase with Your ASP.NET MVC App

Working with databases hosted online has become easier over recent years. The emergence of Database as a Service (DaaS) specifically makes quick integrations much easier. It is important to keep application user data separate from personally identifiable information, especially in this day and age. When using a third party auth provider like Okta, user information like a name or email address can be stored by that provider directly in their system, benefitting from their oversight and protection.

For transaction-heavy applications with requirements like logging sign-in timestamps, real time messaging or even monetary purchases, using a secondary database like Firebase can assist with that and be set up quite rapidly. While there are many, many configurations that Firebase can support, this tutorial will cover a loose ruleset with a basic integration into your ASP.NET MVC application.

Let’s get started!

Set Up a Realtime Database in Firebase for Your ASP.NET MVC App

First you will create a new project in Firebase. Visit https://firebase.google.com, click on Get Started and sign in with your Google account. Select Add Project, name it “FirebaseMVCSample” and agree to the Terms and Conditions before clicking Create Project. When the new project is ready, click** Continue**. You will land directly into the Firebase console dashboard.

Expand the Develop menu on the left-hand side and select Database. Scroll down to Realtime Database and click Create Database.

Now you will be presented with Security rules for this new database. Select Start in Test Mode and click Enable. You will land on the Realtime database with your initial node set to null — because you haven’t added any data yet! Copy the link to your Firebase database. This will allow you to get up and running quickly for this tutorial:

Google gives you a warning about the security rules (this is a good thing!). For the purposes of this tutorial, you can leave the rules unrestricted for this proof-of-concept integration.

Create Your ASP.NET MVC Application with Firebase

Open Visual Studio 2020 and select Create a New Project. Choose ASP.NET MVC Web Application. Name the project “FirebaseMVCApp” and make sure .NET Framework 4.7.2 is selected then click Create. Select MVC, leave all the defaults and click Create.

You need to create an object that will represent what will be saved inside of your Firebase database for each user. Right-click on the Models folder and add a new class called “LoginData.cs”. Add the following property inside of the class:

Now you need to add a library to handle database access. Right-click on the project and select Manage Nuget Packages. Install the following library:

Open the HomeController and add the following references in the Usings section:

Now replace the About function with the code below, and change the FirebaseClient to your unique Firebase project URL.

You will need to add a Using reference to your project’s Models folder to resolve the code above.

Let’s test out the database read and write visually by updating the About view of your MVC application. Expand the Views folder, open About.cshtml and replace it with the code below:

Build and launch your application in a browser. Make sure to keep a tab open to the Firebase console on your Realtime database page at the same time. Click on your About navigation link. The act of launching the view will add a timestamp to the page.

Now look at your Firebase console tab. Expand the nodes to see how the data was saved, in JSON format style. Notice that there is a randomly generated session node that the timestamp is inside of. That is built into the PostAsync method in the FirebaseDatabase library for the final child object.

If you navigate to the Home page and then back to the About page, you will see an additional entry not only on the view but in the database as well.

Congratulations, you’ve put non-identifying data into a database with ease!

Set Up Secure User Authentication

You can generate your own user IDs to insert into the database, but using a third party auth provider is a more secure way to allow users to be in charge of their own data while you concentrate on your business logic.

Okta provides hosting for user-identifying data and handles the authentication login process for you — handing off the user ID and making this a painless integration. If you haven’t already, go to https://developer.okta.com and create an account to get started, then continue with the following steps.

Visit the Users tab and click Add Person. Fill out the form for a sample user, be sure to set the Password drop down to “Set by Admin” and fill in a temporary password. Click Save. Once you have the user added, you’ll notice the status for your newly created user is set to “Password expired”. This is expected for admin-created users and will guide them through their reset password flow during the first login to your site — without any additional work on your part.

Now that you have your users set up in your database, set up this specific application within Okta. On the Dashboard, click Applications in the main menu and on the Application screen, click Add Application. Select Web and then click Next.

Name the application “FirebaseMVC”. Select Implicit (Hybrid) in addition to the pre-selected Authorization Code, and click Done. Your application has been created, but you still need to add the logout redirect now that the field is available. Select Edit, add the URI http://localhost:8080/Account/PostLogout, and click Save.

Scroll down and you’ll have access to the ClientID and Client Secret. Keep these on hand to add to your application’s Web.config file later on. Now your app is good to go for Okta auth!

Add Authentication to Your ASP.NET MVC App

It’s time to revise your application, hand off the user login and allow Okta to generate the object that will give you the ID to pass to Firebase to save additional data.

Right-click on the project and select Properties. Go to the Web tab and set the project URL to reflect the application settings in Okta’s portal (https://localhost:8080). Next, right-click on the project and select Manage NuGet Packages. Install the following libraries:

Add the Okta account access to your Web.config file under the appSettings section. Use the code below, replacing the Okta client ID and secret with your specific app’s Okta credentials you generated in the portal earlier.

In order to handle OWIN, we need to do that from a Startup class. Right-click on the project and select Add OWIN Startup class. Call it “Startup” and click OK. Add the following to your usings section:

Replace the Configuration() method with the code below.

Because this is a claims-aware application, we need to indicate where to get user identity information from. Open your Global.asax.cs file. Add the following to the Usings section.

Replace the Application_Start() method with the code below to match the name of claim type — “name” in this case — from the JsonWebToken (JWT) you are receiving from Okta to set your user’s identifier.

Go to Views/Shared and open _Layout.cshtml. Beneath the

    list of ActionLinks add the code below to display the user’s name and toggle the Login/Logout link button.

Now you need to handle the login and logout functionality. Right-click on the Controllers folder and add a new MVC 5 empty controller called “AccountController”. Add the following references to the Usings section:

Add the code below inside of the AccountController class to handle the Action Results for this controller.

Open the HomeController and add the Authorize attribute at the top of the About ActionResult. This will ensure that function will only be accessed by authenticated users and redirect to the Okta login process if they are not authenticated.

That is all you need to set up the user login to redirect to Okta, and back to your app afterwards. Now you can finally update your About function and use the Okta-provided user claims to retrieve the unique identifier for Firebase and update the current user to their email.

Add the following reference to your Usings section:

Replace your About function with the code below finish this, remembering to change the FirebaseClient to your unique Firebase project URL during instantiation.

Build and run your app in the browser. Notice there will be a “Log in” option to the far right. The user will see this if they are not authenticated in the app, but right now they can still look at the Contact and Home pages unauthenticated.

Click on About. The user should be redirected to your Okta hosted login page. Sign in as the user you created, and it might take you through a password update if this is the first time they have ever logged in.

After authentication, you should be redirected back to your ASP.NET MVC application’s About page, with the last login recorded for your authenticated user retrieved from Firebase and displayed on the page. Click the About navigation link a couple more times to generate additional ones if you wish. Notice that the user’s name is now reflected in the navigation bar as assigned to the Principal Identity, and the option to Log out is presented.

Log into your Firebase console and go to your database. Notice that, instead of the user ID being manually set, it is now populated by the Okta user ID from the Principal Identity claims that Okta passed to it. If you log out and log in as a completely different user, it will automatically create the data node for them in Firebase without you having to do a different call to create it.

That’s it! You have successfully implemented both Okta and Firebase into an ASP.NET MVC 4.7 application! What I really like about Firebase is it is easy to get started and throw your additional data up to a cloud with just a few clicks. Since it is a No-SQL database, it can take some getting used to the way the data is stored, and the data type safety is left up to you as the developer. For fast, unstructured data storage it is one of my favorite ways to get a project started — and features native Javascript and mobile SDKs that can take advantage of the web socket technology and listeners present in today’s most lightning fast messaging apps.

The only question left is — what can you make with your Fire(base) power?

Learn More About ASP.NET, Firebase, and Secure Authentication

If you’d like to learn more about using secure OAuth and user management in ASP.NET, we’ve also published a number of posts that might interest you:

As always if you have any questions or comments about this post feel free to leave a comment below. For other great content from the Okta Dev Team, follow us on Twitter and Facebook!

Разработка веб-приложений на C# ASP.NET MVC

ASP.NET — это один из самых популярных фреймворков для разработки сайтов. Инфраструктура ASP.NET MVC 5 представляет собой последнюю версию веб-платформы ASP.NET от Microsoft. У неё есть множество преимуществ, которых нет в классической платформе для веб-разработки ASP.NET Web Forms.

Встроенные методы представлений генерируют ясный и соответствующий стандартам код разметки (HTML). Таким образом ASP.NET MVC 5 предлагает мощную систему маршрутизации URL, которая позволяет создавать удобочитаемые URL-адреса. Компоненты ASP.NET MVC расширяемы и тестируемы, она обеспечивает расширенную поддержку разработки через тестирование. Огромным преимуществом является также мощная полнофункциональная среда разработки — Microsoft Visual Studio.

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

Можно сказать, что ASP.NET MVC вместе с экосистемой VisualStudio.NET является одним из самых совершенных, удобных и востребованных средств разработки сайтов.

Изучение платформы .NET позволит вам создавать не только веб-сайты, но и оконные, консольные приложения для разных ОС и устройств.

На мастер-классе вы узнаете о базовых принципах создания веб-приложений на платформе ASP.NET. Мы рассмотрим следующие темы:

Концепция MVC (модели, представления, и контроллеры);

Для чего нужно их разделять и как они взаимодействуют;

Движок представлений Razor;

Жизненный цикл ASP.NET MVC приложения;

Создание удобныx путей (URL) сайта;

Организация доступа к данным.

Мы рассмотрим процесс разработки простого MVC-приложения на примере. Перед просмотром рекомендую установить бесплатную полнофункциональную версию среды разработки Visual Studio Community 2015.

Цукерберг рекомендует:  3D-эффект для сетки элементов
Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих