Дані для моделей за замовчуванням
Ми можемо вже зараз запустити наш додаток, однак крім рядка з заголовками в таблиці ми нічого не побачимо, тому що у нас ще немає даних. Тут ми могли підійти двома способами: або додати в базу даних MSSQL деякі дані, або ініціалізувати початкові дані для моделей в коді. Виберемо другий варіант. Для цього в папку Models додамо новий клас CreditsDbInitializer і додамо в нього наступний код:
За допомогою даного класу ми створюємо три об'єкти Credit і додаємо їх в базу даних. Щоб цей клас заробив, нам треба не тільки його оголосити, але і запустити. Всі початкові налаштування і конфігурації у нас зберігаються у файлі Global.asax. Відкриємо його і додамо в нього в метод Application_Start, який відпрацьовує при старті програми, наступний рядок :
Database.SetInitializer(new CreditsDbInitializer());
Ну і звичайно, імпортуємо у файлі Global.asax простір імен System.Data.Entity і MvcCreditApp.Models, інакше клас CreditsDbInitializer буде недоступний.
Все, тепер, якщо ми запустимо додаток, то побачимо, що в таблиці містяться раніше визначені нами дані:
Так, наша таблиця виглядає неважно, не завадило б застосувати до неї стилі, але не зараз. Зараз нам треба створити метод CreateBid, який відповідатиме за обробку введення користувача при подачі заявки. Додамо в контролер HomeController наступні два методи:
По суті тут ми визначили одну дію CreateBid, проте в одному випадку вонa виконується при отриманні запиту GET, а в другому випадку - при отриманні запиту POST, що ми і визначили за допомогою атрибутів [HttpGet] і [HttpPost]. Метод public ActionResult CreateBid ( ) дуже простий - він просто повертає відповідне представлення.
Метод public string CreateBid (Bid newBid) виглядає дещо складніше. Він приймає передану йому в запиті POST модель newBid і додаємо її в базу даних. Наприкінці ми повертаємо рядок повідомлення.
І врешті додамо представлення CreateBid. Для цього натиснемо на метод public ActionResult CreateBid ( ) правою кнопкою і додамо в проект нове представлення. Змінимо код нового представлення наступним чином:
Тут ми створили форму введення даних. При переході за посиланням "/Home/ CreateBid " контролер буде отримувати запит до дії CreateBid. І так як такий запит являє тип GET, користувачеві буде повертатися форма. Після заповнення форми і натиснення на кнопку форма буде запитом POST, так як ми його визначили в рядку <form method="post" action="">. Контролер знову отримуватиме запит до методу CreateBid, тільки тепер буде вибиратися для обробки запиту метод public string CreateBid (Bid newBid).
Яким чином система MVC знає, що ми передали із запитом post інформацію про модель? Зверніть увагу на поля введення <input type="text" name="Name" /> і <input type="text" name="CreditHead" /> . Їх властивості name відповідають іменам властивостей моделі Bid . При натисканні кнопки і відправлення запиту передаються значення цих полів. Система MVC , використовуючи угоди за замовчуванням , вважає ці значення значеннями відповідних властивостей моделі .
Тепер перший додаток готовий, і ми можемо його запустити. Перейдіть на сторінку форми заявки, заповніть поля і натисніть кнопку "Відправити".
Після цього ваша заявка потрапить в базу даних, а в браузері відобразиться відповідне повідомлення.
Стилізація додатки
Тепер в нашому додатку не вистачає однієї деталі - стилізації. Зробимо якусь простеньку стилізацію. Для цього нам треба визначити файл стилів для нашого застосування. Всі файли стилів прийнято зберігати в папці Content , тому спочатку додамо в проект папку Content. Для цього натиснемо на назві проекту правою кнопкою миші і в меню виберемо Add (Додати ) -> New Folder (Нова папка).
Тепер в нову папку додамо файл стилів. Назвемо його Site.css. Для цього натиснемо правою кнопкою миші на папку Content і в меню виберемо Add (Додати ) -> New Item (Новий елемент). Потім в списку шаблонів знайдемо шаблон Style Sheet і дамо новому файлу ім'я Site.css.
Тепер додамо в файл Site.css такий зміст:
body
{
font-size: .85em;
font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif;
}
header,
footer,
nav,
section {
display: block;
}
.menu
{
background-color:black;
height: 20px;
}
.menu ul
{
list-style:none;
}
.menu li
{
display:inline;
}
.menu a
{
text-decoration:none;
color:White;
width:150px;
padding-top: 6px;
padding-left:30px;
}
.menu a:hover
{
color:red;
}
table
{
border:1px solid silver;
vertical-align:middle;
text-align:center;
}
td
{
border:1px solid silver;
}
Клас .menu в даному випадку буде служити як клас для навігаційного меню на сайті.
Тепер ми можемо використовувати стилі. Оскільки наші представлення по суті звичайні веб -сторінки, ми можемо як і на будь-якій сторінці html додати в секції head посилання на файл стилів:
<head>
<meta name="viewport" content="width=device-width" />
<link type="text/css" rel="stylesheet" href="../../Content/Site.css" />
<title>Index</title>
</head>
Якщо в додатку одне представлення, або якщо різні представлення використовують різні стилі та інші ресурси, то такий підхід виправданий. Однак у нашому випадку у нас є два представлення, у яких має бути одне меню і які повинні бути однаково стилізовані. У цьому випадку дуже зручно використовувати майстер -сторінки. Майстер - сторінка задає якийсь єдиний шаблон для інших використовуваних його представлень.
Отже, створимо майстер- сторінку. По суті це просте представлення. Спочатку додамо в папку Views проекту нову папку Shared. Після цього в папку Shared додамо нове представлення. Назвемо його _Layout.cshtml :
Додамо в файл _Layout.cshtml наступний текст:
Тут ми використовували інший спосіб підключення стилів - ми використовували метод Url.Content, в який передали шлях до файлу. Обидва способи - і цей, і використаний раніше рівноправні.
Потім ми створили меню сайту за допомогою методів Html.ActionLink, який генерує елемент - посилання і приймає назву посилання, метод контролера і ім'я контролера. Наприкінці йде метод RenderBody ( ) , при виклику ресурсу в цю частину майстер -сторінки і будуть підставлятися вміст інших представлень .
Тепер адаптуємо представлення до використання їх майстер- сторінкою. Змінимо представлення Index.cshtml наступним чином:
Також змінимо представлення CreateBid.cshtml :
Сутність змін полягає в тому, що в секції Layout = " ~ / Views / Shared / _Layout.cshtml"; ми вказуємо шлях до майстер -сторінці. Після цього нам не потрібні секції head і body. Запустивши додаток, ми побачимо, що тепер до нашого сайту застосована стилізація:
На цьому робота над додатком закінчена, і тепер ми можемо перейти до більш детального обговорення різних компонентів додатка MVC.