Создание макетов страниц с эталонными страницами представлений (VB)
от Майкрософт
Из этого руководства вы узнаете, как создать общий макет страницы для нескольких страниц в приложении, используя преимущества просмотра master страниц. Вы можете использовать представление master страницы, например, чтобы определить макет страницы с двумя столбцами и использовать макет с двумя столбцами для всех страниц в веб-приложении.
Создание макетов страниц с помощью представления эталонных страниц
Из этого руководства вы узнаете, как создать общий макет страницы для нескольких страниц в приложении, используя преимущества просмотра master страниц. Вы можете использовать представление master страницы, например, чтобы определить макет страницы с двумя столбцами и использовать макет с двумя столбцами для всех страниц в веб-приложении.
Вы также можете воспользоваться преимуществами просмотра master страниц для совместного использования общего содержимого на нескольких страницах приложения. Например, вы можете разместить логотип веб-сайта, навигационные ссылки и рекламные баннеры в представлении master странице. Таким образом, на каждой странице приложения будет отображаться это содержимое автоматически.
Из этого руководства вы узнаете, как создать страницу master представления и новую страницу содержимого представления на основе master страницы.
Создание главной страницы представления
Начнем с создания представления master страницы, определяющей макет из двух столбцов. Чтобы добавить новое представление master страницу в проект MVC, щелкните правой кнопкой мыши папку Views\Shared, выберите пункт меню Добавить, Новый элемент и выберите шаблон эталонной страницы представления MVC (см. рис. 1).
Рис. 01. Добавление master страницы представления (щелкните, чтобы просмотреть полноразмерное изображение)
В приложении можно создать несколько представлений master страницы. Каждое представление master страницы может определять другой макет страницы. Например, может потребоваться, чтобы на некоторых страницах был макет из двух столбцов, а на других страницах — макет из трех столбцов.
Страница представления master очень похожа на стандартное представление ASP.NET MVC. Однако, в отличие от обычного представления, страница представления master содержит один или несколько <asp:ContentPlaceHolder> тегов. Теги <contentplaceholder> используются для пометки областей страницы master, которые можно переопределить на отдельной странице содержимого.
Например, страница представления master в листинге 1 определяет макет из двух столбцов. Он содержит два <contentplaceholder> тега. По одному <ContentPlaceHolder> для каждого столбца.
Листинг 1 — Views\Shared\Site.master
<%@ Master Language="VB" AutoEventWireup="false" CodeBehind="Site.Master.vb" Inherits="MvcApplication1.Site" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title></title>
<style type="text/css">
html
{
background-color:gray;
}
.column
{
float:left;
width:300px;
border:solid 1px black;
margin-right:10px;
padding:5px;
background-color:white;
min-height:500px;
}
</style>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<h1>My Website</h1>
<div class="column">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<div class="column">
<asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
</asp:ContentPlaceHolder>
</div>
</body>
</html>
Текст страницы представления master в листинге 1 содержит два <div> тега, которые соответствуют двум столбцам. Класс столбца каскадной таблицы стилей применяется к обоим <div> тегам. Этот класс определен в таблице стилей, объявленной в верхней части страницы master. Вы можете просмотреть, как будет отображаться страница представления master, переключившись в режим конструктора. Откройте вкладку Конструктор в левом нижнем углу редактора исходного кода (см. рис. 2).
Рис. 02. Предварительный просмотр страницы master в конструкторе (щелкните для просмотра полноразмерного изображения)
Создание страницы просмотра содержимого
После создания master страницы представления можно создать одну или несколько страниц содержимого представления на основе master страницы представления. Например, можно создать страницу содержимого представления индекса для контроллера Главная, щелкнув правой кнопкой мыши папку Views\Home, выбрав Добавить, Создать элемент, выберите шаблон Страница просмотра содержимого MVC , введя имя Index.aspx и нажав кнопку Добавить (см. рис. 3).
Рис. 03. Добавление страницы просмотра содержимого (щелкните, чтобы просмотреть полноразмерное изображение)
После нажатия кнопки Добавить появится новое диалоговое окно, позволяющее выбрать представление master страницу для связывания со страницей содержимого представления (см. рис. 4). Вы можете перейти к сайту. master просмотр страницы master, созданной в предыдущем разделе.
Рис. 04. Выбор страницы master (щелкните для просмотра полноразмерного изображения)
После создания новой страницы содержимого представления на основе сайта. master master странице вы получите файл в листинге 2.
Листинг 2 — Views\Home\Index.aspx
<%@ Page Title="" Language="VB" MasterPageFile="~/Views/Shared/Site.Master" AutoEventWireup="false" CodeBehind="Index.aspx.vb" Inherits="MvcApplication1.Index" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder2" runat="server">
</asp:Content>
Обратите внимание, что это представление содержит <asp:Content> тег, соответствующий каждому <asp:ContentPlaceHolder> из тегов на странице представления master. Каждый <asp:Content> тег содержит атрибут ContentPlaceHolderID, указывающий на переопределяемую им конкретную.<asp:ContentPlaceHolder>
Обратите внимание, что страница представления содержимого в листинге 2 не содержит обычных открывающих и закрывающих HTML-тегов. Например, он не содержит открывающий и закрывающий <html> теги или <head> . Все обычные открывающие и закрывающие теги содержатся на странице представления master.
Все содержимое, которое вы хотите отобразить на странице содержимого представления, должно быть помещено в <asp:Content> тег. Если поместить любой HTML-код или другое содержимое вне этих тегов, при попытке просмотра страницы появится сообщение об ошибке.
Вам не нужно переопределять каждый <asp:ContentPlaceHolder> тег со страницы master на странице представления содержимого. Необходимо переопределить <asp:ContentPlaceHolder> тег только в том случае, если вы хотите заменить тег определенным содержимым.
Например, измененное представление индекса в листинге 3 содержит только два <asp:Content> тега. Каждый из тегов <asp:Content> содержит определенный текст.
Листинг 3. Views\Home\Index.aspx (modified)
<%@ Page Title="" Language="VB" MasterPageFile="~/Views/Shared/Site.Master" AutoEventWireup="false" CodeBehind="Index.aspx.vb" Inherits="MvcApplication1.Index" %>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<h1>Content in first column!</h1>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder2" runat="server">
<h1>Content in second column!</h1>
</asp:Content>
При запросе представления в листинге 3 оно отображает страницу на рис. 5. Обратите внимание, что представление отображает страницу с двумя столбцами. Кроме того, обратите внимание, что содержимое страницы содержимого представления объединяется с содержимым master страницы представления.
Рис. 05. Страница содержимого представления индекса (щелкните, чтобы просмотреть полноразмерное изображение)
Изменение содержимого главной страницы представления
Одна из проблем, которая возникает почти сразу при работе с master страниц представления, — это проблема изменения содержимого master страницы при запросе различных страниц содержимого представления. Например, вы хотите, чтобы каждая страница в веб-приложении была уникальной. Однако заголовок объявляется на странице представления master, а не на странице содержимого представления. Итак, как настроить заголовок страницы для каждой страницы содержимого представления?
Существует два способа изменения заголовка, отображаемого на странице просмотра содержимого. Во-первых, можно назначить заголовок страницы атрибуту <%@ page %> title директивы, объявленной в верхней части страницы содержимого представления. Например, если вы хотите назначить заголовок страницы "Супер большой веб-сайт" представлению индекса, можно включить следующую директиву в верхней части представления индекса:
<%@ page title="Super Great Website" language="VB" masterpagefile="~/Views/Shared/Site.Master"
autoeventwireup="true" codebehind="Index.aspx.vb" inherits="MvcApplication1.Views.Home.Index"%>
Когда представление индекса отображается в браузере, в строке заголовка браузера отображается нужный заголовок:
Существует одно важное требование, которому должна соответствовать страница представления master, чтобы атрибут title работал. Страница представления master должна содержать <head runat="server"> тег вместо обычного <head> тега для заголовка. <head> Если тег не содержит атрибут runat="server", заголовок не отображается. Страница представления по умолчанию master содержит обязательный <head runat="server"> тег.
Альтернативный подход к изменению содержимого страницы master со страницы содержимого отдельного представления заключается в переносе области, которую вы хотите изменить, в <asp:ContentPlaceHolder> тег. Например, представьте, что вы хотите изменить не только заголовок, но и метатеги, отображаемые на странице представления master. Страница представления master в листинге 4 содержит <asp:ContentPlaceHolder> тег внутри тега<head>.
Листинг 4 . Views\Shared\Site2.master
<%@ Master Language="VB" AutoEventWireup="false" CodeBehind="Site2.Master.vb" Inherits="MvcApplication1.Site2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<asp:ContentPlaceHolder ID="head" runat="server">
<title>Please change my title</title>
<meta name="description" content="Please provide a description" />
<meta name="keywords" content="keyword1,keyword2" />
</asp:ContentPlaceHolder>
</head>
<body>
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</body>
</html>
Обратите внимание, что тег в листинге <asp:ContentPlaceHolder> 4 содержит содержимое по умолчанию: заголовок по умолчанию и метатеги по умолчанию. Если не переопределить этот <asp:ContentPlaceHolder> тег на отдельной странице содержимого представления, будет отображаться содержимое по умолчанию.
Страница представления содержимого в листинге 5 переопределяет <asp:ContentPlaceHolder> тег для отображения пользовательского заголовка и настраиваемых метатегов.
Листинг 5 . Views\Home\Index2.aspx
<%@ Page Title="" Language="VB" MasterPageFile="~/Views/Shared/Site2.Master" AutoEventWireup="false" CodeBehind="Index2.aspx.vb" Inherits="MvcApplication1.Index2" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<title>The Index2 Page</title>
<meta name="description" content="Description of Index2 page" />
<meta name="keywords" content="asp.net,mvc,cool,groovy" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
Just some content in the body of the page.
</asp:Content>
Итоги
В этом руководстве представлены общие сведения о просмотре master страниц и страниц содержимого. Вы узнали, как создавать страницы представления master и на их основе создавать страницы содержимого представления. Мы также рассмотрели, как можно изменить содержимое master страницы представления с определенной страницы содержимого представления.
Обратная связь
Ожидается в ближайшее время: в течение 2024 года мы постепенно откажемся от GitHub Issues как механизма обратной связи для контента и заменим его новой системой обратной связи. Дополнительные сведения см. в разделе https://aka.ms/ContentUserFeedback.
Отправить и просмотреть отзыв по