Модуль 5: Разработка главных страниц и пользовательских элементов управления
Урок 1: Создание главных страниц
Урок 2: Добавление в веб-форму ASP.NET пользовательских элементов управления
Лабораторная работа 5: Разработка главных страниц и пользовательских элементов управления
Сценарий лабораторной работы
Подведение итогов выполнения лабораторной работы
Похожие презентации:
Главный экран системы
Главный экран системы
Главный экран системы
Главный экран системы
Главный экран системы
Главный экран системы
Технологии разработки статических веб-страниц. Язык гипертекстовой разметки HTML
Технологии разработки статических веб-страниц. Язык гипертекстовой разметки HTML
Элементы управления
Элементы управления
Главный экран системы
Главный экран системы
Курс веб-разработка. Редактируемая главная страница
Курс веб-разработка. Редактируемая главная страница
Технология создания Web-страниц. Интернет и WWW. Язык HTML. Выход
Технология создания Web-страниц. Интернет и WWW. Язык HTML. Выход
Эффективное использование инструментов разработки веб-страниц
Эффективное использование инструментов разработки веб-страниц
Основы технологии ASP.Net Web Forms. Обзор платформы Microsoft .Net
Основы технологии ASP.Net Web Forms. Обзор платформы Microsoft .Net

Разработка главных страниц и пользовательских элементов управления

1.

Модуль 5
Разработка главных
страниц и
пользовательских
элементов управления

2. Модуль 5: Разработка главных страниц и пользовательских элементов управления


Создание главных страниц
Добавление в веб-форму ASP.NET пользовательских элементов управления

3. Урок 1: Создание главных страниц

• Что такое главные страницы?
• Создание главной страницы
• Что такое страницы содержимого?
• Создание страницы содержимого
• Что такое вложенные главные страницы?
• Поведение главных страниц во время выполнения
• Добавление главной страницы к существующему
проекту веб-приложения
• Дискуссия: Преимущества использования главных
страниц

4.

Что такое главные страницы?
Главные страницы позволяют определить общий вид оформления
приложения ASP.NET в одном месте — файле с расширением
.master, а затем использовать его со всеми страницами содержимого,
которые связаны с этой главной страницей
Главные страницы обладают следующими признаками:
Директива Master
Элементы управления ContentPlaceHolder, которые определяют области, где отображается замещаемое
содержимое
Элементы HTML верхнего уровня страницы, такие как html, head и form

5.

Создание главной страницы
Перейти
Перейти вв окно
окно Solution
Solution Explorer
Explorer (Обозреватель
(Обозреватель решений)
решений)
Выбрать
Выбрать необходимые
необходимые элементы
элементы вв окне
окне диалога
диалога Add
Add New
New Item
Item
(Добавление
(Добавление нового
нового элемента)
элемента)

6.

Что такое страницы содержимого?
Страницы содержимого — веб-формы, вид оформления которых
определяется главной страницей
Страницы содержимого обладают следующими
признаками:
Атрибут MasterPageFile в директиве
Page, ссылающийся на главную страницу
Содержимое страницы, которое полностью
размещается в элементах управления
Content, соответствующих элементам
управления ContentPlaceHolder главной
страницы

7.

Создание страницы содержимого
Перейти
Перейти вв окно
окно Solution
Solution Explorer
Explorer (Обозреватель
(Обозреватель решений)
решений)
Выбрать
Выбрать необходимые
необходимые элементы
элементы вв окне
окне диалога
диалога Add
Add New
New Item
Item (Добавление
(Добавление
нового
нового элемента)
элемента)
При
При создании
создании новой
новой страницы
страницы содержимого
содержимого автоматически
автоматически создаются
создаются элементы
элементы управления
управления
Content,
Content, которые
которые ссылаются
ссылаются на
на элементы
элементы управления
управления ContentPlaceHolder
ContentPlaceHolder указанной
указанной главной
главной
страницы
страницы

8.

Что такое вложенные главные страницы?
<%@ Master
Master Language="C#"
Language="C#" MasterPageFile="~/MasterPage.master"
MasterPageFile="~/MasterPage.master"
Главные страницы могут иметь вложенные дочерние главные <%@
<%@
<%@ Master
Master Language="C#"
Language="C#" AutoEventWireup="true"
AutoEventWireup="true"
CodeFile="MasterPage.master.cs"
Inherits="MasterPage"
%>
CodeFile="MasterPage.master.cs"
Inherits="MasterPage"
%>
страницы, предназначенные
для разделов
AutoEventWireup="true"
AutoEventWireup="true"
CodeFile="NestedMasterPage.master.cs"
партнеров, отделов или
CodeFile="NestedMasterPage.master.cs" Inherits="NestedMasterPage"
Inherits="NestedMasterPage" %>
%>
<!DOCTYPE
html
"-//W3C//DTD
XHTML
<!DOCTYPE
html PUBLIC
PUBLIC
"-//W3C//DTD
XHTML 1.0
1.0 Transitional//EN"
Transitional//EN"
групп
страниц
веб-сайта
<asp:Content
<asp:Content ID="Content1"
ID="Content1" ContentPlaceHolderID="head"
ContentPlaceHolderID="head" runat="Server">
runat="Server">
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
</asp:Content>
</asp:Content>
<html
<html xmlns="http://www.w3.org/1999/xhtml">
xmlns="http://www.w3.org/1999/xhtml">
<asp:Content
<asp:Content ID="Content2"
ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1"
ContentPlaceHolderID="ContentPlaceHolder1"
<head
<head runat="server">
runat="server">
runat="Server">
runat="Server">
<title></title>
Вложенные
<title></title>
главные страницы обладают следующими признаками:
<asp:ContentPlaceHolder
<asp:ContentPlaceHolder ID="ContentPlaceHolder1"
ID="ContentPlaceHolder1" runat="server">
runat="server">
<asp:ContentPlaceHolder
<asp:ContentPlaceHolder ID="head"
ID="head" runat="server">
runat="server">
Расширение
</asp:ContentPlaceHolder>
</asp:ContentPlaceHolder>
</head>
</head>
<body>
<body>
имени файла .master
</asp:ContentPlaceHolder>
</asp:ContentPlaceHolder>
</asp:Content>
</asp:Content>
Директива Master
<form
<form id="form1"
id="form1" runat="server">
runat="server">
<div>
<div>
Элементы управления Content, которые ссылаются на элементы управления ContentPlaceHolder. Помимо
<asp:ContentPlaceHolder
<asp:ContentPlaceHolder ID="ContentPlaceHolder1"
ID="ContentPlaceHolder1" runat="server">
runat="server">
этого у дочерней главной страницы есть собственные элементы управления ContentPlaceHolder.
</asp:ContentPlaceHolder>
</asp:ContentPlaceHolder>
<%@
<%@ Page
Page Title=""
Title="" Language="C#"
Language="C#" MasterPageFile="~/NestedMasterPage.master"
MasterPageFile="~/NestedMasterPage.master"
AutoEventWireup="true"
AutoEventWireup="true" CodeFile="Default2.aspx.cs"
CodeFile="Default2.aspx.cs" Inherits="Default2"
Inherits="Default2" %>
%>
</div>
</div>
</form>
</form>
<asp:Content
<asp:Content ID="Content1"
ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1"
ContentPlaceHolderID="ContentPlaceHolder1"
</body>
</body>
</html>
</html>
Вложенные главные страницы можно просмотреть в
Visual Studio
в представлении Design (Конструктор)
Runat="Server">
Runat="Server">
</asp:Content>
</asp:Content>

9.

Поведение главных страниц во время выполнения
•
Содержимое отдельных элементов
Пользователь запрашивает
управления Content вставляется в
страницу, вводя URL страницы
соответствующие элементы
содержимого.
управления ContentPlaceHolder
ASP.NET анализирует директиву
Page страницы содержимого. Если
Content
Страница
ContentPlaceHolder
главной страницы
страницы.
директива содержит атрибут
MasterPageFile
ASP.NET отправляет
MasterPageFile,
ASP.NET
результирующую
извлекает главнуюобъединенную
страницу.
страницу для отрисовки в браузере.
ASP.NET вставляет содержимое
главной страницы в дерево
элементов управления страницы
содержимого.

10.

Добавление главной страницы к существующему проекту веб-приложения
Для того, чтобы добавить главные страницы, необходимо:
Добавить
Добавить главную
главную страницу
страницу или
или страницы
страницы
Добавить
Добавить новые
новые страницы
страницы содержимого
содержимого или
или
преобразовать
преобразовать существующие
существующие веб-формы
веб-формы
веб-приложения
веб-приложения вв страницы
страницы содержимого
содержимого

11.

Дискуссия: Преимущества использования главных страниц
Каковы
Каковы преимущества
преимущества использования
использования главных
главных страниц
страниц вв веб-приложении?
веб-приложении?

12. Урок 2: Добавление в веб-форму ASP.NET пользовательских элементов управления

• Что такое пользовательские элементы управления?
• Достоинства и недостатки применения
пользовательских элементов управления
• Преобразование веб-формы в пользовательский
элемент управления
• Добавление в веб-форму пользовательского элемента
управления

13.

Что такое пользовательские элементы управления?
Пользовательские элементы управления представляют собой страницы ASP.NET с расширением .ascx
Возможности пользовательских элементов управления:
Используют директиву Control
Представляют собой серверный веб-элемент управления, определенный пользователем
Упрощают повторное использование компонентов кода и пользовательского интерфейса в веб-приложении
Не содержат элементов HTML верхнего уровня — html, body или form
Могут содержать элементы статической разметки и серверные элементы управления
Содержат код, обрабатывающий их собственные события

14.

Достоинства и недостатки применения пользовательских элементов управления
Достоинства
Являются самодостаточными
Могут использоваться многократно
Могут быть написаны на языке, отличном от языка, на
Недостатки
Могут привести к дублированию кода и описания
пользовательского интерфейса
Код может быть просмотрен
котором реализованы другие страницы веб-сайта
Являются общими для всех страниц веб-приложения
Обычно пользовательские элементы управления используются для
создания небольших единиц кода и разметки, многократно использующихся
веб-приложением и обеспечивающих управление входом, проверку данных,
навигацию, панели элементов и другую подобную функциональность

15.

Преобразование веб-формы в пользовательский элемент управления
Удалить все элементы HTML верхнего уровня
Заменить директиву Page на директиву Control
Добавить в директиву Control атрибут ClassName
Изменить расширение файла с.aspx на .ascx
Изменить тип класса на UserControl
Добавить свойства

16.

Добавление в веб-форму пользовательского элемента управления
Включить
Включить пользовательский
пользовательский элемент
элемент управления
управления вв состав
состав веб-формы
веб-формы ASP.NET
ASP.NET при
при помощи
помощи директивы
директивы @
@
ü
ü
ü
ü
ü
ü
Register
Register
Вставить
Вставить пользовательский
пользовательский элемент
элемент управления
управления вв веб-форму
веб-форму
При
При необходимости
необходимости установить
установить значения
значения открытых
открытых свойств
свойств

17. Лабораторная работа 5: Разработка главных страниц и пользовательских элементов управления

• Упражнение 1: Добавление и применение главной
страницы
• Упражнение 2: Преобразование веб-форм в страницы
содержимого и пользовательские элементы управления
Приблизительное время выполнения: 60 минут

18. Сценарий лабораторной работы

19. Подведение итогов выполнения лабораторной работы

Вопросы для подведения итогов
• Каким образом можно связать главные страницы с
приложениями ASP.NET?
• Зачем при выполнении лабораторной работы было
выполнено преобразование веб-формы в
пользовательский элемент управления ASP.NET?
English     Русский Правила