Макет (Основи MasterPage)

Дуже важливо мати однаковий вигляд на всіх сторінках вашого веб-сайту або програми. ASP.NET 2.0 представив концепцію " майстер сторінок", які можуть допомогти добитися цього результату, коли використовуємо.аspx сторінки або шаблони. Razor так само підтримує дану концепцію, використовуючи " layout pages" (сторінки макета), які дозволяють вам визначати дизайн сайту, а далі успадковувати від нього подання / сторінки.

Найпростіший приклад макета

Нижче представлений простий приклад сторінки макета, яке ми збережемо під назвою " SiteLayout.cshtml". Він може містити будь-який статичний HTML, а також будь-який динамічний серверний код. Далі додамо виклик допоміжного методу " RenderBody ()" в тому місці, де ми хочемо вивести певне тіло вмісту для запитуваної URL:

Далі ми можемо створити шаблон подання, назвавши його " Home.cshtml", яке містить лише потрібний код або вміст для побудови певного тіла запитуваної сторінки і ґрунтується на шаблоні макета

Зауважте, як ви явно задали властивість " LayoutPage" в коді нашого Home.cshtml файлу. Це означає, що ми хочемо використовувати шаблон SiteLayout.cshtml, як макет для цього подання. Ми можемо так само задати файл макета безпосередньо в контролері ASP.NET MVC, вказуючи Home.cshtml, як шаблон подання або ж налаштувавши його стандартним макетом для сайту (в даному випадку ми визначаємо його в одному файлі проекту і всі шаблони подання підхоплюють його автоматично)

Коли ми згенеруємо Home.cshtml, як шаблон подання, він об'єднає вміст макета і підсторінки, та й пошле вміст клієнту:

Хотілося б звернути увагу на код вище і зауважити, що визначення макета і його використання з подання / сторінок має маленький розмір. Код на скріншоті містить весь вміст SiteLayout.cshtml і Home.cshtml файлів, немає ніяких додаткових налаштувань або тегів, немає префікса% @ Page% і іншої різної розмітки або заданих властивостей.

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

Макет / MasterPage – Додаємо замінні частини

Макет сторінок підтримує можливість визначати всередині різні " секції", які можуть змінювати подання вмістом. Це дозволяє вам з легкістю змінювати / заповнювати перериваються секції вмісту на сторінці макета і надає гнучкість макету для вашого сайту.

Наприклад, ми можемо повернутися до нашого SiteLayout.cshtml і визначити дві секції всередині макету, які можуть змінювати подання. Назвемо ці частини " menu" і " footer" і вкажемо, що заповнювати з необов'язково, передавши параметр optional=true помічникові RenderSection () (робимо ми це, використовуючи нові необов'язкові параметри в C #, про які я вже розповідав)

Оскільки дві секції позначені, як " optional", я не зобов'язаний визначати їх у моєму Home.cshtml файлі. Мій сайт продовжує чудово працювати, навіть якщо їх там немає.

Давайте повернемося назад в Home.cshtml і оголосимо власні частини Menu і Footer. Скріншот нижче, містить весь код Home.cshtml, більше нічого не потрібно. Однак, я переніс налаштування LayoutPage на глобальний рівень, так що їх тут більше немає.

Наші власні секції перезаписують " menu" і " footer" за допомогою оголошених у файлі блоків @section. Ми вирішили не вимагати обгортати вміст " main / body" усередині секції, а замість цього просто залишити її в строковому вигляді (це дозволяє скоротити кількість натискань і дозволить з легкістю додавати секції на сторінки макета, не вимагаючи пробігати по всіх сторінках змінюючи їх синтаксис)

Коли ми знову згенеруємо Home.cshtml як шаблон подання, він об'єднає зміст макета і підсторінки, інтегруючи дві нові частини сторінки і поверне клієнтові наступне:

Інкапсуляція і повторне використання HTML-помічників

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

Програмні HTML-помічники

Сьогодні у ASP.NET MVC в наявності є допоміжні методи, які можна викликати в блоках коду і які інкапсулюють генерацію HTML. І реалізовані вони тільки у вигляді коду (найчастіше, як методи розширень). Всі існуючі методи розширення HTML, створені з ASP.NET MVC, будуть так само працювати при використанні " Razor":

Декларативні HTML-помічники

Генерація HTML на основі одного класу коду працює, але не є ідеальною. Однією з можливостей у Razor є простий шлях для створення повторно використовуваних HTML-помічників, використовуючи більш декларативний підхід. Наш план полягає в тому, щоб дати вам можливість оголошувати повторно використовувані помічники з допомогою декларативного синтаксису @ helper {}, як показано нижче.

Ви зможете розміщувати.сshtml файли, які містять дані помічники в директорії Views \ Helpers і надалі заново використовувати їх у будь-якому поданні або сторінці на вашому сайті (ніяких додаткових дій не потрібно):

Зверніть увагу, як помічник ProductListing () визначає аргументи і параметри. Ви можете передавати будь-які параметри, які захочете (включаючи необов'язкові параметри, типи допускають значення NULL, генерики і т.п.). Ви так само зможете налагоджувати даний код в Visual Studio.[1]

Передача рядкових шаблонів, як параметрів

Інша корисна можливість, яку ми надаємо з Razor – це можливість передавати " рядкові шаблонні" параметри у допоміжні методи. Дані " рядкові шаблони" можуть містити в собі, як HTML, так і код, і можуть бути викликані на вимогу допоміжного методу.

Нижче ви бачите приклад даної функціональності у дії, я використовую HTML-помічник " Grid", який генерує DataGrid для клієнта:

Виклик методу Grid.Render - це C #. Ми використовуємо нові іменовані параметри в C # для передачі суворо типізованих аргументів на метод Grid.Render, дана можливість дає нам повне завершення виразів з Instellisense і перевірку під час компіляції.

Параметр " format", який ми передаємо, коли оголошуємо стовпець, є " рядковим шаблоном", він містить і html і код, ми також можемо налаштувати під себе формат даних. А найпрекрасніше - це що помічник Grid'a може викликати наш рядковий шаблон, як метод делегата, і може викликати його, коли потрібно і скільки разів хоче. У даному випадку він буде викликати кожного разу, коли він генерує рядок гріду і передає в " елемент", який може використовувати наш шаблон для відображення результату.

Дана можливість дозволить розробляти більш потужні HTML-допоміжні методи. Ви зможете реалізовувати їх, як в коді (так ви це робите сьогодні), так і використовуючи декларативний підхід @ helper {}.