ASP.NET MVC: Історія одного проекту "Готуємося до старту" (частина 1)

зміст
Історична довідка
Інструменти
початок
Вибір jQuery UI
На скільки свіжий ти, друже?
Тепер трохи корисних утиліт
POCO класи або де ж модель?
Все заради даних
Підсумки цієї статті

ru-RU | створено: 25.04.2012 | опубліковано: 25.04.2012 | оновлено: 02.01.2018 | переглядів за весь час: 442128

Цією статтею я хочу почати цикл, який буде розповідати про те, як зробити свій сайт на ASP.NET MVC 3. Розробка торкнеться всі основні етапи від проектування до публікації.

зміст

ASP.NET MVC: Історія одного проекту "Готуємося до старту" (частина 1)
ASP.NET MVC: Історія одного проекту "Все заради даних" (частина 2)
ASP.NET MVC: Історія одного проекту "Шаблони і зовнішній вигляд" (частина 3)
ASP.NET MVC: Історія одного проекту "Ще трохи класів" (частина 4)
ASP.NET MVC: Історія одного проекту "UI - все для користувача" (частина 5)
ASP.NET MVC: Історія одного проекту "UI - Додавання експоната" (частина 6)
ASP.NET MVC: Історія одного проекту "UI - Редагування експоната" (частина 7)
ASP.NET MVC: Історія одного проекту "Обробка помилок" (частина 8)
ASP.NET MVC: Історія одного проекту "Фільтрація" (частина 9)
ASP.NET MVC: Історія одного проекту "Пошук" (частина 10)
ASP.NET MVC: Історія одного проекту "Хмара тегів" (частина 11)
ASP.NET MVC: Історія одного проекту "Головна сторінка" (частина 12)

Історична довідка

У стародавні часи, коли NET Framework стояв у своїх витоків, а я писав код виключно на Pascal'e ... Хм ... здається, так занадто довго виходить, тому спрощу схему опису. Коли починався сайт www.calabonga.com він був простим до неподобства. Згодом довелося його використовувати як тестову площадку для реалізації ідей можна застосувати на інших сайту виготовляються на замовлення. Через деякий кількості років сайт з гумором перетворився на смітник (до недавнього часу таку назву і красувалося в заголовку). Прийшов час переробити сайт, причому використовую нововведення в сфері розробки під web і зокрема ASP.NET MVC. Я буду використовувати ASP.NET 3 бо не хочеться зв'язуватися з ASP.NET 4 Beta в силу знову ж beta параметра в версії. Просто скажу, що в проекті, який працюю на роботі, занадто багато недоліків і недоробок в цій версії.

Інструменти

Отже, якщо вже пішла розмова про інспользуемие інструменти, перерахую їх:

Visual Studio 2010 Ultimate
Nuget Manager
ASP.NET MVC 3
MvcScaffolding
EntityFramework 4.3.1 Code First
Unity for MVC

Хочу зауважити, що даний список до завершення проекту буде не один раз змінений. Все остальноу буду робити по ходу.

початок

Створюю новий проект під назвою Calabonga.Mvc.Humor в параметрах MVC вибираю Internet Application і движок Razor.

Запускаю ... компілює ... Працює ... Краса.

Вибір jQuery UI

Вибрав колірну схему на сайті www.jqueryui.com щоб простіше було в подальшому керувати дизайном. Вибрав таку колірну гаму:

Підключу її трохи пізніше, коли буде потрібно.

На скільки свіжий ти, друже?

Перед тим як приступити до розробки класів для мого нового оновлюваного сайту, спочатку оновлю все nuget-пакети. Для цього в в панелі nuget-менеджера введу комманду:

PM> update-package

Виконання команди поновлення можна бачити на балці консолі:

PM> Update-Package Updating 'Modernizr' from version '1.7' to '2.5.3' in project 'Calabonga.Mvc.Humor'. Successfully removed 'Modernizr 1.7' from Calabonga.Mvc.Humor. Successfully installed 'Modernizr 2.5.3'. Successfully added 'Modernizr 2.5.3' to Calabonga.Mvc.Humor. Successfully uninstalled 'Modernizr 1.7'. Updating 'jQuery.vsdoc' from version '1.5.1' to '1.6' in project 'Calabonga.Mvc.Humor'. Successfully removed 'jQuery.vsdoc 1.5.1' from Calabonga.Mvc.Humor. Successfully removed 'jQuery.UI.Combined 1.8.11' from Calabonga.Mvc.Humor. Successfully installed 'jQuery.UI.Combined 1.8.19'. Successfully added 'jQuery.UI.Combined 1.8.19' to Calabonga.Mvc.Humor. Successfully removed 'jQuery.Validation 1.8.0' from Calabonga.Mvc.Humor. Successfully installed 'jQuery.Validation 1.8.1'. Successfully added 'jQuery.Validation 1.8.1' to Calabonga.Mvc.Humor. Successfully removed 'jQuery 1.5.1' from Calabonga.Mvc.Humor. Successfully installed 'jQuery 1.7.2'. Successfully added 'jQuery 1.7.2' to Calabonga.Mvc.Humor. IntelliSense JS files are not supported by your version of VS: 10.0 Successfully installed 'jQuery.vsdoc 1.6'. Successfully added 'jQuery.vsdoc 1.6' to Calabonga.Mvc.Humor. Successfully uninstalled 'jQuery.vsdoc 1.5.1'. Successfully uninstalled 'jQuery.UI.Combined 1.8.11'. Successfully uninstalled 'jQuery.Validation 1.8.0'. Successfully uninstalled 'jQuery 1.5.1'. Updating 'jQuery.Validation' from version '1.8.1' to '1.9' in project 'Calabonga.Mvc.Humor'. Successfully removed 'jQuery.Validation 1.8.1' from Calabonga.Mvc.Humor. Successfully installed 'jQuery.Validation 1.9'. Successfully added 'jQuery.Validation 1.9' to Calabonga.Mvc.Humor. Successfully uninstalled 'jQuery.Validation 1.8.1'. No updates available for 'jQuery.UI.Combined' in project 'Calabonga.Mvc.Humor'. No updates available for 'jQuery' in project 'Calabonga.Mvc.Humor'. Updating 'EntityFramework' from version '4.1.10331.0' to '4.3.1' in project 'Calabonga.Mvc.Humor'. Successfully removed 'EntityFramework 4.1.10331.0' from Calabonga.Mvc.Humor. You are downloading EntityFramework from Microsoft, the license agreement to which is available at http://go.microsoft.com/fwlink/?LinkId=242868. Check the package for additional dependencies, which may come with their own license agreement (s). Your use of the package and dependencies constitutes your acceptance of their license agreements. If you do not accept the license agreement (s), then delete the relevant components from your device. Successfully installed 'EntityFramework 4.3.1'. Successfully added 'EntityFramework 4.3.1' to Calabonga.Mvc.Humor. Successfully uninstalled 'EntityFramework 4.1.10331.0'. PM>

Тепер трохи корисних утиліт

Я додам пару пакетів. Один пакет називається MvcTools, другий - PagerListExt. встановлюю:

PM> Install-Package MvcTools Attempting to resolve dependency 'XmlExport (? 0.2.1)'. Successfully installed 'XmlExport 0.2.1'. Successfully installed 'MvcTools 1.3.0'. Successfully added 'XmlExport 0.2.1' to Calabonga.Mvc.Humor. Successfully added 'MvcTools 1.3.0' to Calabonga.Mvc.Humor. PM> Install-Package PagedListExt Successfully installed 'PagedListExt 0.5.1'. Successfully added 'PagedListExt 0.5.1' to Calabonga.Mvc.Humor. PM>

Що це за пакети, і для чого вони потрібні, я постараюся докладно розповісти в ходячи процесу розробки сайту "Музей гумору". Отже, після поновлення і установки додаткових nuget-пакетів мій структура мого проекти виглядає наступним чином:

Наведемо порядок. Для цього треба видалити старий файл шаблону _Layout.cshtml, а новий прописати на використання за замовчуванням в файлі _ViewStart.cshtml:

@ {Layout = "~ / Views / Shared / _LayoutExtended.cshtml"; }

Перед тим як запустити проект на компіляцію, треба у файлі _LayoutExtended.cshtml поправити версії файлів скриптів і каскадних таблиць відповідно до поновлення отриманими в результаті роботи команди Update-Package. У мене на момент написання статті версії вийшли такі:

@ Content.Scripts ( "jquery-1.7.2.min.js", Url) @ Content.Scripts ( "jquery.unobtrusive-ajax.min.js", Url) @ Content.Scripts ( "modernizr-2.5.3. js ", Url) @ Content.Scripts (" jquery-ui-1.8.19.custom.min.js ", Url) @RenderSection (" scripts ", false) @ Html.WriteScriptBlocks ()

Зверніть увагу на рядок коду, який підключає скрипт від jquery-ui-1.8.19.custom.min.js (jQuery UI), слід додати в проект файл цього скрипта. Та й каскад стилі теж в папку / content / theme. Як я вже згадував, дизайном я займуся пізніше, а скрипти і css-файли треба все-таки додати в проект - заважати не будуть. Запускаю проект ... Головна сторінка здалася - вже добре! Клікаю на LogIn - отримую помилку, що jQuery не найден. На щастя, я знаю чому так вийшло тому повідаю і вам. Треба обернути на сторінці (View) Login.cshtml скрипти в спеціальний тег, який з'явився після установки MvcTools.

замість:

Повинно бути:

@section scripts {@ Content.Scripts ( "jquery.validate.min.js", Url) @ Content.Scripts ( "jquery.validate.unobtrusive.min.js", Url)}

Чому і навіщо так зроблено, можна подивитися в сгенерірумом HTML-коді після запуску сайту. Тепер всі скрипти поміщаються після основного HTML перед самим закриває тегом </ body>. А значить, що скрипти не почнуть своє виконання до того як буде завантажений документ (DOM). Детально про це в статті на цю тему (якщо кому буде цікаво).

POCO класи або де ж модель?

Якщо мова йде про Code First, що вже означає "спочатку код", то треба вже подумати про моделях (класи) які будуть використані в додатку. Я пишу сайт, який називається "музей гумору", звідси і назва класів:

/// <summary> /// Зал музею, в музеї ж є зали, де розташовуються різні експонати /// </ summary> public class Hall {public int Id {get; set; } Public string Name {get; set; }} /// <summary> /// Експонат музею /// </ summary> public class Exhibit {public int Id {get; set; } Public DateTime CreatedAt {get; set; } Public DateTime UpdatedAt {get; set; } Public string Title {get; set; } Public string Content {get; set; } Public int TotalViewCount {get; set; } Public int PeridViewCount {get; set; }}

Два останніх властивості в класі екпоната потрібні для статистики переглядів за період і за весь час. Додамо кілька властивостей для навігації ( navigation properties ). У класі Hall:

public virtual ICollection <Exhibit> Exhibits {get; set; }

І ще парочку в класі Exhibit:

public virtual Hall Hall {get; set; } Public int HallId {get; set; }

Тепер трохи аттрибутов на властивості і буде готова перша версія моделі бази даних. Для цього треба додати namespace System.ComponentModel.DataAnnotations в список використовуваних. Ось так тепер виглядають класи:

/// <summary> /// Зал музею, в музеї ж є зали, де розташовуються різні експонати /// </ summary> public class Hall {/// <summary> /// Іденіфікатор /// </ summary> [Key] public int Id {get; set; } /// <summary> /// Найменування залу /// </ summary> [Display (Name = "Найменування залу")] [Required (ErrorMessage = "Найменування залу - обов'язково поле")] [StringLength (50, ErrorMessage = "Найменування залу не може довше 50 символів")] public string Name {get; set; } /// <summary> /// Колекція експонатів /// </ summary> [Display (Name = "Колекція експонатів")] public virtual ICollection <Exhibit> Exhibits {get; set; }} /// <summary> /// Експонат музею /// </ summary> public class Exhibit {/// <summary> /// Ідентифікатор /// </ summary> [Key] [Display (Name = " ідентифікатор ")] public int Id {get; set; } /// <summary> /// Дата публікації /// </ summary> [Display (Name = "Дата публікації")] [Required (ErrorMessage = "Дата публікації - обов'язково поле")] [DataType (DataType.Date )] public DateTime CreatedAt {get; set; } /// <summary> /// Дата поновлення /// </ summary> [Display (Name = "Дата поновлення")] [DataType (DataType.Date)] public DateTime UpdatedAt {get; set; } /// <summary> /// Тема /// </ summary> [Display (Name = "Тема")] [Required (ErrorMessage = "Тема - обов'язково поле")] [StringLength (255, ErrorMessage = "Тема не може довше 255 символів ")] public string Title {get; set; } /// <summary> /// Зміст /// </ summary> [Display (Name = "Зміст")] [Required (ErrorMessage = "Зміст - обов'язково поле")] [DataType (DataType.MultilineText)] public string Content {get; set; } /// <summary> /// Загальна кількість переглядів /// </ summary> [Display (Name = "Загальна кількість переглядів")] public int TotalViewCount {get; set; } /// <summary> /// Загальна кількість переглядів за період /// </ summary> [Display (Name = "Загальна кількість переглядів за перід")] public int PeridViewCount {get; set; } [ForeignKey ( "Hall")] [Required (ErrorMessage = "Зал - обов'язкове поле")] [Display (Name = "Зал")] public int HallId {get; set; } Public virtual Hall Hall {get; set; }}

Все заради даних

Прийшов час підключитися до бази даних. Для початку трохи поясню. Справа в тому, що у мене на етапі розробки буде два підключення до бази даних. Тобто в web.config буде вказано два рядки підключення. Перше буде працювати з призначеної для користувача базою, друге - вже непостредственно з класами моделі. Виникає питання - "Навіщо"? Навіть з урахуванням того, що в EntityFramework версії 4.3 появилсь така чудова штука як Migrations . Завжди настає такий момент в процесі розробки, коли базу даних простіше видалити, ніж писати для неї міграції. Так ось щоб не видаляти при цьому користувачів, я буду зберігати моделі і користувачі в різних базах.

Створимо базу даних з користувачами. Відкриваємо Microsoft SQL Mamagment Studio і створюю нову базу даних. Назва їй - museum.

Готово! Тепер треба б ініціювати таблиці ASP.NET Membership для новоствореної бази. У наборі збірок NET Framework є дуже багато корисних утиліт. Одна з них aspnet_regsql.exe. У мене ця утиліта лежить в папці:

C: \ Windows \ Microsoft.NET \ Framework64 \ v4.0.30319 / aspnet_regsql.exe

Зверніть увагу на те, що папка Framework64 говорить про 64-разрадной системі, якщо у вас 32-розрядної версії Windows, то цифр взагалі не буде в назві папки з Framework'ом.

Запускаємо утиліту. Бачимо вікно, натискаємо далі, потрапляємо на сторінку вибору дії: "Додаємо" або "Видаляємо". Нам треба, звичайно ж, додати. Натискаємо далі.

Тепер вибираючи SQL сервер і назва бази даних.

Натискаємо далі і фініш. І перед тим, як почати додавання користувача, треба вказати у файлі web.config рядок підключення до бази даних. Моя рядок підключення вигядіт так:

Тепер є база треба закинути туди трошки користувачів. Повертаємося в студію і запускаємо конфигуратор сайту (Web Site Administration Tool).

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

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

Далі по пунктах:

1. Включаємо ролі на сайті.

2. Додаємо одну роль "Administrator".

3. Створюємо користувача, не забуваємо вказати галку "Administrator" справа.

4. Дивимося на кількість доданих - правильно, тепер там є один користувач з правами адміністратора.

Підсумки цієї статті

У нас практично все готово, щоб почати розробку сайту. У нас є:

Шаблон сайту (нехай поки стандартний)
База користувачів (нехай поки тільки один)
Підключені ролі на сайті (та, знову ж таки тільки одна)
Первинна модель даних (буде багато ще різних додано пізніше)
Чи готові утиліти по розподілу скриптів (в тому числі і в так званих UserControl)
Оновлені всі вхідні в проект сторонні фреймворки.

продовження в наступній статті , В якій я покажу як підключити Entity Framework (EF) і як почати створювати сайт. Будуть створені перші уявлення (views) і контролери (Controller). Пишіть коментарі.

На скільки свіжий ти, друже?
Com/fwlink/?
POCO класи або де ж модель?
Виникає питання - "Навіщо"?

Статьи