В решті цього розділу ми розглянемо кілька основних особливостей MVC шляхом створення простого додатку для введення даних. У цьому розділі ми збираємось трохи прискоритися. Наша мета полягає у демонстрації MVC у дії, тому ми опустимо деякі роз'яснення про те, як усе це працює. Але не хвилюйтеся, ми докладно розглянемо ці теми у наступних розділах.

Накидаємо план

Давайте уявімо, що подруга вирішила провести вечірку напередодні Нового року, і що вона попросила нас створити веб-сайт, який дозволить її друзям та знайомим прийняти запрошення з RSVP (підпис на запрошення, що закликає одержувача дати відповідь про участь у заході). На сайті має бути наступне:

• Головна сторінка, де відображається інформація про вечірку
• Форма, яка може бути використана для RSVP
• Валідація RSVP форми, яка відобразить сторінку з подякою
• Заповнена та відправлена ​​відповідь про згоду взяти участь у вечірці

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

Лістинг 2-7:Відображення інформації про вечірку

@( Layout = null; )

Ми на правильному шляху. Якщо ви запустите програму, ви побачите інформацію про вечірку, ну, вірніше, мітку-заповнювач (placeholder) для цієї інформації, але ви можете вловити суть. Приклад показано на .

Малюнок 2-12:Додавання уявлення

Проектування моделі даних

У MVC Мпозначає Модель, і це є найважливішою частиною програми. Модель є представленням реальних об'єктів, процесів та правил, які визначають об'єкт, відомий як домен, нашої програми. Модель, яка часто згадується як доменна модельмістить C# об'єкти (відомі як доменні об'єкти), які становлять суть нашого додатка, та методи, які дозволяють нам маніпулювати ними. Подання та контролери розкривають домен клієнтам у погодженому порядку, і добре продуманий MVC додаток починається з добре продуманої моделі, яка потім є координаційним центром, коли ми додаємо контролери та уявлення.

Нам не потрібна складна модель для програми PartyInvites, але ми створимо один доменний клас, який ми назвемо GuestResponse. Цей об'єкт відповідатиме за зберігання, перевірку та підтвердження RSVP.

Додавання класу моделі

За MVC угодою класи, які складають модель, розміщуються в папці Models . Клацніть правою кнопкоюмиші по Models у вікні Solution Explorer і виберіть Add , за яким слідує Class , зі спливаючого меню. Назвіть файл GuestResponse.cs та натисніть кнопку Add , щоб створити клас. Змініть вміст класу відповідно до.

Порада

Якщо у вас немає пункту меню Class, то ви, ймовірно, залишили працювати налагоджувач (дебаггер) Visual Studio. Visual Studio обмежує зміни, які можна внести до проекту, якщо програма запущена.

Лістинг 2-8:Доменний клас GuestResponse

namespace PartyInvites.Models ( public class GuestResponse ( public string Name ( get; set; ) public string Email ( get; set; ) public string Phone ( get; set; ) public bool? WillAttend ( get; set; ) ) )

Порада

Ви, можливо, помітили, що властивість WillAttend має тип bool? (Nullable ), тобто воно може бути true, false або null. Ми пояснимо це у розділі «Додавання валідації» далі у цьому розділі.

Посилання на метод дії

Одна з цілей нашого додатку полягає у включенні RSVP форми, тому нам потрібно додати посилання на неї з нашого уявлення Index.cshtml , як показано у .

Лістинг 2-9:Додавання посилання для форми RSVP

@( Layout = null; )

Html.ActionLink є допоміжним методом HTML. MVC Framework розроблений з набором вбудованих допоміжних методів, які зручні для обробки HTMLпосилань, текстових вступних даних, прапорців, вибірок і навіть власних елементів управління. Метод ActionLink приймає два параметри: перший – це текст для відображення у посиланні, а другий – це дія, коли користувач натискає на посилання. Ми пояснимо допоміжні методи HTMLу розділах 19-21. На показано посилання, яке ми додали.

Малюнок 2-13:Додавання до подання посилання

Якщо ви наведете курсор миші на посилання у браузері, ви побачите, що посилання вказує на http://yourserver/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 , як показано в .

Лістинг 2-10:Додавання до контролера нового методу дії

using System; використовуючи System.Collections.Generic; використовуючи System.Linq; using System.Web; using System.Web.Mvc; namespace PartyInvites.Controllers ( public class HomeController: Controller ( public ViewResult Index() ( int hour = DateTime.Now.Hour; ViewBag.Greeting = hour< 12 ? "Good Morning" : "Good Afternoon"; return View(); } public ViewResult RsvpForm() { return View(); } } }

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

Ми хочемо додати уявлення для нашого методу дії RsvpForm, але ми збираємося зробити щось більше: тобто створити строго типізованеуявлення. Строго типізовані уявлення призначені обробки певного типу доменів. Якщо ми вкажемо тип, з яким ми хочемо працювати (у цьому прикладі GuestResponse), MVC надасть додаткові можливості, щоб спростити завдання.

Увага

Переконайтеся, що перед роботою ваш проект MVC скомпільований. Якщо ви створили клас Guest Response, але не скомпілювали його, MVC не зможе створити строго типізоване уявлення для даного типу. Щоб скомпілювати програму, виберіть Build Solution у Visual Studio меню Build .

Клацніть правою кнопкою миші всередині методу дії RsvpForm і виберіть для створення представлення Add View зі спливаючого меню. У діалоговому вікні Add View поставте галочку на Create a strongly-typed view і виберіть опцію GuestResponse з меню, що випадає. Зніміть прапорець з Use a layout or master page і переконайтеся, що Razor обраний движком представлення, і що опція Scaffold template встановлена ​​на Empty , як показано на .

Малюнок 2-14:Додавання строго типізованого уявлення

Натисніть кнопку Add і Visual Studio створить новий файлз ім'ям RvspForm.cshtml та відкриє його для редагування. Ви можете побачити початковий зміст. Як ви помітили, це інший HTML файлале він містить Razor вираз @model . Ви зараз побачите, що це є ключем до строго типізованого уявлення та можливостей, які воно пропонує.

Лістинг 2-12:Початковий вміст файлу RsvpForm.cshtml

@model PartyInvites.Models.GuestResponse@( Layout = null; )

Побудова форми

Тепер, коли ми створили строго типізоване уявлення, ми можемо побудувати зміст RsvpForm.cshtml , щоб перетворити його на HTML форму для редагування GuestResponse об'єктів. Змініть уявлення так, щоб воно відповідало .

Лістинг 2-13:Створення уявлення форми

@using (Html.BeginForm()) {

Your name: @Html.TextBoxFor(x => x.Name)

Ваш email: @Html.TextBoxFor(x => x.Email)

Ваш телефон: @Html.TextBoxFor(x => x.Phone)

Will you attend? @Html.DropDownListFor(x => x.WillAttend, new ( New SelectListItem() (Text = "Yes, I"ll be there", Value = bool.TrueString), New SelectListItem() (Text = "No, I can"t come", Value = bool.FalseString) ), "Choose an option")

}

Для кожної властивості класу моделі GuestResponse ми використовуємо допоміжний метод HTML, щоб обробити відповідний HTML елемент керування input . Ці методи дозволяють вибрати властивість, до якого відноситься елемент input , за допомогою лямбда-вираження, наприклад:

@Html.TextBoxFor(x => x.Phone)

Допоміжний метод HTML TextBoxFor генерує HTML для елемента input , встановлює параметр type на text і встановлює атрибути id і name на Phone , ім'я обраного властивості доменного класу, так:

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

Не турбуйтеся, якщо ви не знайомі з лямбда-виразами C#. Ми розповімо про них у розділі 4, але як альтернатива лямбда-виразам ви можете звернутися до імені властивості типу моделі як до рядка, наприклад, ось так:

@Html.TextBox("Email")

Ми вважаємо, що методика лямбда-виражень допомагає нам не робити друкарську помилку в імені властивості типу моделі, тому що спливає Visual Studio IntelliSense і дозволяє нам вибрати властивість автоматично, як показано на .

Малюнок 2-15: Visual Studio IntelliSense для лямбда-виразів у допоміжних методах HTML

Іншим зручним допоміжним методом є Html.BeginForm, який генерує елемент HTML форми, налаштований на зворотну передачу даних методу дії. Оскільки ми не передали допоміжному методу жодних параметрів, він припускає, що ми хочемо передати назад ту саму URL-адресу. Спритним трюком є ​​те, щоб обернути це в C# вираз using , ось таким чином:

Зазвичай, коли воно застосовується таким чином, вираз using гарантує, що об'єкт видаляється, коли виходить з області видимості. Воно широко використовується для підключення до бази даних, наприклад, щоб переконатися, що вона закривається, як тільки запит було виконано. (Це застосування ключового слова using відрізняється від того, що стосується області видимості класу).

Замість видалення об'єкта, помічник HtmlBeginForm закриває HTML елемент form , коли він виходить із області видимості. Це означає, що допоміжний метод Html.BeginForm створює обидві частини елемента form , наприклад:

Не хвилюйтеся, якщо ви не знайомі з видаленням об'єктів C#. Наша мета зараз полягає в тому, щоб показати, як створити форму за допомогою допоміжного методу HTML. Ви можете бачити форму у поданні RsvpForm, коли ви запустите програму і натиснете посилання RSVP Now. На показаний результат.

Малюнок 2-16:Подання RspvForm

Примітка

Це не книга про CSS чи веб дизайн. Здебільшого ми створюватимемо приклади, зовнішній вигляд яких може бути описаний як застарілий (хоча ми віддаємо перевагу терміну класичний, в якому відчуває менше зневаги). MVC подання генерують дуже чистий і простий HTML, і ви можете повністю керувати версткою елементів і класів, до яких вони належать, тому у вас не буде проблем із використанням дизайнерських засобів або готових шаблонів, щоб зробити ваш MVC проект красивим.

Обробка форм

Ми не сказали MVC, що хочемо зробити, коли форма відправляється на сервер. На даний момент натискання кнопки Submit 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.

Лістинг 2-14:Додавання методу дії для підтримки запитів POST

using System; використовуючи System.Collections.Generic; використовуючи System.Linq; using System.Web; using System.Web.Mvc; using PartyInvites.Models; namespace PartyInvites.Controllers ( public class HomeController: Controller ( public ViewResult Index() ( int hour = DateTime.Now.Hour; ViewBag.Greeting = hour< 12 ? "Good Morning" : "Good Afternoon"; return View(); } public ViewResult RsvpForm() ( return View(); ) Public ViewResult RsvpForm(GuestResponse guestResponse) { // TODO: Email response to the party organizer return View("Thanks", guestResponse); } } }

Ми додали атрибут HttpGet для нашого існуючого методу дії RsvpForm. Це говорить MVC, що цей метод повинен використовуватися тільки для запитів GET. Потім ми додали перевантажену версію RsvpForm, який приймає параметр GuestResponse та застосовує атрибут HttpPost. Атрибут каже MVC, що новий методбуде мати справу з запитами POST. Зверніть увагу, що ми також імпортували простір імен PartyInvites.Models – таким чином, ми можемо звернутися до типу моделі GuestResponse без необхідності вказувати ім'я класу. Ми розповімо, як працюють наші доповнення у лістингу, у наступних розділах.

Використання зв'язування даних моделі

Перший варіант перевантаженого методу дії RsvpForm обробляє те ж уявлення, що раніше. Вона генерує форму, показану на . Другий варіант перевантаженого методу є більш цікавим через параметр, але, враховуючи, що метод дії буде викликатися у відповідь на запит HTTP POST, і що GuestResponse є типом класу C #, то як вони об'єднані?

Відповіддю є зв'язування даних моделі– надзвичайно корисна функціональна особливість MVC, коли вхідні дані розбиваються (парся) і пари ключ/значення в HTTP запиті використовуються для заповнення властивостей типу доменної моделі. Цей процес є протилежністю допоміжних методів HTML; це коли при створенні даних форми для відправки клієнту, ми генерували HTML елементи input , де значення атрибутів id і name отримані з назв властивостей класів моделей.

На відміну від цього, із зв'язуванням даних моделі, імена елементів input використовуються для вказівки значень властивостей в екземплярі класу моделі, які потім передаються нашому методу дії з підтримкою POST.

Модель представлення даних є потужною і функцією, що налаштовується, яка позбавляє від рутини роботи безпосередньо з HTTP-запитами і дозволяє нам працювати з C# об'єктами, а не мати справу зі значеннями Request.Form і Request.QueryString . Об'єкт GuestResponse , який передається як параметр нашого методу дії, автоматично заповнюється даними з полів форми. Ми детально розглянемо модель представлення даних, а також у тому числі, як її можна налаштувати, у розділі 22.

Обробка інших уявлень

Другий варіант перевантаженого методу дій RsvpForm також показує, як ми можемо вказати MVC обробляти конкретне подання, а не подання за промовчанням у відповідь на запит. Ось відповідний вираз:

return View("Thanks", guestResponse);

Цей виклик методу View говорить MVC знайти і обробити уявлення, яке називається Thanks , і передати уявленню наш об'єкт GuestResponse . Щоб створити уявлення, яке ми вказали, клацніть правою кнопкою миші всередині одного з методів HomeController і виберіть пункт Add View зі спливаючого меню. Встановіть назву подання на Thanks , як показано на .

Малюнок 2-17:Додавання подання Thanks

Ми збираємося створити ще одне строго типізоване уявлення, тому поставте галочку на цьому пункті в діалоговому вікні Add View. Клас даних, який ми виберемо для цього подання, повинен відповідати класу, який ми передали подання за допомогою методу View. Тому переконайтеся, що у випадаючому меню вибрано GuestResponse . Переконайтеся, що немає галочки на Use a layout or master page , View engine встановлений на Razor, а також Scaffold template встановлений на Empty .

Натисніть кнопку Add , щоб створити нову виставу. Оскільки уявлення пов'язане з контролером Home, MVC створить уявлення як ~/Views/Home/Thanks.cshtml. Змініть нове уявлення так, щоб воно відповідало: ми виділили те, що потрібно додати.

Лістинг 2-15:Подання Thanks

@model PartyInvites.Models.GuestResponse @( Layout = null; )

Подання Thanks використовує Razor для відображення контенту на основі значення властивості GuestResponse, які ми передали методу View у методі дії RsvpForm. Razor оператор @model визначає тип доменної моделі, з яким пов'язане уявлення. Щоб отримати доступ до значення властивості доменного об'єкта, ми використовуємо Model. PropertyName. Наприклад, щоб отримати значення властивості Name ми викликаємо Model.Name . Не турбуйтеся, якщо вам не зрозумілий синтаксис Razor, ми пояснимо це докладно в розділі 5.

Тепер, коли ми створили уявлення Thanks , ми маємо базовий робочий приклад обробки форми за допомогою MVC.

Запустіть програму в Visual Studio, натисніть на посилання RSVP Now , додайте у форму дані та натисніть на кнопку Submit RSVP . Ви побачите результат, показаний на (хоча він може відрізнятися, якщо ваше ім'я не є Джо, і ви сказали, що не зможете бути присутнім).

Малюнок 2-18:Оброблене подання Thanks

Додавання валідації

Зараз ми підійшли до того, щоб додати валідацію до нашої програми. Якби ми цього не зробимо, наші користувачі зможуть запровадити безглузді дані або навіть надіслати порожню форму.

У програмі MVC перевірка, як правило, застосовується до доменної моделі, а не до інтерфейсу користувача. Це означає, що ми визначаємо наші критерії валідації в одному місці, і вони набувають чинності в будь-якому місці класу моделі, що використовується. ASP.NET MVC підтримує правила перевірки, які визначаються атрибутами простору імен System.ComponentModel.DataAnnotations . Як показано, як ці атрибути можуть бути застосовані до класу моделі GuestResponse .

Лістинг 2-16:Застосування валідації до класу моделі GuestResponse

використовуючи System.ComponentModel.DataAnnotations; namespace PartyInvites.Models ( public class GuestResponse ( public string Name (get; set;) public string Email (get; set;) public string Phone ( get; set; ) public bool? WillAttend (get; set;)))

Правила валідації виділені жирним шрифтом. MVC автоматично виявляє атрибути та використовує їх для перевірки даних під час представлення моделі даних. Зверніть увагу, що ми імпортували простір імен, що містить правила валідації, тому ми можемо посилатися на них без необхідності вказувати їхні імена.

Порада

Як зазначалося раніше, ми використали тип bool? для властивості WillAttend, тому ми змогли застосувати атрибут валідації Required. Якби ми використовували звичайний bool, значення, яке ми могли б отримати завдяки моделі представлення даних, могло б бути тільки true або false, і ми не були б сказати, чи вибрав користувач значення. Тип bool? має три можливі значення: true , false і null . Значення nullбуде використано, якщо користувач не вибрав значення і це змушує атрибут Required повідомити про помилку валідації.

Ми можемо перевірити, чи була помилка валідації перевіркою за допомогою властивості ModelState.IsValid у нашому класі контролера. Як показано, як це можна зробити в нашому методі дії RsvpForm з підтримкою POST .

Лістинг 2-17:Перевірка на наявність помилок під час валідації форми

Public ViewResult RsvpForm(GuestResponse guestResponse) ( if (ModelState.IsValid) { // TODO: Email response to party organizer return View("Thanks", guestResponse); } else { // there is a validation error return View(); } }

Якщо помилки валідації немає, ми говоримо MVC обробляти подання Thanks, як ми робили раніше. Якщо помилка валідації є, ми знову обробляємо уявлення RsvpForm, викликавши метод View без параметрів.

Просто відображати форму, коли є помилка, не дуже корисно, ми повинні дати користувачеві деяку інформацію про те, в чому проблема, і чому ми не можемо прийняти його форму. Ми робимо це за допомогою допоміжного методу Html.ValidationSummary у поданні RsvpForm, як показано в .

Лістинг 2-18:Використання допоміжного методу Html.ValidationSummary

@model PartyInvites.Models.GuestResponse @( Layout = null; ) @using (Html.BeginForm()) ( @Html.ValidationSummary()

Your name: @Html.TextBoxFor(x => x.Name)

Ваш email: @Html.TextBoxFor(x => x.Email)

Ваш телефон: @Html.TextBoxFor(x => x.Phone)

Will you attend? @Html.DropDownListFor(x =>

}

Якщо помилок немає, метод Html.ValidationSummary створює прихований елемент списку як заповнювач у формі. MVC робить мітку-заповнювач видимою та додає повідомлення про помилку, що визначаються атрибутами валідації. Ви можете побачити, як це виглядає, на .

Малюнок 2-19:Зведення результатів валідації

Користувачеві не буде показано подання Thanks, доки не будуть задоволені всі правила валідації, які ми застосували до класу GuestResponse. Зверніть увагу, що дані, введені у форму, були збережені та відображаються знову, коли подання показано зі зведенням валідації. Це ще одна перевага зв'язування даних.

Примітка

Якщо ви працювали з ASP.NET Web Forms, ви знаєте, що у Web Forms існує поняття «серверні елементи керування», які зберігають стан, серіалізуючи значення у прихованому полі форми __VIEWSTATE . Зв'язування даних ASP.NET MVC не прив'язано до Web Forms концепції серверних елементівуправління, зворотної передачі або View State. ASP.NET MVC не вводить приховане поле __VIEWSTATE в оброблювані HTML сторінки.

Виділення невалідних полів

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

Якщо властивість класу моделі не пройшла валідацію, допоміжні методи HTML генеруватимуть трохи інший HTML. Як приклад, ось HTML, який генерує виклик Html.TextBoxFor (х => x.Name), коли немає помилки валідації:

А ось HTML, який генерує той же виклик, коли користувач не надав значення (що є помилкою валідації, тому що ми застосували атрибут Required властивості Name у класі моделі GuestResponse):

class="input-validation-error" data-val="true" data-val-required="Виберіть свій назву" id="Name" name="Name" type="text" value="" />

Ми виділили різницю. Це допоміжний метод додав клас з ім'ям input-validation-error. Ми можемо скористатися цією функцією, створивши таблицю стилів CSS, Що містить стилі для цього класу та інших, що застосовують різні допоміжні методи HTML.

Угода MVC проектів полягає в тому, що статичний контент, такий як таблиці стилів CSS, поміщається в папку під назвою Content . Ми створили папку Content, натиснувши правою кнопкою миші за проектом PartyInvites у Solution Explorer і вибравши зі спливаючого меню Add New Folder. Ми створили таблицю стилів, клацнувши правою кнопкою миші по папці Content, вибравши Add New Item і потім вибравши Style Sheet у діалоговому вікні Add New Item. Ми назвали нашу таблицю стилів Site.css і це ім'я, яке Visual Studio використовує при створенні проекту з використанням іншого шаблону MVC, а не Empty. Ви можете переглянути вміст файлу Content/Site.css в.

Лістинг 2-19:Вміст файлу Content/Site.css

.field-validation-error (color: #f00;) .field-validation-valid ( display: none;) .input-validation-error ( border: 1px solid #f00; background-color: #fee; ) .validation- summary-errors ( font-weight: bold; color: #f00;) .validation-summary-valid ( display: none;)

Щоб використовувати цю таблицю стилів, ми додали нове посилання до розділу head представлення RsvpForm , як показано в . Ви додаєте уявленням елементи link так само, як у звичайному статичному HTML-файлі.

Лістинг 2-20:Додавання елемента link до представлення RsvpForm

@model PartyInvites.Models.GuestResponse @( Layout = null; ) @using (Html.BeginForm()) ( @Html.ValidationSummary()

Your name: @Html.TextBoxFor(x => x.Name)

Ваш email: @Html.TextBoxFor(x => x.Email)

Ваш телефон: @Html.TextBoxFor(x => x.Phone)

Will you attend? @Html.DropDownListFor(x => x.WillAttend, new ( new SelectListItem() (Text = "Yes, I"ll be there", Value = bool.TrueString), new SelectListItem() (Text = "No, I can "t come", Value = bool.FalseString) ), "Choose an option")

}

Порада

Якщо ви використовували MVC 3, то могли очікувати, щоб ми додамо CSS файл до подання, вказавши атрибут href як @Href("~/Content/Site.css") або @Url.Content("~/Content/Site.css" ). З MVC 4 Razor автоматично виявляє атрибути, які починаються з ~/ і автоматично вставляє для вас @Href або @Url .

Тепер візуально відображатиметься більш очевидна помилка валідації, якщо були представлені дані, які викликали цю помилку, як показано на .

Малюнок 2-20:Автоматично виділені помилки валідації

Завершуємо приклад

Остання вимога до нашого прикладу програми полягає в тому, щоб відправити імейл із завершеними RSVP нашому другу, організатору вечірки. Ми могли б зробити це, додавши метод дії, щоб створити та надіслати електронною поштою повідомлення, використовуючи e-mail класи.NET Framework. Натомість ми збираємося використовувати допоміжний метод WebMail. Це не входить у рамки MVC, але це дозволить нам завершити даний приклад, не ув'язавши деталі створення інших засобів відправки електронної пошти.

Примітка

Ми використовували допоміжний метод WebMail, тому що він дозволяє нам з мінімальними зусиллями продемонструвати надсилання повідомлень електронної пошти. Однак, у звичайній ситуації ми хотіли б перекласти цю функцію на метод дії. Ми пояснимо, чому, коли описуватимемо архітектурний MVC патерну розділі 3.

Ми хочемо, щоб mail повідомлення було відправлено, коли ми обробляємо подання Thanks . У показані зміни, які ми маємо зробити.

Лістинг 2-21:Використання допоміжного методу WebMail

@model PartyInvites.Models.GuestResponse @( Layout = null; ) @{ try { WebMail.SmtpServer = "smtp.example.com"; WebMail.SmtpPort = 587; WebMail.EnableSsl = true; WebMail.UserName = "mySmtpUsername"; WebMail.Password = "mySmtpPassword"; WebMail.From = " [email protected]"; WebMail.Send(" [email protected]", "RSVP Notification", Model.Name + "is" + ((Model.WillAttend ??false) ? "" : "not") + "attending"); } catch (Exception) { @:Sorry - we couldn't send the email для згоди свого RSVP. } }

Ми додали Razor вираз, який використовує допоміжний метод WebMail для налаштування інформації про наш сервер електронної пошти, включаючи ім'я сервера, чи сервер SSL з'єднання і даних облікового запису. Після того як ми всі налаштували, ми використовуємо метод WebMail.Send для надсилання електронної пошти.

Ми включили весь имейл код у блок try...catch , щоб ми могли попередити користувача, якщо електронна пошта не надійшла. Ми робимо це шляхом додавання текстового блоку до вихідних даних подання Thanks. Краще було б відобразити окреме уявленняпомилки, якщо повідомлення електронної пошти не може бути відправлено, але ми хотіли не ускладнювати нашу першу MVC додаток.

Багато веб-сайтів включають вміст, що є доступним тільки для людей, які мають зайнятися (що є, які повинні бути authenticated). By default, ASP.NET забезпечує веб-сайт проектів проектів, які включають сторінки, що ти можеш сприяти authentication tasks.

The ASP.NET Web project template що це ілюструється в цьому Walkhrough є новий в Visual Studio 2010.

Ця програма показує, що ви використовуєте ASP.NET Web project template для створення веб-сайту з основним функціонуванням.

Tasks illustrated in this walkthrough include:

Creating an ASP.NET Web site.

Creating a members-тільки сторінку. page will be accessible only to authenticated users (users who are logged in).

Використовуючи registration page, які мають доступні користувачі для реєстрації і створення нового рахунку.

Підтримка і доступ до інформації, що є доступним тільки для authenticated users.

Використовуючи change-password page, які мають доступні користувачі, які мають аккаунт до зміни їх password.

Making the change-password page accessible to authenticated users (але тільки to authenticated users).

Prerequisites

In order to complete це walkthrough, you will need:

Microsoft Visual Web Developer 2010 Express або Visual Studio 2010.

SQL Server Expressналаштований локально на вашому комп'ютері. Для отримання інформації про те, як додати SQL Server Express, клацніть на: Connect to the AdventureWorksLT Database використовуючи .MDF File .

Creating a New Web Site Project

Ви запустите створення нового ASP.NET Web site project. Project template, що ви використовуєте багато елементів, які вимагають в ордені для створення сайту, що сприяють authentication.

Це walkthrough uses a Web site project. Ви можете використовувати Web application project instead. Для того, щоб дізнатися про те, що між цими проектами проектів, сторінки Web Application Projects versus Web Site Projects .

ASP.NET Web site

Start Visual Studio або Visual Web Developer.

In the File menu, click New Web Site. (If you do not see this option, click New, and then click Web Site.)

The New Web Site dialog box is displayed.

Under Installed Templates, click Visual Basic or C# and then select ASP.NET Web Site.

In the Web Location box, select File Systemі введіть назву folder, де ви хочете, щоб сторінки веб-сайту. Для прикладу, виберіть folder name C:\Websites\Login and then click OK.

Visual Studio створить folder and opens the Web site in Sourceперегляд. Зауважте, що веб-сайти веб-сайтів містять значні файли і складники, включаючи облікові записи, Web.config file, About.aspx і Default.aspx pages, і Site.master master page.

Home of page of web site displayed in the browser. Notice the menu items ( Home, About) and the Log In hyperlink.

Close the browser.

Creating a Members Only Page

У цьому розділі, ви будете створювати members-тільки сторінку. Тільки користувачі, які були введені в (authenticated users) можуть користуватися цією сторінкою. Ви будете керувати матерою сторінки до реdirect authenticated users до members-only page. Якщо всі користувачі не зареєстровані в (anonymous users), клацніть на members-тільки hyperlink, вони будуть перенаправлені на сторінку, де вони можуть написати або створити аккаунт.

To create the members only page

In Solution Explorer, правий click the Account folder and then click Add New Item.

Make sure that you are creating new page in Account folder.

In the New Web Sites dialog box, select Web Form.

In the Name text box, enter MembersOnly.aspx.

Select the Select master page check box and then click Add.

The Select a Master Page dialog box is displayed.

Under Contents of folders, select Site.master and then click OK.

MembersOnly.aspx сторінка створена в обліковому записі. На сторінці є content page for Site.master page.

In Solution Explorer, double-click the MemberOnly.aspx page to open it, and then switch to Designперегляд.

Додайте content до the main page.

Для прикладу, ви можете додати "Вікно до членів-тільки сторінок. Ви були успішно зареєстровані в."

У додатку до сторінки, що ви створили, акаунт folder contains following pages and files:

Register.aspx. Ця сторінка повідомлень новим користувачам створюється аккаунтом.

Login.aspx page. Це означає для user name і password.

ChangePassword.aspx. Ця сторінка реєструє користувачів, які змінюють свій word.

ChangePasswordSuccess.aspx. Ця сторінка відображається, коли користувачі успішно змінюють своє слово.

A Web.config файл.

Залежно від того, сторінки в облікових записах не можуть бути використані для anonymous users, except the page. Установки, які встановлюють доступ до сторінок в обліковому записі користувача, що configured в файлі Web.config, в який folder. Установи, які встановлюють доступ до Login page configured in root Web.config file.

In the Properties windows, змінити Text property to Change Password. Ви можете припустити default ID.

In the Properties window, click NavigateUrl and click the ellipsis ( ... ) button.

The Select URL dialog box is displayed.

Under Project folders, click Account.

Under Contents of folder OK.

Натисніть CTRL+F5 до сторінки.

Notice that the Change Password link is accessible when you are not logged in.

Click Change Password.

Ви перенаправлені на сторінку because the change-password page accessible to authenticated users only.

Enter the user name and password that you created earlier, and then click Log In.

Click Log Out.

Якщо ви будете відновити на сторінці сайту, за допомогою браузера.

Next, you will modify the Change Password hyperlink to make it accessible тільки для користувачів, які були введені в. Ви знайдете hyperlink на headLoginView control на master page.

Щоб здійснити обмін повідомленнями link available only to logged-in users

In Solution Explorer, double-click Site.master.aspx to Open it, and then switch to Designперегляд.

Delete the Change Password hyperlink that you created earlier.

Switch to Sourceперегляд.

Від Standard node of the Toolbox, drag control в LoggedInTemplate element that is inside LoginView control.

Set the Text property to Change Password.

After the runat="server" attribute, типу "NavigateUrl=" and then double-click Pick URL…з pop-up list.

The Select Project Item dialog box is displayed.

Under Project folders, click Account.

Under Contents folder, виберіть ChangePassword.aspx and then click OK.

Markup for hyperlink will resemble the following:

Change Password

Note that this hyperlink will not be visible in Design view, because the contents of the LoggedInTemplate element not visible by default.

Testing the Web Site

Ви можете вивчити функцію зміни-word функцій веб-сайту.

Для того щоб змінити password page

Натисніть CTRL+F5 для роботи в мережі.

Home page is displayed, але the Change your password link is not visible.

Click Log In and enter your user name and password.

Ви перенаправляєтеся на домашню сторінку. Notice that your name і the Змінити свій password link are now visible.

Click Members Only.

Ви будете переглянуті до членів-тольки сторінок.

Click Змінити свій password.

Кнопка-відповідь page is displayed.

Enter a new password.

Click Change Password. Якщо зміна є успішною, успіх сторінка буде розгорнута.

Testing the New Password

Next you буде використовувати ваш новий password до Login again and access the members-only page.

Для того, щоб виконати новий password

Click Log Out. Ви будете відреагувати на домашню сторінку, що anonymous users see.

Click Log In.

Enter your user name and the new password and then click Log In.

Ви перенаправляєтеся на домашню сторінку. Ви можете використовувати новий вміст, що є доступним до authenticated users. .

Click Members Only.

Ви будете переглянуті до членів-тольки сторінок. Якщо ви намагаєтеся зателефонувати з вашим новим словом authentication буде погано.

Close the browser.

Next Steps

У цій Walkhrough, ви використовуєте сторінки, що є частиною ASP.NET Web site project template in order to create a Web site that authenticates users. Якщо ви впевнені, ви можете також створити свої власні посилання сторінок, які забезпечують функціонування тієї самої, що ілюструється в Walkhrough. For more information, see .

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

Якщо ви вже працюєте з PHP або Java (або навіть .NET), або просто хочете зрозуміти, як створювати веб-застосунки, то я б рекомендував вам задуматися про ASP.NET .

1. Відсутність System.Web

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

2. Нова покращена модель 2016 року

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.

8. Незалежність від Visual Studio

Чи не з першої згадки про вихід оновленого .NET/ASP.NET , всілякі розробники ( включаючи Microsoft) зайнялися створенням власних IDE , які розкривають можливості нової версії.NET. Такі IDE (Visual Studio Code або Rider на #C від JetBrains) дозволяють розробляти власні ASP.NET та C# проекти без Visual Studio. Тепер не так важливо, яке середовище використовує розробник, адже клієнтам просто потрібний готовий сайт!

9. Адекватне співтовариство

ASP.NET MVC для початківців та для більшості веб-розробників як ковток свіжого повітря. Цей інструмент переносить нас у нову еру, далеку від WebForms. Значна частина розробників вже перейшла на MVC.

10. Модульне тестування

Крім цього, ASP.NET MVC надає можливість модульного тестування. Це значною мірою полегшує тестування. Для деяких розробників WebForm це здасться принципово новим концептом, оскільки до цього тестування деяких інтерфейсів та бізнес-компонентів створювало величезні проблеми. В ASP.NET MVC можна легко протестувати всі компоненти і переконатися в повній працездатності програми.

На завершення

Сподіваюся, що сьогодні ви отримали достатньо інформації про якості ASP.NET MVC, заради яких варто перейти на цей інструмент.

Переклад статті “ 10 Reasons To Start Using ASP.NET MVC” був підготовлений дружною командою проекту.

Добре погано

Останнє оновлення: 31.10.2015

ASP.NET MVC є платформою для створення сайтів і веб-додатків з використанням патерна (або шаблону) MVC (model - view - controller).

Робота над новою платформою була розпочата у 2007 році, а у 2009 році з'явилася перша версія. У підсумку до поточного моменту (2012 рік) вже було випущено 4 версії платформи, а сам фреймворк набув великої популярності по всьому світу завдяки своїй гнучкості та адаптивності.

Шаблон MVC, що лежить в основі нової платформи, має на увазі взаємодію трьох компонентів: контролера (controller), моделі (model) та уявлення (view). Що ж уявляють ці компоненти?

Контролер (controller) представляє клас, з якого власне і починається робота програми. Цей клас забезпечує зв'язок між моделлю та поданням. Отримуючи дані, що вводяться користувачем, контролер виходячи з внутрішньої логіки при необхідності звертається до моделі і генерує відповідне уявлення.

Подання (view) - це власне візуальна частина або користувальницький інтерфейсПрограми - наприклад, html-сторінка, через яку користувач, що зайшов на сайт, взаємодіє з веб-додатком.

Модель (model) представляє набір класів, що описують логіку даних, що використовуються.

Загальну схему взаємодії спрощено можна наступним чином:

ASP.NET MVC та ASP.NET Web Forms

ASP.NET MVC є певною мірою конкурентом для традиційних веб-форм і має в порівнянні з ними наступні переваги:

Поділ відповідальності. У MVC додаток складається з трьох частин: контролера, уявлення та моделі, кожна з яких виконує свої специфічні функції. У результаті програма буде легше підтримувати модифікувати в майбутньому.

В силу поділу відповідальності додатки mvc мають кращою тестованістю. І ми можемо тестувати окремі компоненти незалежно один від одного.

Відповідність протоколу HTTP . Програми MVC на відміну від веб-форм не підтримують об'єкти стану (ViewState). Ясність і простота платформи дозволяють досягти більшого контролюнад роботою програми

Гнучкість. Ви можете налаштувати різні компоненти платформи на власний розсуд. Змінювати будь-які частини конвеєра роботи MVC або адаптувати його до своїх потреб та потреб.

Водночас не варто однозначно скидати з рахунків ASP.NET WebForms. Оскільки вона також має свої сильні сторони, наприклад, модель подій, яка буде ближчою до тих розробників, які раніше займалися створенням клієнтських додатків.

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

У будь-якому випадку ви вільні вибирати ту платформу, яка доводиться вам більше до вподоби. І якщо у вас написані об'ємні проекти із застосуванням традиційних веб-форм, можливо варто продовжувати з ними працювати. Тим більше, що ASP.NET Web Forms ще не вмирає і продовжує розвиватися.