Сайт на ASP.NET для начинающих — первые шаги

ASP.NET — платформа от Microsoft для создания и развёртывания сайтов, веб-приложений и сервисов. По данным SimilarTech, около 2 000 000 сайтов используют эту платформу. В этой статье описаны первые шаги создания сайта на ASP.NET.

Для разработки будем использовать Visual Studio.

Создание ASP.NET проекта

Откройте Visual Studio Installer и нажмите «Изменить» на нужной среде разработки. Перед вами откроется список всех нагрузок. В категории Веб-разработка и облако нужно включить ASP.NET и разработка веб-приложений. После этого нажмите на кнопку Изменить в нижнем правом углу и дождитесь установки нагрузки.

Перейдите в Visual Studio и создайте новый проект, выбрав тип Веб-приложение ASP.NET (.NET Framework). Потом нужно выбрать необходимую модель приложения:

• Веб-формы — можно легко создавать динамические веб-сайты, используя сотни элементов управления и компонентов.
• MVC — эффективный, основанный на шаблонах способ создания динамических сайтов. Предоставляет полный контроль над разметкой для гибкой разработки.
• Веб-API — позволяет легко создавать HTTP службы для широкого диапазона клиентов. Идеальная платформа для сборки REST-приложений.
• Приложение SPA — одностраничное веб-приложение, которое загружает HTML-страницу и динамически обновляет её при взаимодействии с пользователем.

Выберете модель Веб-формы и завершите создание проекта.

Внутренняя структура проекта

В проекте сайта уже загружены некоторые библиотеки, необходимые для комфортного старта: CSS-фреймворк Bootstrap, JS-фреймворк jQuery, MSAjax и некоторые другие.

После создания тут уже присутствуют 3 страницы: Default, About и Contact. Каждая страница состоит из 3 файлов:

• Page.aspx — содержит в себе HTML-разметку конкретной страницы;
• Page.aspx.cs — отвечает за логику работы конкретной страницы;
• Page.aspx.designer.cs — является мостом между Page.aspx и Page.aspx.cs.

Вот так выглядит About.aspx:

			<%@ Page Title="About" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" 
CodeBehind="About.aspx.cs" Inherits="TutWebApplication.About" %>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
    <h2><%: Title %>.</h2>
    <h3>Your application description page.</h3>
    <p>Use this area to provide additional information.</p>
</asp:Content>
		

Как видно, этот файл содержит лишь контент конкретной страницы. Вся общая разметка находится в Site.Master и Site.Mobile.Master.

Чтобы проверить и запустить проект, нажмите IIS Express или же традиционную клавишу F5. После этого все файлы скомпилируются и сайт откроется по адресу http://localhost:4400 в браузере по умолчанию. Номер порта может отличаться.

Создание веб-формы

Чтобы создать новую страницу, в контекстном меню проекта выберите Добавить→Веб-форма. После этого автоматически сгенерируются и заполнятся все 3 файла.

Примечание Веб-формы можно создавать с помощью встроенного графического конструктора веб-форм. Что бы открыть его, в контекстном меню нужной веб-формы нажмите на Открыть в конструкторе. Все необходимые элементы можно достать из Панели Элементов (Вид→Панель элементов). Но если вам нужна максимальная гибкость и функциональность — лучше разрабатывать формы вручную в коде.

Потом можно добавить ссылку на новую страницу в панель навигации в Site.Master:

			<li><a runat="server" href="~/News">Новости</a></li>
		

Примечание Обратите внимание, что в ссылке указывается название страницы без расширения.

Если вы откроете новую страницу, то заметите, что вся общая вёрстка отсутствует. Это потому, что в новой странице не подвязывается разметка из Site.Master. Чтобы исправить это, нужно в новой форме вместо сгенерированной вёрстки вставить это:

			<%@ Page Title="News" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" 
CodeBehind="News.aspx.cs" Inherits="WebApplication.News" %>
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
    <!--Тут должен быть контент вашей страницы-->
</asp:Content>
		

Во всех упоминаниях нужно заменить News на название вашей страницы. Теперь форма будет отображаться вместе с общей вёрсткой.

Для интеграции значений в вёрстку из aspx.cs используют специальный тег <%: %>:

			<p><%:SomeVar%></p>
		

В этом случае SomeVar должен быть публичным полем. Если нужно выполнить какой-либо код для присвоения значения этой переменной, то выполнить его нужно в сгенерированном методе Page_Load.

Получение значений параметров из URL производится через статический класс Request, в котором хранятся и прочие данные о запросе:

			int id = int.Parse(Request.QueryString["id"]);
		

Изучить все возможности веб-форм можно в официальной документации.

Движок представлений Razor

Razor позволяет делать вставки C# кода прямо в HTML разметке. Для этого нужно создать отдельный файл .cshtml (Контекстное меню проекта→Добавить→Страница представления MVC 5 (Razor)). Разметка в этом файле ничем не отличается от обычной HTML-вёрстки.

По умолчанию языком Razor является HTML. Для перехода с вёрстки на C# используют символ @, а сам блок кода помещается в фигурные скобки.

			<p>Тут идёт ваша вёрстка</p>
@{ 
    // Тут идёт код на C#
    SomeMethod();
}
<p>Тут снова идёт вёрстка</p>
		

В Razor также можно выполнять неявные выражения прямо в HTML разметке:

			<p>@DateTime.Now</p>
		

Тут есть привычные для ЯП конструкции, которые могут значительно облегчить вёрстку. Вот некоторые из них:

			@for (var i = 0; i < people.Length; i++)
{
    var person = people[i];
    <p>Имя: @person.Name</p>
}
		

			@if (value % 2 == 0)
{
    <p>Это значение чётное.</p>
}
else if (value >= 1337)
{
    <p>Это значение нечётное и больше либо равно 1337.</p>
}
else
{
    <p>Это значение нечётное и меньше, чем 1337.</p>
}
		

			@try
{
    throw new InvalidOperationException("Вы сделали что-то не то.");
}
catch (Exception ex)
{
    <p>Сообщение исключения: @ex.Message</p>
}
finally
{
    <p>Итоговый блок.</p>
}
		

Также всегда будет полезным просмотр open source проектов. Там вы найдёте не только лучшие практики по ASP.NET, но и просто решение популярных задач.