→ Пошук по сайту       Увійти / Зареєструватися
Знання Веб-розробка на ASP.NET

Створення проекту типу ASP.NET Web Site

Для створення сайту має буди встановлена Visual Studio 2010 з пакетом оновлень sp1. Для подальшого створення сайту також повинен бути встановлений сервер microsoft sql server 2008.

  • Запускаємо VS 2010
  • У контекстному меню знаходимо File – New – Web Site:
  • Вибираємо з запропонованих варіантів ASP.NET Web Site:
  • Вибираємо каталог, змінюємо назву проекту на MySyte, натискаємо OK:

Проект створено.

У вікні Solution Explorer бачимо файл, які були додані до проекту автоматично:

Коротко опишемо кожен з них:

  • Файл Web.config — це файл, який визначає параметри для конкретного web-додатка. По суті - це XML-документ,у якому зберігається інформація про параметри постачальників станів сеансів, визначаються посилання на сторінки помилок. Також web.config містить рядки з'єднання з базами даних, засоби управління трасуванням.
  • Файл Global.asax є необов'язковим файлом додатків ASP.NET і містить додатковий код, що відповідає за обробку подій, що відбуваються на рівні програми. Всі зміни, внесені в файл Global.asax відслідковуються середовищем ASP. NET, і додаток перезавантажується. Під час виконання програми Global.asax компілюється в динамічний клас, який проводиться з класу HttApplication і це дозволяє управляти всім додатком.
  • App_Data — папка для зберігання файлів Access *.mdb, файлов SQL Express *.mdf, файлів XML чи інших постачальників данних.
  • App_Code — папка вихідного коду для компонентів чи классів, котрі повинні компілюватися як частина додатка. ASP.NET компілює код в цій папці при запиті до сторінки. Код в цій папці автоматично доступний додатку. Папка створюетьса автоматично якщо до проекту додаються файли коду.
  • Styles — папка, що містить в собі файли каскадних таблиць стилів *.css з автоматично-сгенерованим файлом Style.css для відображення сгенерованих сторінок.
  • Scripts — папка, що містить в собі файли JavaScript *.js.
  • Site.master, Default.aspx, About.aspx — це файли сторінок ASP.NET які будуть описані детальніше далі.
  • В папці Account сгенеровані сторінки для управління входом у систему на головній сторінці.

На веб-сторінках ASP.NET програмування інтерфейсу розділене на два етапи: програмування алгоритму і візуального компонента. Візуальний елемент складається з файлу, що містить статичну розмітку, таку як серверні елементи управління ASP.NET і HTML. Веб-сторінка ASP.NET виконує функції контейнера для статичного тексту і елементів управління, які необхідно відобразити.

Алгоритм веб-сторінки ASP.NET складається з коду, який створюється для взаємодії зі сторінкою. Код може перебувати в блоці script на сторінці або в окремому файлі класу. Якщо код знаходиться в окремому файлі класу, цей файл є файлом з виділеним кодом. Код у файлі з виділеним кодом може бути написаний мовою Visual Basic, C# або будь-якому іншому мовою NET Framework.

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

Передемо до детальнішого роглядання файлів сторінок ASP.NET

Site.master – це файли типу “Головна сторінка”. Головні сторінки ASP.NET дозволяють створювати послідовну структуру сторінок в додатку. Одна головна сторінка визначає вигляд, наповнення і стандартну поведінку для всіх сторінок (або групи сторінок) програми. Потім можна створювати окремі сторінки вмісту, що включають вміст, який необхідно відобразити. Коли користувачі запитують сторінку вмісту, вихідна сторінка являє собою поєднання структури головної сторінки і вмісту зі сторінки вмісту.

Головна сторінка являє собою файл ASP.NET з розширенням MASTER з визначеною структурою, яка може включати статичний текст, елементи HTML і серверні елементи управління. Головна сторінка позначається особливої директивою @ Master, що замінює директиву @ Page, яка використовується для звичайних сторінок. Aspx. Ця директива виглядає наступним чином:

 %@ Master Language="C#" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

Крім директиви @ Master, головна сторінка також містить всі елементи HTML верхнього рівня для сторінки, такі як html, head і form. Наприклад, як структури головної сторінки можна використовувати таблицю, елемент img для емблеми компанії, статичний текст для повідомлення про авторські права і серверні елементи управління для створення стандартної системи переходів по веб-сайту. На головній сторінці можна використовувати будь-які елементи HTML і ASP.NET.

Крім статичного тексту і елементів управління, що використовуються на всіх сторінках, головна сторінка містить елементи управління ContentPlaceHolder. Ці елементи управління визначають області, в яких буде відображатися замінні вміст. Замінні вміст, в свою чергу, визначається на сторінках вмісту.

 <asp:ContentPlaceHolder ID="MainContent" runat="server"/>

атрибут runat, який має значення server дозволяє посилатися на форму і на елементи управління сторінки програмним способом в коді сервера.
Default.aspx, About.aspx - це файли типу “Сторінка вмісту”.

Вміст для елементів управління ContentPlaceHolder на головній сторінці визначається шляхом створення окремих сторінок вмісту, якими є сторінки ASP.NET (ASPX-файли та файли з виділеним кодом), пов'язані з певною головною сторінкою. Зв'язування здійснюється в директиві @ Page сторінки вмісту шляхом включення атрибута MasterPageFile, що вказує на використовувану головну сторінку. Наприклад, сторінка вмісту може мати наступну директиву @ Page, що пов'язує її з сторінкою Master1.master:

 <%@ Page Language="C#" MasterPageFile="~/MasterPages/Master1.master" Title="Content Page"%>

На сторінці вмісту, вміст створюється шляхом додавання елементів керування Content і зіставлення їх з елементами управління ContentPlaceHolder на головній сторінці. Наприклад, головна сторінка може містити "местозаполнітелі" вмісту Main і Footer. На сторінці вмісту можна створити два елементи управління Content: один зіставляється з елементом управління ContentPlaceHolderMain, а другий - з елементом управління ContentPlaceHolderFooter. Після створення елементів управління Content можна додати в них текст і елементи керування. На сторінці вмісту все, що не знаходиться всередині елемента керування Content (за винятком блоків скрипта для серверного коду), призводить до виникнення помилки. Усі завдання, що виконуються на сторінці ASP.NET, можуть бути виконані на сторінці вмісту. Наприклад, можна створити вміст для елемента управління Content за допомогою серверних елементів керування та запитів до баз даних або інших динамічних механізмів.

Сторінка вмісту може виглядати наступним чином:

 <% @ Page Language="C#" MasterPageFile="~/Master.master" Title="Content Page 1" %>

<asp:Content ID="Content1" ContentPlaceHolderID="Main" Runat="Server">
Main content.
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="Footer" Runat="Server" >
Footer content.
</asp:content> 

Перейдемо до створення сайту.

Свторення сайту у середовищі програмування ASP.NET

Внесемо певні зміни у файли Site.master та Default.aspx.

Додаємо декілька елементів управління ContentPlaceHolder на головній сторінці:

 <div class="title">
<h1>
<asp:ContentPlaceHolder ID="TitleHolder" runat="server"/>
</h1>
</div>
…
<div class="main">
<asp:ContentPlaceHolder ID="ContentHolder" runat="server"/>
<asp:ContentPlaceHolder ID="MenuHolder" runat="server"/>
</div>

Default.aspx після внесення смін повинен містити в собі наступний код:

 <%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
CodeFile="Default.aspx.cs" Inherits="_Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>

<asp:Content ID="TitileContent" runat="server" ContentPlaceHolderID="TitleHolder">
<asp:Literal ID="TitleLiteral" runat="server"></asp:Literal>
</asp:Content>

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="ContentHolder">
<asp:Literal ID="ContentLiteral" runat="server"></asp:Literal>
</asp:Content>

<asp:Content ID="MenuContent" runat="server" ContentPlaceHolderID="MenuHolder">
<asp:Literal ID="MenuLiteral" runat="server"></asp:Literal>
</asp:Content> 

Відмітимо, що в елементи типу Contant були вміщені елементи Literal з відповідними іменами, вони резервують місце на веб-сторінці для відображення статичного тексту.

Цих змін у розмітці файлів сторінок буде достатньо для нашої CMS. Перейдемо до програмування.

Для початку треба створити Базу Данних для нашого сайту.

Створимо базу данних WebDB у середовищі MS SQL. Додамо в неї таблицю PAGES з відповідними полями:
 

 use WebDB
create table PAGES (
Id int PRIMARY KEY IDENTITY (1,1),
Code varchar(32) NOT NULL, /* код сторінки */
PCode varchar(32), /* код батьківської сторінки */
AliasOf varchar(32), /* код сторінки з думблем контенту */
Title varchar(1024), /* текст заголовока */
Text varchar(max), /* текст сторінки */
Date datetime NOT NULL, /* дата створення сторінки */
ChildrenList varchar(10) DEFAULT 'list', /* способ відображення нащадків */
ShowOnlyChild numeric(1) NOT NULL DEFAULT '0', /* поле для вибору відображення */
SortNumber int NOT NULL, /* вага сортування */
SortBy varchar(10) NOT NULL DEFAULT 'date', /* метод сортування */
SortOrder varchar(10) NOT NULL DEFAULT 'desc', /* порядок сортування */

CONSTRAINT CK_ChildrenList CHECK (ChildrenList IN (
'list',
'map',
'links'
)),
CONSTRAINT CK_SortBy CHECK (SortBy IN (
'Date',
'SortNumber'
)),
CONSTRAINT CK_SortOrder CHECK (SortOrder IN (
'asc',
'desc'
)),
) 

Заповнимо її деякими даними

 use WebDB

insert into Pages Values
( 'blog', 'default', '', 'Блог', 'Главная страница блога', GetDate(), 'map', 1, 0, 'date', 'asc'),
( 'PageI1', 'blog', '', 'PageI1', 'Первая страница уровня 1', GetDate(),'list', 0, 11, 'date', 'desc'),
( 'PageI1J1', 'PageI1', '', 'PageI1J1', 'Первая страница уровня 2', GetDate(),'list', 0, 16, 'date', 'desc'),
( 'PageI1J2', 'PageI1', '', 'PageI1J2', 'Вторая страница уровня 2', GetDate(),'list', 0, 14, 'date', 'desc'),
( 'PageI1J3', 'PageI1', '', 'PageI1J3', 'Третяя страница уровня 2', GetDate(),'list', 0, 12, 'date', 'desc'),
( 'PageI2', 'blog', '', 'PageI2', 'Вторая страница уровня 1', GetDate(),'list', 0, 16, 'date', 'desc'),
( 'PageI2J1', 'PageI2', '', 'PageI2J1', 'Первая страница уровня 2', GetDate(),'list', 0, 12, 'date', 'desc'),
( 'PageI2J2', 'PageI2', 'PageI1J2', '', '', GetDate(), 'list', 0, 0, 'date', 'desc'),
( 'PageI2J3', 'PageI2', '', 'PageI2J3', 'Третяя страница уровня 2', GetDate(), 'list', 0, 0, 'date', 'desc'); 

База данних створена. Тепер додамо її до проекту:

  • Правою кнопкою миші клацаемо на головній директиві проекту натискаемо на пункт Add New Item:
  • Вибираэмо пункт ADO.NET Entity Data Model , змінюемо назву та клацаемо Add:
  • Вибираємо генерацію з бази данних та клацаємо Next:
  • Зі списку запропонованих вибираємо відповідну баду данних, Next:
  • Вибираємо генерування створенної нами таблиці, Finish:

База даних додана до проекту:

Додамо до проекту класс MyPage.cs для спрощення керування вмістом певної сторінки сайту. Текст класса:

 public class MyPage
{
#region PageFields
public int Id { get; set; }
public string Code { get; set; }
public string PCode { get; set; }
public string AliasOf { get; set; }
public string Title { get; set; }
public string Text { get; set; }
public DateTime Date { get; set; }
public string ChildrenList { get; set; }
public bool ShowOnlyCild { get; set; }
public int SortNumber { get; set; }
public string SortBy { get; set; }
public string SortOrder { get; set; }
public string MenuText { get; set; }
#endregion

public WebDBEntities WebDB = new WebDBEntities();
public PAGES CurPage;
public List<string> Road = new List<string>();

public MyPage(string pageCode)
{
var pgs = from p in WebDB.PAGES where p.Code == pageCode select p;
if (pgs.Count() != 0) CurPage = pgs.First();
else return;
Id = CurPage.Id;
Code = CurPage.Code;
PCode = CurPage.PCode;
AliasOf = CurPage.AliasOf;
Title = CurPage.Title;
Date = CurPage.Date;
SortBy = CurPage.SortBy;
SortOrder = CurPage.SortOrder;
SortNumber = CurPage.SortNumber;
ChildrenList = CurPage.ChildrenList;
ShowOnlyCild = CurPage.ShowOnlyChild != 0;
if (ShowOnlyCild){
MakeChildrenList(ChildrenList, Code);
Text = Macro(Text);
}
else Text = Macro(CurPage.Text);
FillRoad(Code);
MakeMenu("default");
}

#region Menu
public void FillRoad(string pCode)
{
var query = from p in WebDB.PAGES where p.Code == pCode select p;
if (query.Count() == 0) return;
var master = query.First();
if (master.PCode == "default"){
Road.Add(pCode); return;
}
FillRoad(master.PCode);
Road.Add(pCode);
}
public void MakeMenu(string code)
{
MenuText += "<ul>";
foreach (var page in
from p in WebDB.PAGES where p.PCode == code select p){
MenuText += "<li>" + "<a href=\"?page=" +
page.Code + "\">" +
page.Title + "</a>" + "</li>";
if (Road.Contains(page.Code)) MakeMenu(page.Code);
}
MenuText += "</ul>";
}
#endregion

#region ChildrenLists
private IEnumerable<PAGES> GetSortedPages(string code)
{
IEnumerable<PAGES> query;
if (SortBy == "Date")
if (SortOrder == "asc")
query = from p in WebDB.PAGES
where p.PCode == code orderby p.Date ascending select p;
else query = from p in WebDB.PAGES
where p.PCode == code orderby p.Date descending select p;
else
if (SortOrder == "asc")
query = from p in WebDB.PAGES
where p.PCode == code orderby p.SortNumber ascending select p;
else query = from p in WebDB.PAGES
where p.PCode == code orderby p.SortNumber descending select p;
return query;
}
public void MakeChildrenList(string type, string code)
{
if (type == "map") FillMap(code);
if (type == "links") FillLinks(code);
}
public void FillMap(string code)
{
Text += "<ul>";
foreach (var page in GetSortedPages(code)){
Text += "<li>" + "<a href=\"?page=" +
page.Code + "\">" +
page.Title + "</a>" + "</li>";
FillMap(page.Code);
}
Text += "</ul>";
}
public void FillLinks(string code)
{
foreach (var page in GetSortedPages(code)){
Text += "<a href=\"?page=" + page.Code + "\">" + page.Title + "</a>";
if (page.AliasOf != ""){
var q = from p in WebDB.PAGES
where p.Code == page.AliasOf select p;
if (q.Count() != 0) Text += q.First().Text;
}
Text += page.Text + "<br>";
}
}
#endregion
} 

Виділені регіони відповідають за:

  • PageFilelds – поля відповідні полям таблиці в базі данних з додатковими налаштуваннями для виводу меню.
  • Menu – генерація динамічного відображення меню сайта
  • ChildrenLists – редагування вмісту сторінки в залежності від способу відображення, вказанного в таблиці БД.

У цій роботі використана об'єктно-орієнтована технологія доступу до даних ADO.NET Entity Framework. Вона надає можливість взаємодії з об'єктами як за допомогою LINQ у вигляді LINQ to Entities, так і з використанням Entity SQL. WebDB – об`єкт типу WebDBEntities, стовренний для доступу до вмісту таблиць БД. В усіх запитах до БД використовувався цей об`єкт. Запити написанні на мові LINQ.

Об`єкт описаного вищу классу являе собою повноцінну сторінку сайту з відповідним контентом та включае в себе текст меню із згенерованними посиланнями.

Тепер залишаеться запрограмувати відображення цієї сторінки на нашому сайті, для цього перейдемо до редагування файлу коду сторінки, а саме Default.aspx.cs та внести до нього певні зміни:

 public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
FillPage(Request.QueryString["page"]);
}

public void FillPage(string queryString)
{
if (queryString == null) queryString = "blog";
var myPage = new MyPage(queryString);
if (myPage.Code == null) Response.Redirect("");
if (myPage.AliasOf != "") Response.Redirect("~/?page=" + myPage.AliasOf);
TitleLiteral.Text = myPage.Title;
ContentLiteral.Text = myPage.Text;
MenuLiteral.Text = myPage.MenuText;
}
} 

За допомогою методу Request.QueryString[“key”] ми оріентуємося яку сторінку ми повинні відобразити. За допомогою методу FillPage(), у я кому ми створюємо об`єкт типу MyPage, наповнюемо об`єкти Literal, що знаходяться у файлі розмітки сторінки, відповідним контентом. Пілся цього запускаемо проект, сторінки комплюються та ми маемо швидкодіючий сайт з власним контеном та навігаціею між сторінками.

загрузка...
Сторінки, близькі за змістом