Основи ASP .NET MVC

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

ASP.NET MVC Overview (C#)

В цьому фреймворку існують такі компоненти: Модель (Model) Представлення (View) Контролер (Controller). Ідея полягає в тому, що представлення тільки відображає дані, коли модель являє структуру і правила для даних (напр. дата покупки не може бути більшою ніж 2000 рік), а контролер отримує вказівні дії від користувача, реагує на них, дістає дані і відправляє їх для відображення.

Детальніше про сам паттерн MVC можете почитати ось тут.

Почнемо з самого простого – створіть проект, який має шаблон ASP .NET MVC Web Application:

1.1

Мал 1.1

Після цього з’явиться діалогове вікно, в якому виберіть Internet Application з опціями “View engine”: Razor та з поставленою галочкою на “Use HTML 5 semantic markup”:

1.2

Мал 1.2

Оглянемо структуру проекту:

1.3

Мал 1.3

Тут видно, що створилось багато папок, але основними є Models, Views, Controllers.

Натисніть праву кнопку на папку Controllers та виберіть Add->Controller:

1.4

Мал 1.4

1.5

Мал 1.5

Створиться файл, який буде мати такий вміст:

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace Sample.Controllers { public class DefaultController : Controller { // // GET: /Default/ public ActionResult Index() { return View(); } } }

Один метод, який ви побачили називається Index та повертає екземпляр класу ActionResult. Цей метод повертає виклик методу View. З першого погляду напевно важко зрозуміти що це означає, тому попробую розжувати.

Кожен метод може робити якусь дію, яку якось потрібно запустити. В прикладі наведеному вище метод називається Index, який викликати можна за допомогою звичайного посилання http://localhost:port/Default/ де Default назва контролера.

Поставте в методі Index точку паузи програми (Breakpoint), натисніть F5 в браузері, який запустився та добавте /Default/:

1.6

Мал 1.6

1.7

Мал 1.7

Після продовження програми ви отримаєте таку помилку:

1.8

Мал 1.8

Ця помилка говорить про те, що відображення даних не знайдено, тому потрібно його добавити.

В редакторі коду, в методі Index натисніть праву кнопку миші та виберіть “Add View”:

1.9

Мал 1.9

Натисніть Add і перейдіть в папку Views, де з’явилась папка Default з файлом Index:

1.10

Мал 1.10

Відкрийте цей файл, та добавте ось таке:

@{ ViewBag.Title = "Index"; } <h1>Hello from Index View</h1>

Запустіть сайт та знову перейдіть за посиланням /Default/:

1.11

Мал 1.11

Як видно, помилки вже немає.

Ми використали вже два компоненти – Controller та View. Залишилось ще один – Model:

Створіть новий клас в папці Models та назвіть його Customer:

namespace Sample.Models { public class Customer { public string FirstName { get; set; } public string LastName { get; set; } } }

Тепер, коли модель створена, спробуємо її використати. Відкрийте файл DefaultController.cs та редагуйте код в методі Index:

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using Sample.Models; namespace Sample.Controllers { public class DefaultController : Controller { // // GET: /Default/ public ActionResult Index() { Customer customer = new Customer() { FirstName = "John", LastName = "Frez" }; return View(customer); } } }

В контексті методу натисніть праву кнопку та виберіть опцію “Go To View”. Коли відкриється файл з представленням даних, добавте з самого початку ось таку стрічку коду:

@model Sample.Models.Customer

Після неї добавте наступні HTML теги:

<h1>Hello from Index View</h1> Customer Name: @Model.FirstName @Model.LastName

Натисніть F5 та введіть посилання /Default/:

1.12

Мал 1.12

З цього коду має бути зрозуміло, що представлення даних орієнтовано на екземпляр класу Customer, який приходить з контролера.

Підсумок

В цій статті ви ознайомились з базовими принципами побудови сайтів за допомогою технології ASP .NET MVC. Було представлено три компоненти: Model (модель даних) View (представлення даних) Controller (маніпуляція вхідними командами від користувача, отримання даних). Для подальшого навчання, рекомендую ознайомитись з навчальним курсом від Microsoft.

Всього найкращого Smile.

Скачати приклад коду

Advertisements

, , ,

  1. Відправка даних у форматі JSON за допомогою ASP .NET MVC « Blog by Serhiy Shumakov
  2. Відправка даних у форматі JSON за допомогою ASP .NET MVC « Blog by Serhiy Shumakov

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: