Представления
Front-end составляющая приложения создалась в цветовых тонах и стилях, позволяющих легко визуально контролировать расположение статических блоков, и блоков динамического контента.
Style.css файл каскадных таблиц стилей, несущий в себе описание стилей для всего приложения.
#rsvpform label{ width: 120px; display: inline-block; }
#rsvpform input { margin: 2px; margin-left: 4px; width: 150px; }
#rsvpform select { margin: 2px 0; width: 154px; }
button[type=submit] { margin-top: 15px; padding: 5px; }
table, td, th { border: thin solid black; border-collapse: collapse; padding: 5px; background-color: lemonchiffon; text-align: left; margin: 10px 0; }
#validationSummary { color: red; }
#willattend { height: 40px; width: 349px; }
body { background-color: darkgrey; }
#container { background-color:brown; width: 80%; height: auto; margin: 0 auto; }
#header { background-color: wheat; width: 100%; height: 100px; }
.c { border: 1px solid #333; display: inline-block; padding: 10px 15px; text-decoration: underline; color: #000; |
}
.c:hover { box-shadow: 0 0 5px rgba(0,0,0,0.3); background: linear-gradient(to bottom, #fcfff4, #e9e9ce); color: #a00; //margin-top: 50px; }
#head_h { font-family: Mistral; color: red; -webkit-text-stroke: 1px black; }
.content_div div { width: 70%; background-color: blueviolet; margin: 0 auto; }
|
Site1.master файл шаблон Представления(мастер-страница). Еще один хороший подход в практике веб-программирования. Использование шаблонов Представлений позволяет делать приложение более гибким, сокращает код и позволяет внося изменения в один файл- вносить изменения во внешний вид приложения в целом.
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="TestAspNet45.Views.Site1" %>
<!DOCTYPE html>
<!-- мастер старница(шаблон представления приложения) -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link rel="stylesheet" href="~/Styles.css" /> <!-- подключение файла стилей -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<div id="container">
<div id="header">
<div id="top" class="head_inside">
<h1 align="center" id="head_h" >Площадка для размещения объявлений</h1>
</div>
<div id="menu" class="head_inside">
<a href="Summary.aspx" class="c">На главную</a>
<a href="Default.aspx" class="c">Добавить объявление</a>
</div>
</div>
<div class="content_div"> <!-- Контейнер содержимого -->
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"> <!-- Подключения динамического контента в шаблон -->
</asp:ContentPlaceHolder>
</div>
</div>
</body>
</html>
Summary.aspx Представление главной страницы. Содержимое представления встраивается в верстку мастер-страницы, создавая законченный вид приложения. Имеет элементы формирования динамического контента.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Summary.aspx.cs" Inherits="TestAspNet45.Summary"
MasterPageFile="~/Views/Site1.master" Title="Title" %>
<%@ Import Namespace="TestAspNet45" %> <!-- Служебная информация, включая подключение мастер-страницы(шабблона представления) -->
<asp:Content ID="Conten1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server" > <!-- Все, что в этом блоке- будет встроено в представление шаблона-->
<h2>Актуальные объявления</h2>
<% var yesData = Repository.GetRepository().GetAllResponses().Where(r => r.WillAttend.Value);
foreach (var rsvp in yesData) {
string htmlString = String.Format("<div>" +
"<h3> Тема: {1} </h3> </ br>" +
"<p>{2}</p> </ br>" +
"<h3> Номер телефона: {3} </h3>   <a href=Default.aspx?id={0}>Убрать?</a>" +
"</div>", rsvp.Id, rsvp.Title, rsvp.Body, rsvp.Phone);
Response.Write(htmlString);
}
%> <!-- Пример динамической разметки в представлении -->
<h2>Не актуальные объявления</h2>
<%= GetNoShowHtml()%> <!-- вывод динамической разметки из контроллера -->
</asp:Content>
Верстка сайта без динамического контента.
Default.aspx Представление формы добавления новых объявлений. Не получилось подсунуть это представление в мастер-страницу из за изменение имен элементов формы.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="TestAspNet45.WebForm1" %>
<!DOCTYPE html>
<!-- страница без использования шаблона, так как не смог справится с проблеммой переименования элементов формы -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link rel="stylesheet" href="~/Styles.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<div id="container"> <!-- стандартная разметка шаблона -->
<div id="header">
<div id="top" class="head_inside">
<h1 align="center" id="head_h" >Площадка для размещения объявлений</h1>
</div>
<div id="menu" class="head_inside">
<a href="Summary.aspx" class="c">На главную</a>
</div>
</div>
<div class="content_div">
<form id="rsvpform" runat="server" > <!-- Форма, передающая данные контроллеру -->
<asp:ValidationSummary ID="validationSummary" runat="server" ShowModelStateErrors="true" /> <!-- тег валидации -->
<div>
<h1>Форма добавления объявления:</h1>
<label> Тема: </label> <input type="text" id="title" name="title" runat="server"/>
</div>
<div>
<label> Содержание: </label> <input type="text" id="body" runat="server"/>
</div>
<div>
<label> Номер телефона: </label> <input type="text" id="phone" runat="server"/>
</div>
<div>
<button type="submit">Отправить объявление</button>
</div>
</form>
</div>
</body>
</html>
Верстка формы добавления новых объявлений.