начало работы с ASP.NET

; автор — Том ФитцМакен (Tom FitzMacken)

Для разработки новых веб-приложений рекомендуется использовать Razor Pages. Дополнительные сведения см. в статье Начало работы с Razor Pages.

Примечание

WebMatrix больше не рекомендуется в качестве интегрированной среды разработки для веб-страницы ASP.NET. Используйте Visual Studio или Visual Studio Code.

В этом руководстве и приложении представлен обзор веб-страницы ASP.NET (версии 2 или более поздней) и синтаксиса Razor, упрощенной платформы для создания динамических веб-сайтов. Он также представляет WebMatrix, инструмент для создания страниц и сайтов.

Уровень: новые возможности для веб-страницы ASP.NET.
Предполагается, что навыки: HTML, базовые каскадные таблицы стилей (CSS).

Что вы узнаете в первом руководстве по набору:

• Что такое веб-страницы ASP.NET технология и для чего она предназначена.
• Что такое WebMatrix.
• Как установить все.
• Создание веб-сайта с помощью WebMatrix.

Рассмотренные функции и технологии:

• установщик веб-платформы Майкрософт.
• Webmatrix.
• Страницы .cshtml

Майк Поуп первоначально написал это руководство. Том FitzMacken обновил его для Microsoft WebMatrix 3.

Версии программного обеспечения, используемые в этом руководстве

• веб-страницы ASP.NET (Razor) 2
• WebMatrix 3

Что вы должны знать?

Предполагается, что вы знакомы со следующими сведениями:

• HTML. Глубокие знания не требуются. Мы не будем объяснять HTML, но мы также не используем ничего сложного. Мы предоставим ссылки на учебники по HTML, в которых мы считаем их полезными.
• Каскадные таблицы стилей (CSS). То же, что и в HTML.
• Основные идеи для баз данных. Если вы использовали электронную таблицу для данных, а также отсортировали и отфильтровали данные, это уровень знаний, который мы обычно предполагаем для работы с этим набором учебников.

Мы также предполагаем, что вы заинтересованы в изучении базового программирования. веб-страницы ASP.NET использовать язык программирования C#. Вам не нужно иметь никакого образования в программировании, просто интерес к нему. Если вы когда-либо писали javaScript на веб-странице ранее, у вас есть много фона.

Обратите внимание, что если вы знакомы с программированием, возможно, вы обнаружите, что этот набор учебника изначально движется медленно, пока мы работаем с новыми программистами. По мере того как мы пройдем первые несколько учебников, однако, будет меньше базовых программирования, чтобы объяснить, и все будет двигаться вместе с более быстрым клипом.

Что вам нужно?

Вам потребуется следующее.

• Компьютер под управлением Windows 8, Windows 7, Windows Server 2008 или Windows Server 2012.
• Динамическое подключение к Интернету.
• Привилегии администратора (необходимые для процесса установки).

Что такое веб-страницы ASP.NET?

веб-страницы ASP.NET — это платформа, которую можно использовать для создания динамических веб-страниц. Простая веб-страница HTML является статической; Его содержимое определяется фиксированной разметкой HTML, которая находится на странице. Динамические страницы, подобные тем, которые вы создаете с помощью веб-страницы ASP.NET позволяют создавать содержимое страницы на лету с помощью кода.

Динамические страницы позволяют выполнять все виды действий. Вы можете попросить пользователя ввести данные с помощью формы, а затем изменить отображение страницы и ее внешний вид. Вы можете получить сведения от пользователя, сохранить их в базе данных, а затем перечислить их позже. Вы можете отправлять сообщения электронной почты с сайта. Вы можете взаимодействовать с другими службами в Интернете (например, службой сопоставления) и создавать страницы, объединяющие информацию из этих источников.

Что такое WebMatrix?

WebMatrix — это средство, объединяющее редактор веб-страниц, служебную программу базы данных, веб-сервер для тестирования страниц и функции для публикации веб-сайта в Интернете. WebMatrix предоставляется бесплатно, и его легко установить и использовать. (Он также подходит только для простых HTML-страниц, а также для других технологий, таких как PHP.)

Для работы с веб-страницы ASP.NET вам не нужно использовать WebMatrix. Страницы можно создавать с помощью текстового редактора, например, и тестировать страницы с помощью веб-сервера, к которому у вас есть доступ. Тем не менее, WebMatrix делает все это очень простым, поэтому в этих руководствах будет использоваться WebMatrix во всем.

Сведения об этих руководствах

Этот набор учебников содержит общие сведения о том, как использовать веб-страницы ASP.NET. В этом вводном наборе учебников содержится 9 учебников. Это часть серии наборов учебников, которые повещают вас от веб-страницы ASP.NET новичка до создания реальных, профессионально выглядящих веб-сайтов.

В этом первом наборе учебников основное внимание уделяется основам работы с веб-страницы ASP.NET. Когда все будет готово, вы можете работать с дополнительными наборами учебников, которые определяют, где это заканчивается, и которые более подробно изучают веб-страницы.

Мы намеренно идем легко на подробные объяснения. И всякий раз, когда мы показываем что-то, для этого набора учебников мы всегда выбираем способ, который, по нашему мнению, проще всего понять. Более поздние наборы учебников содержат более подробные сведения и демонстрируют более эффективные или гибкие подходы (а также более интересные). Но эти учебники требуют, чтобы вы в первую очередь поняли основы.

Набор учебников, который вы только что начали, охватывает следующие функции веб-страницы ASP.NET:

• Введение и получение всех установленных компонентов. (Это описано в учебнике, которое вы читаете.)
• Основы программирования веб-страницы ASP.NET.
• Создание базы данных.
• Создание и обработка формы ввода пользователя.
• Добавление, обновление и удаление данных в базе данных.

Что вы создадите?

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

Ниже приведена страница, на которой можно добавить на сайт новые сведения о фильмах:

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

См. это приложение, работающее в Azure

Хотите, чтобы готовый сайт работал как динамическое веб-приложение? Вы можете развернуть полную версию приложения в учетной записи Azure, просто нажав следующую кнопку.

Для развертывания этого решения в Azure требуется учетная запись Azure. Если у вас еще нет учетной записи, доступны следующие варианты:

• Откройте учетную запись Azure бесплатно . Вы получаете кредиты, которые можно использовать для использования платных служб Azure, и даже после их использования вы можете сохранить учетную запись и использовать бесплатные службы Azure.
• Активация преимуществ для подписчиков MSDN . Ваша подписка MSDN ежемесячно предоставляет вам кредиты, которые можно использовать для платных служб Azure.

Установка всего

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

Чтобы использовать веб-страницы, у вас должна быть установлена по крайней мере Windows XP с пакетом обновления 3 (SP3) или Windows Server 2008 или более поздней версии.

На странице Веб-страницы веб-сайта ASP.NET нажмите кнопку Установить.

Перед установкой WebMatrix вам будет предложено принять условия лицензии и заявление о конфиденциальности.

Нажмите кнопку Выполнить , чтобы начать установку. (Если вы хотите сохранить установщик, нажмите кнопку Сохранить , а затем запустите установщик из папки, в которой он сохранен.)

Откроется установщик веб-платформы, готовый к установке WebMatrix. Нажмите кнопку Установить.

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

Привет, WebMatrix

После этого процесс установки может запустить WebMatrix автоматически. Если это не так, в Windows в меню Пуск запустите Microsoft WebMatrix.

При первом запуске WebMatrix вам предоставляется возможность войти в Microsoft Azure с помощью учетной записи Майкрософт. Выполнив вход, вы получите 10 бесплатных веб-приложений через Azure. Эти бесплатные веб-приложения предоставляют удобный способ тестирования приложений. Если у вас еще нет учетной записи Azure, но у вас есть подписка MSDN, вы можете активировать преимущества подписки MSDN. В противном случае вы можете создать бесплатную пробную учетную запись всего за пару минут. Дополнительные сведения см. в разделе Бесплатная пробная версия Azure.

Для продолжения работы с этим руководством не нужно выполнять вход прямо сейчас. Если вы не войдете в систему сейчас, вы по-прежнему сможете выполнить вход позже. В последнем разделе этой серии руководств рассматривается развертывание веб-сайта в Azure. Поэтому для завершения этой статьи вам потребуется войти в систему.

На этом этапе войдите с помощью учетной записи Майкрософт или выберите Not Now (Не сейчас ) в правом нижнем углу.

Для начала создайте пустой веб-сайт и добавите страницу. В одном из следующих руководств в этом наборе вы будете использовать один из встроенных шаблонов веб-сайтов.

В окне запуска нажмите кнопку Создать.

Шаблоны — это предварительно созданные файлы и страницы для различных типов веб-сайтов. Чтобы просмотреть все шаблоны, доступные по умолчанию, выберите параметр Коллекция шаблонов.

В окне быстрого запуска выберите Пустой сайт в группе ASP.NET и присвойте новому сайту имя WebPagesMovies.

Щелкните Далее.

Если вы вошли в свою учетную запись Майкрософт, вам будет предоставлена возможность создать сайт в Azure. В зависимости от имени сайта предлагается имя по умолчанию WebPagesMovies.azurewebsites.net ; Однако восклицательный знак указывает, что это имя недоступно в Windows Azure. Для простоты выберите Пропустить , чтобы обойти создание веб-сайта в Azure прямо сейчас. Далее в этой серии мы опубликуем сайт в Azure.

WebMatrix создает и открывает сайт:

В верхней части находится панель быстрого доступа и лента. В левом нижнем углу отображается селектор рабочей области, где выполняется переключение между задачами (сайт, файлы, базы данных, отчеты). Справа находится область содержимого для редактора и отчетов. А внизу вы иногда увидите панель уведомлений для сообщений.

Вы узнаете больше о WebMatrix и его функциях в рамках этих учебников.

Создание веб-страницы

Чтобы ознакомиться с WebMatrix и веб-страницы ASP.NET, создайте простую страницу.

В селекторе рабочей области выберите рабочую область Файлы . Эта рабочая область позволяет работать с файлами и папками. В левой области показана структура файлов сайта. Лента изменится для отображения задач, связанных с файлами.

На ленте щелкните стрелку в разделе Создать и выберите пункт Создать файл.

WebMatrix отображает список типов файлов. Выберите CSHTML и в поле Имя введите "HelloWorld". Страница CSHTML — это страница веб-страницы ASP.NET.

Нажмите кнопку ОК.

WebMatrix создает страницу и открывает ее в редакторе.

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

@{ 

}

Это нужно для добавления кода, как вы увидите вскоре.

Обратите внимание, что различные части страницы — имена элементов, атрибуты и текст, а также блок вверху — имеют разные цвета. Это называется выделением синтаксиса и упрощает сохранение ясности. Это одна из функций, которая упрощает работу с веб-страницами в WebMatrix.

Добавьте содержимое для элементов и <body> , <head> как показано в следующем примере. (При желании можно просто скопировать следующий блок и заменить всю существующую страницу этим кодом.)

@{

}

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Hello World Page</title>
    </head>
    <body>
        <h1>Hello World Page</h1>
        <p>Hello World!</p>
    </body>
</html>

На панели быстрого доступа или в меню Файл нажмите кнопку Сохранить.

Тестирование страницы

В рабочей области Файлы щелкните правой кнопкой мыши страницу HelloWorld.cshtml и выберите команду Запустить в браузере.

WebMatrix запускает встроенный веб-сервер (IIS Express), который можно использовать для тестирования страниц на компьютере. (Без IIS Express в WebMatrix необходимо опубликовать страницу на веб-сервере, прежде чем вы сможете протестировать ее.) Страница отображается в браузере по умолчанию.

Обратите внимание, что при тестировании страницы в WebMatrix URL-адрес в браузере выглядит примерно так http://localhost:33651/HelloWorld.cshtml. : имя localhost ссылается на локальный сервер, а это означает, что страница обслуживается веб-сервером, который находится на вашем компьютере. Как уже отмечалось, WebMatrix включает программу веб-сервера с именем IIS Express, которая выполняется при запуске страницы.

Номер после localhost (например, localhost:33651) относится к номеру порта на компьютере. Это номер "канала", который IIS Express использует для этого конкретного веб-сайта. Номер порта выбирается случайным образом из диапазона от 1024 до 65536 при создании сайта, и он отличается для каждого создаваемого сайта. (При тестировании собственного сайта номер порта почти наверняка будет отличаться от номера 33561.) Используя разные порты для каждого веб-сайта, IIS Express может прямо указать, к какому из ваших сайтов он говорит.

Позже при публикации сайта на общедоступном веб-сервере в URL-адресе больше не отображается localhost . На этом этапе вы увидите более типичный URL-адрес, например http://myhostingsite/mywebsite/HelloWorld.cshtml или любой другой страницы. Вы узнаете больше о публикации сайта далее в этой серии руководств.

Добавление кода Server-Side

Закройте браузер и вернитесь на страницу в WebMatrix.

Добавьте строку в блок кода, чтобы она выглядела следующим образом:

@{
   var currentDateTime = DateTime.Now;
}

Это немного кода Razor. Вероятно, ясно, что он получает текущие дату и время и помещает это значение в переменную с именем currentDateTime. Дополнительные сведения о синтаксисе Razor см. в следующем руководстве.

В тексте страницы после <p>Hello World!</p> элемента добавьте следующее:

<p>Right now it's @currentDateTime</p>

Этот код получает значение, введенное в currentDateTime переменную вверху, и вставляет его в разметку страницы. Символ @ помечает код веб-страницы ASP.NET на странице.

Запустите страницу еще раз (WebMatrix сохраняет изменения перед запуском страницы). На этот раз на странице отображаются дата и время.

Подождите несколько секунд, а затем обновите страницу в браузере. Обновлено отображение даты и времени.

В браузере просмотрите источник страницы. Оно выглядит следующим образом:

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Hello World Page</title>
    </head>
    <body>
        <h1>Hello World Page</h1>
        <p>Hello World!</p>
        <p>Right now it's 1/18/2012 2:49:50 PM</p>
    </body>
</html>

Обратите внимание, что @{ } блока в верхней части нет. Кроме того, обратите внимание, что на экране даты и времени отображается фактическая строка символов (1/18/2012 2:49:50 PM или любого другого), не @currentDateTime похожая на страницу .cshtml . Здесь произошло то, что при запуске страницы ASP.NET обработал весь код (в данном случае очень мало), помеченный .@ Код создает выходные данные, и эти выходные данные были вставлены на страницу.

Это то, что веб-страницы ASP.NET о

Когда вы читаете, что веб-страницы ASP.NET создает динамическое веб-содержимое, вы видите эту идею. Только что созданная страница содержит ту же HTML-разметку, которую вы видели ранее. Он также может содержать код, который может выполнять все виды задач. В этом примере выполняется тривиальная задача получения текущей даты и времени. Как вы видели, вы можете перемежать код с HTML для получения выходных данных на странице. Когда кто-то запрашивает страницу .cshtml в браузере, ASP.NET обрабатывает страницу, пока она все еще находится в руках веб-сервера. ASP.NET вставляет выходные данные кода (при наличии) на страницу в формате HTML. После завершения обработки кода ASP.NET отправляет результирующая страница в браузер. Все, что браузер когда-либо получает, это HTML. Вот схема:

Идея проста, но есть много интересных задач, которые может выполнять код, и есть много интересных способов динамического добавления HTML-содержимого на страницу. Кроме того, ASP.NET cshtml-страницы , как и любая HTML-страница, также могут содержать код, который выполняется в браузере (код JavaScript и jQuery). Вы изучите все эти аспекты в этом наборе учебников и в последующих.

Ближайшие к следующему

В следующем руководстве этой серии вы узнаете, веб-страницы ASP.NET программирование немного больше.

Дополнительные ресурсы

Создание веб-сайта ASP.NET с нуля. Это руководство, в частности, об использовании WebMatrix (не веб-страницы ASP.NET). В нем подробно рассматриваются некоторые дополнительные функции WebMatrix, которые не рассматриваются в этом наборе учебников.

Вперед