Навігація
Головна
 
Головна arrow Інформатика arrow Проектування і розробка web-додатків
< Попередня   ЗМІСТ   Наступна >

-ПОМІЧНИКИ

Уявлення використовують розмітку HTML для візуалізації вмісту. Однак фреймворк ASP.NET MVC володіє також таким потужним інструментом, як HTML-помічники (helper), які можуть генерувати необхідний HTML-код. HTML-помічники не зовсім те ж саме, що серверні ЕУ Web Form, але вони найближче до них в технології ASP.Net MVC.

Стандартні HTML-помічники

Фреймворк MVC надає великий набір вбудованих HTML-помічників, які дозволяють генерувати розмітку для роботи з HTML-формами (табл. 4.11).

HTML-помічник BeginForm приймає в якості параметрів ім'я методу дії, ім'я контролера і використовуваний HTTP-метод (за допомогою перерахування FormMethod). наприклад:

Html.BeginFormfBuy "," Home ", FormMethod.Post)

Для того щоб автоматично додавався тег завершення форми, HTML-помічник BeginForm використовується наступним чином:

@using (Html.BeginForm ( "Buy", "Home", FormMethod.Post)) {

<Input type = "hidden" value = "@ ViewBag.Bookld" name-'Bookld "/>

}

Таблиця 4.11

Основні HTML-помічники

метод

опис

BeginForm

Повертає HTML-рядок для HTML-форми

ActionLink,

RouteLink

Повертає HTML-рядок для HTML посилання

DropDownList

Повертає HTML-рядок для списку

ListBox

Повертає HTML-рядок для list box

TextArea

Повертає HTML-рядок для text area

У цьому випадку буде створено наступний HTML-код:

<Form method = "post" action = 7Home / Buy ">

"Input type =" hidden "value=''@ViewBag.Bookld '' name =" Bookld "/>

</ Form>

Якщо виклик сторінки з формою і відправка форми здійснюється одним і тим же дією (як наприклад, Buy), то в цьому випадку в помічника Html.BeginForm можна параметри не вказувати:

@using (Html.BeginForm ()) {...}

До складу стандартних HTML-помічників входять помічники для введення інформації практично для всіх HTML-елементів управління. Всі базові HTML-помічники використовують як мінімум два параметри: перший параметр - значення атрибута id або name; другий параметр - значення атрибута value.

Помічник Html.TextBox генерує тег input зі значенням атрибута type, рівним text. Даний помічник використовується для отримання розмітки введення інформації користувачем. наприклад:

@ Html.TextBox ( "TextBox1 '', ViewBag.DefauItText)

Помічник Html.Hidden використовується для формування прихованого поля input type = "hidden". Наприклад, виклик помічника: @ Html.Hidden ( "Bookld", "2") згенерує розмітку:

"Input id =" Bookld "name =" Bookld "type =" hidden "value =" 2 '' />

А при передачі змінної з ViewBag потрібно привести її до типу string:

@ Html.Hidden ( "Bookld", (string) @ ViewBag.Bookld)

Помічник Html.Password створює поле для введення пароля. Він схожий на помічника TextBox, але замість введених символів відображає маску пароля. Наприклад: @ Html.Password ( "UserPassword", "val")

генерує розмітку:

<Input id = "UserPassword" name = "UserPassword '' type =" password "value =" val "/>

Помічник Html.RadioButton використовується для створення перемикачів. Він генерує елемент input зі значенням type = "radio". Для створення групи перемикачів треба привласнити всім їм одне і те ж ім'я (властивість name). Наприклад:

@ Html.RadioButtonf'color "," red ") <span> KpacHbiii </ span> <br />

@ Html.RadioButton ( "color", "blue") <span> cnHHH </ span> <br/>

@ Html.RadioButton ( "color", "green", true) <span> 3eneHbM </ span>

Такий код створює наступну розмітку:

<Input id = "color" name = "color" type = "radio" value = "red" />

<Span> червоний </ span> <br />

<Input id = "color" name = "color" type = "radio" value = "blue" />

<Span> синій </ span> <br />

<Input checked = "checked" id = "color" name = "color" type = "radio" value = "green" />

<Span> зелений </ span>

Помічник Html.CheckBox може застосовуватися для створення відразу двох елементів. наприклад:

@ Html.CheckBox ( "Enable", false)

буде генерувати наступний HTML:

<Input id = "Enable" name = "Enable" type = "checkbox" value = "true" />

<Input name = "Enable" type = "hidden" value = "false" />

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

Помічник Html.Label создаег елемент <label />, а параметр, який передається в помічник, задає значення атрибута for і одночасно текст для елемента. Наприклад, оголошення помічника Html.Label (Name ") створює таку розмітку:

<Label for = "Name"> Name </ label>

Елемент label представляє просту мітку, призначену для прикріплення інформації до елементів введення, наприклад до текстових полів. Атрибут for елемента label повинен містити ID асоційованого елемента вводу. Якщо користувач натискає на мітку, то браузер автоматично передає фокус пов'язаного з цією міткою елементу введення.

Помічник Html.DropDownList створює список, що випадає, тобто елемент "select />. Для генерації такого списку потрібна колекція Select- List, яка містить об'єкти SelectListltem, що описують елементи списку. Об'єкт SelectListltem має властивість Text (відображається текст), властивість Value (саме значення , яке може не збігатися з текстом) і властивість Selected (вказує, обраний даний елемент чи ні).

Наприклад, в списку, що випадає можна показати колекцію елементів Book, яка передається в уявлення за допомогою об'єкта ViewBag:

BookContext db = new BookContext ();

SelectList books = new SelectList (db.Books, "Author", "Name");

ViewBag.Books = books;

У конструкторі об'єкту SelectList задається:

  • • набір значень для списку (db.Books);
  • • назва властивості моделі Book, яке буде використовуватися в якості значення (Author);
  • • назва властивості моделі Book, яке буде використовуватися для відображення в списку (Name).

У поданні створений об'єкт типу SelectList, що міститься в ViewBag.Books, можна використовувати в такий спосіб:

@ Html.DropDownList ( "Author", (SelectList) ViewBag.Books)

Помічник ActionLink формує тег <a>. При його описі перший параметр задає найменування посилання, другий - ім'я методу-дії, третій - ім'я контролера, четвертий параметр - ідентифікатор. Наприклад, якщо задано:

@ Html.ActionLink ( "Виконати розрахунок", "Calcule", "Store", new (id = 1})

то буде створюватися наступна гіперпосилання:

<А href = "/ Store / Calcule / 1"> Виконати обчислення </ а>

Як приклад шаблон уявлення, показаний на рис. 4.47, можна переписати за допомогою HTML-помічників, як показано на рис. 4.48.

Вистава для методу [HttpGet] Buy (int id), записане за допомогою HTML-помічників

Мал. 4.48. Вистава для методу [HttpGet] Buy (int id), записане за допомогою HTML-помічників

Строго типізовані HTML-помічники

Для базових помічників в ASP.NET MVC є їх строго типізовані двійники (DropDownListFor, ListBoxFor, TextAreaFor). Вони можуть використовуватися тільки в строго типізованих уявленнях і неявно працюють з моделлю, переданої в уявлення.

Вистава для методу [HttpGet] Buy (int id), записане за допомогою HTML-помічників

Мал. 4.49. Вистава для методу [HttpGet] Buy (int id), записане за допомогою HTML-помічників

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

@ Html.TextBoxFor (m => m.Person)

вказується, що він буде працювати з властивістю Person моделі. Ім'я, що позначає модель (в даному випадку т), може бути будь-яким. Воно буде неявно зв'язуватися з моделлю уявлення. Цей же помічник можна записати і іншими способами:

@ Html.TextBoxFor (model => model. Person)

або

@ Html.TextBoxFor (c => c.Person).

Як приклад шаблон уявлення, показаний на рис. 4.47, можна переписати за допомогою строго типізованих HTML-помічників, як показано на рис. 4.49.

Крім стандартних HTML-помічників (формують певні елементи розмітки HTML), фреймворк MVC також має шаблонні HTML-помічники (табл. 4.12).

Вони є більш гнучкими в порівнянні зі стандартними помічниками, тому що для них не потрібно описувати, як потрібно створювати елемент розмітки і який тип помічника використовувати. Шаблонного помічникові просто повідомляється використовується властивість моделі, а він сам визначає, який HTML-елемент згенерувати, виходячи з типу властивості і його атрибутів (див. Розділ 4.2.5).

Шаблонні HTML-помічники

Таблиця 4.12

Основні шаблонні HTML-помічники

метод

опис

Display

створює для вказаної властивості моделі доступний тільки для читання елемент розмітки, наприклад Html.DisplayfName ")

Editor

створює для вказаної властивості моделі доступний для редагування елемент розмітки, наприклад Html.Editor ( "Name")

DisplayText

створює вираз для зазначеного властивості моделі у вигляді простої рядки, наприклад Html.DisplayTextfName ")

Для шаблонних помічників також є строго типізовані аналоги:

  • • DisplayFor - строго типізований аналог помічника Display: Html.DisplayFor (e => e.Name); якщо в моделі буде заданий атрибут, [Dis- play (Name = "хххх")], то в якості імені буде показуватися задане значення "хххх";
  • • EditorFor - строго типізований аналог помічника Editor: Html.EditorFor (e => e.Name);
  • • DisplayTextFor - строго типізований аналог помічника Display- Text, наприклад Html.DisplayTextFor (e => e.Name)

Крім шаблонних помічників, які використовуються для окремого властивості моделі, є ще кілька помічників, які дозволяють згенерувати відразу все поля для заданої моделі:

  • • Html.DisplayForModel () - створює поля для читання для всіх властивостей моделі;
  • • EditorForModel () - створює поля для редагування для всіх властивостей моделі.

Наприклад, якщо в контролері Home створити деяку дію BookView, яке по id буде виводити інформацію про зазначену книзі:

public ActionResult BookView (int id) {

var book = db.Books.Find (id); if (book! = null) {return View (book);}

return Viewflndex ");

}

то для нього можна створити строго типізовані уявлення BookView.cshtml, в якому все поля будуть формуватися за допомогою одного помічника:

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

@model Bookstore.Models.Book <й2> Книга № @ Model.ld </ h2>

@ Html.DisplayForModel ()

Якщо звернутися до дії BookView, задавши в адресному рядку маршрут Home / BookView / 1, то буде показана наступна сторінка:

Результат виконання HTML-помічника @ Html.DisplayForModel ()

Мал. 4.50. Результат виконання HTML-помічника @ Html.DisplayForModel ()

Як приклад використання HTML-помічника EditorFor для редагування моделі створимо метод-дію для редагування книги (модель Book), яке отримує ідентифікатор Id і виводить поля для редагування в поданні:

В даному методі в якості параметра використовується тип int ?, на випадок якщо користувачі нс вкажуть в маршруті id. Якщо параметр id нс задається, то передається значення null і буде повертатися результат HttpNotFound.

У поданні може використовуватися наступний набір HTML- помічників EditorFor:

Так як унікальний ідентифікатор id книги редагувати не треба, то поле для його відображення робиться прихованим, тобто використовується помічник Html.HiddenFor.

 
Якщо Ви помітили помилку в тексті позначте слово та натисніть Shift + Enter
< Попередня   ЗМІСТ   Наступна >
 
Дисципліни
Агропромисловість
Аудит та Бухоблік
Банківська справа
БЖД
Географія
Документознавство
Екологія
Економіка
Етика та Естетика
Журналістика
Інвестування
Інформатика
Історія
Культурологія
Література
Логіка
Логістика
Маркетинг
Медицина
Нерухомість
Менеджмент
Педагогіка
Політологія
Політекономія
Право
Природознавство
Психологія
Релігієзнавство
Риторика
Соціологія
Статистика
Техніка
Страхова справа
Товарознавство
Туризм
Філософія
Фінанси
Пошук