Знакомство с веб-страницы ASP.NET — основы программирования
В этом руководстве вы узнаете, как программировать в веб-страницы ASP.NET с помощью синтаксиса Razor.
Из этого руководства вы узнаете, как выполнять такие задачи:
- Базовый синтаксис Razor, используемый для программирования в веб-страницы ASP.NET.
- Некоторый базовый C#, который является языком программирования, который вы будете использовать.
- Некоторые основные понятия программирования для веб-страниц.
- Установка пакетов (компонентов, содержащих предварительно созданный код) для использования с сайтом.
- Как использовать вспомогательные средства для выполнения распространенных задач программирования.
Рассматриваются функции и технологии:
- NuGet и диспетчер пакетов.
- Помощник
Gravatar.
Это руководство в основном является упражнением, введя вас в синтаксис программирования, который вы будете использовать для веб-страницы ASP.NET. Вы узнаете о синтаксисе Razor и коде, написанном на языке программирования C#. Вы получили представление об этом синтаксисе в предыдущем руководстве; В этом руководстве мы объясним синтаксис больше.
Мы обещаем, что это руководство включает в себя большинство программ, которые вы увидите в одном руководстве, и что это единственный учебник, который предназначен только для программирования. В оставшихся руководствах в этом наборе вы на самом деле создадите страницы, которые делают интересные вещи.
Вы также узнаете о помощниках. Вспомогательный компонент — это пакетный фрагмент кода, который можно добавить на страницу. Помощник выполняет работу для вас, что в противном случае может быть емким или сложным, чтобы сделать вручную.
Создание страницы для воспроизведения с Razor
В этом разделе вы будете играть немного с Razor, чтобы получить представление о базовом синтаксисе.
Запустите WebMatrix, если он еще не запущен. Вы будете использовать веб-сайт, созданный в предыдущем руководстве (начало работы с веб-страницами). Чтобы повторно открыть его, щелкните "Мои сайты" и выберите WebPageMovies:
Выберите рабочую область "Файлы ".
На ленте нажмите кнопку "Создать" , чтобы создать страницу. Выберите CSHTML и назовите новую страницу TestRazor.cshtml.
Щелкните OK.
Скопируйте следующий код в файл, полностью заменив то, что уже есть.
Примечание.
При копировании кода или разметки из примеров на страницу отступ и выравнивание может быть не так же, как и в руководстве. Отступы и выравнивание не влияют на то, как выполняется код, хотя.
@{
// Working with numbers
var a = 4;
var b = 5;
var theSum = a + b;
// Working with characters (strings)
var technology = "ASP.NET";
var product ="Web Pages";
// Working with objects
var rightNow = DateTime.Now;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Testing Razor Syntax</title>
<meta charset="utf-8" />
<style>
body {font-family:Verdana; margin-left:50px; margin-top:50px;}
div {border: 1px solid black; width:50%; margin:1.2em;padding:1em;}
span.bright {color:red;}
</style>
</head>
<body>
<h1>Testing Razor Syntax</h1>
<form method="post">
<div>
<p>The value of <em>a</em> is @a. The value of <em>b</em> is @b.
<p>The sum of <em>a</em> and <em>b</em> is <strong>@theSum</strong>.</p>
<p>The product of <em>a</em> and <em>b</em> is <strong>@(a*b)</strong>.</p>
</div>
<div>
<p>The technology is @technology, and the product is @product.</p>
<p>Together they are <span class="bright">@(technology + " " + product)</span></p>
</div>
<div>
<p>The current date and time is: @rightNow</p>
<p>The URL of the current page is<br/><br/><code>@Request.Url</code></p>
</div>
</form>
</body>
</html>
Изучение страницы "Пример"
Большая часть того, что вы видите, является обычным HTML. Однако в верхней части этого блока кода:
@{
// Working with numbers.
var a = 4;
var b = 5;
var theSum = a + b;
// Working with characters (strings).
var technology = "ASP.NET";
var product ="Web Pages";
// Working with objects.
var rightNow = DateTime.Now;
}
Обратите внимание на следующие сведения об этом блоке кода:
- Символ @сообщает ASP.NET, что ниже приведен код Razor, а не HTML. ASP.NET будет обрабатывать все после символа @в виде кода, пока он не будет выполнен в некоторых HTML снова. (В этом случае это ! < Элемент DOCTYPE> .
- Фигурные скобки ({ и }) заключают блок кода Razor, если код имеет несколько строк. Фигурные скобки сообщают ASP.NET, где начинается и заканчивается код для этого блока.
- Символы // помечают комментарий, т. е. часть кода, который не будет выполняться.
- Каждая инструкция должна заканчиваться точкой с запятой (;). (Но не комментарии, хотя.)
- Значения можно хранить в переменных, которые создаются (объявляют) с помощью var ключевого слова. При создании переменной вы присваиваете ему имя, которое может включать буквы, цифры и подчеркивание (_). Имена переменных не могут начинаться с числа и не могут использовать имя ключевого слова программирования (например var).
- Строки символов (например, "ASP.NET" и "Веб-страницы") заключены в кавычки. (Они должны быть двойными кавычками.) Числа не находятся в кавычках.
- Пробелы вне кавычки не имеют значения. Разрывы строк в основном не имеют значения; Исключением является то, что нельзя разделить строку в кавычки по строкам. Отступы и выравнивание не имеют значения.
То, что не очевидно в этом примере, заключается в том, что весь код учитывает регистр. Это означает, что переменная TheSum является переменной, отличной от переменных, которые могут называться theSum или thesum. Аналогичным образом, var является ключевым словом, но Var не является.
Объекты и свойства и методы
Затем есть выражение DateTime.Now. В простых терминах DateTime — это объект. Объект — это вещь, с помощью которую можно программировать : страницу, текстовое поле, файл, изображение, веб-запрос, сообщение электронной почты, запись клиента и т. д. Объекты имеют одно или несколько свойств , описывающих их характеристики. Объект текстового поля имеет свойство Text (среди прочего), объект запроса имеет свойство URL-адреса (и другие), сообщение электронной почты имеет свойство From и свойство To и т. д. Объекты также имеют методы , которые являются "командами", которые они могут выполнять. Вы будете работать с объектами много.
Как видно из примера, DateTime — это объект, который позволяет программе дат и времени. Он имеет свойство Now, которое возвращает текущую дату и время.
Использование кода для отображения разметки на странице
В тексте страницы обратите внимание на следующее:
<div>
<p>The value of <em>a</em> is @a. The value of <em>b</em> is @b.
<p>The sum of <em>a</em> and <em>b</em> is <strong>@theSum</strong>.</p>
<p>The product of <em>a</em> and <em>b</em> is <strong>@(a*b)</strong>.</p>
</div>
<div>
<p>The technology is @technology, and the product is @product.</p>
<p>Together they are <span class="bright">@(technology + " " + product)</span></p>
</div>
<div>
<p>The current date and time is: @rightNow</p>
<p>The URL of the current page is<br/><br/><code>@Request.Url</code></p>
</div>
Опять же, символ @сообщает ASP.NET, что следует за кодом, а не HTML. В разметке можно добавить @, за которым следует выражение кода, и ASP.NET отрисовывает значение этого выражения прямо в этой точке. В примере @a будет отображаться любое значение переменной с именем a, @product отрисовывает все, что находится в переменной с именем продукта, и т. д.
Вы не ограничены переменными, хотя. В нескольких случаях символ @предшествует выражению:
- @(a*b) отрисовывает продукт любого из переменных a и b. (Оператор * означает умножение.)
- @(technology + " " + product) отображает значения в технологии переменных и продукта после объединения их и добавления пространства между ними. Оператор (+) для объединения строк совпадает с оператором для добавления чисел. ASP.NET обычно можно определить, работаете ли вы с числами или строками и выполняете правильные действия с оператором +.
- @Request.Url отрисовывает свойство Url объекта Request. Объект Request содержит сведения о текущем запросе из браузера, и, конечно, свойство URL-адреса содержит URL-адрес текущего запроса.
В этом примере также показано, что вы можете работать различными способами. Вы можете выполнить вычисления в блоке кода в верхней части, поместить результаты в переменную, а затем отобразить переменную в разметке. Или вы можете выполнять вычисления в выражении прямо в разметке. Используемый подход зависит от того, что вы делаете, и, в некоторой степени, от вашего собственного предпочтения.
Просмотр кода в действии
Щелкните правой кнопкой мыши имя файла и нажмите кнопку "Запустить" в браузере. Вы увидите страницу в браузере со всеми значениями и выражениями, разрешенными на странице.
Просмотрите источник в браузере.
Как вы ожидаете из вашего опыта в предыдущем руководстве, ни один из кода Razor не находится на странице. Все, что вы видите, являются фактическими значениями отображения. При запуске страницы вы фактически выполняете запрос на веб-сервер, встроенный в WebMatrix. При получении запроса ASP.NET разрешает все значения и выражения и отображает их значения на странице. Затем она отправляет страницу в браузер.
Совет
Razor и C#
До сих пор мы сказали, что вы работаете с синтаксисом Razor. Это правда, но это не полная история. Фактический язык программирования, который вы используете, называется C#. C# был создан корпорацией Майкрософт более десяти лет назад и стал одним из основных языков программирования для создания приложений Windows. Все правила, которые вы видели о том, как назвать переменную и как создавать инструкции и т. д., фактически являются всеми правилами языка C#.
Razor относится к небольшому набору соглашений о внедрении этого кода на страницу. Например, соглашение об использовании @ для пометки кода на странице и использование @{ } для внедрения блока кода является аспектом Razor страницы. Вспомогательные также считаются частью Razor. Синтаксис Razor используется в большей части мест, чем только в веб-страницы ASP.NET. (Например, он также используется в представлениях MVC ASP.NET.)
Мы упоминаем это, потому что если вы ищете информацию о программировании веб-страницы ASP.NET, вы найдете много ссылок на Razor. Тем не менее, многие из этих ссылок не применяются к тому, что вы делаете, и, следовательно, может быть запутан. И на самом деле многие из ваших вопросов программирования действительно будут работать с C# или работать с ASP.NET. Так что если вы ищете специально информацию о Razor, вы можете не найти нужные ответы.
Добавление определенной условной логики
Одна из отличных функций использования кода на странице заключается в том, что вы можете изменить то, что происходит на основе различных условий. В этой части руководства вы будете работать с некоторыми способами изменения того, что отображается на странице.
Пример будет простым и несколько выдуманные, чтобы мы могли сосредоточиться на условной логике. Откроется страница, которую вы создадите:
- Отображение разного текста на странице в зависимости от того, отображается ли страница при первом отображении страницы или при нажатии кнопки для отправки страницы. Это будет первый условный тест.
- Отображение сообщения только в том случае, если определенное значение передается в строке запроса URL-адреса (http://...? show=true). Это будет второй условный тест.
В WebMatrix создайте страницу и назовите ее TestRazorPart2.cshtml. (На ленте щелкните Новое, выберите CSHTML, присвойте файлу имя и нажмите кнопку "ОК".)
Замените содержимое этой страницы следующим образом:
@{
var message = "This is the first time you've requested the page.";
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Testing Razor Syntax - Part 2</title>
<meta charset="utf-8" />
<style>
body {font-family:Verdana; margin-left:50px; margin-top:50px;}
div {border: 1px solid black; width:50%; margin:1.2em;padding:1em;}
</style>
</head>
<body>
<h1>Testing Razor Syntax - Part 2</h1>
<form method="post">
<div>
<p>@message</p>
<p><input type="submit" value="Submit" /></p>
</div>
</form>
</body>
</html>
Блок кода в верхней части инициализирует переменную именованного сообщения с некоторым текстом. В тексте страницы содержимое переменной сообщения отображается внутри <элемента p> . Разметка также содержит входной <> элемент для создания кнопки "Отправить".
Запустите страницу, чтобы узнать, как она работает сейчас. Сейчас это в основном статическую страницу, даже если нажать кнопку "Отправить ".
Вернитесь в WebMatrix. В блоке кода добавьте следующий выделенный код после строки, которая инициализирует сообщение:
@{
var message = "This is the first time you've requested the page.";
if(IsPost) {
message = "Now you've submitted the page.";
}
}
Блок if { }
То, что вы только что добавили, было условием. В коде условие имеет такую структуру:
if(some condition){
One or more statements here that run if the condition is true;
}
Условие для тестирования находится в скобках. Оно должно быть значением или выражением, возвращающим значение true или false. Если условие имеет значение true, ASP.NET запускает инструкцию или операторы, находящиеся внутри фигурных скобок. (Это часть логики if-then .) Если условие равно false, блок кода пропускается.
Ниже приведены несколько примеров условий, которые можно проверить в инструкции if:
if(currentValue > 12) { ... }
if(dueDate <= DateTime.Today) { ... }
if(IsDone == true) { ... }
if(IsPost) { ... }
if(!IsPost) { ... }
if(a != 0) { ... }
if(fileProcessingIsDone != true && displayMessage == false) { ... }
Можно протестировать переменные по значениям или выражениям с помощью логического оператора или оператора сравнения: равно (=), больше (=), меньше< (>), меньше (), больше или равно (>=) и меньше или равно (<=). Оператор != означает, что значение не равно — например, if(a != 0) означает , что значение не равно 0.
Примечание.
Убедитесь, что оператор сравнения для равно (==) не совпадает с =. Оператор = используется только для назначения значений (var a=2). Если вы смешите эти операторы вверх, вы либо получите ошибку, либо вы получите некоторые странные результаты.
Чтобы проверить, является ли что-то истинным, полный синтаксис имеет значение if(IsDone == true). Но вы также можете использовать ярлык if(IsDone). Если нет оператора сравнения, ASP.NET предполагает, что вы тестируете значение true.
! оператор само по себе означает логический NOT. Например, условие if(! IsPost) означает , что если IsPost не является истинным.
Условия можно объединить с помощью логического оператора AND (&>) или логического ИЛИ (|| оператора). Например, последнее из условий, указанных в предыдущих примерах, означает , что значение FileProcessingIsDone не имеет значения true AND displayMessage имеет значение false.
Другой блок
Одна последняя вещь о том, если блоки: за блоком может следовать другой блок. Другой блок полезен, поэтому необходимо выполнить другой код, если условие равно false. Вот простой пример.
var message = "";
if(errorOccurred == true)
{
message = "Sorry, an error occurred.";
}
else
{
message = "The process finished without errors!";
}
Вы увидите некоторые примеры в последующих руководствах в этой серии, где использование другого блока полезно.
Проверка того, является ли запрос отправкой (post)
Есть больше, но давайте вернемся к примеру, который имеет условие if(IsPost){ ... }. IsPost фактически является свойством текущей страницы. При первом запросе страницы IsPost возвращает значение false. Однако если вы нажимаете кнопку или отправляете страницу , то есть вы публикуете ее, — IsPost возвращает значение true. Поэтому IsPost позволяет определить, имеет ли вы дело с отправкой формы. (С точки зрения http-команд, если запрос является операцией GET, IsPost возвращает значение false. Если запрос является операцией POST, IsPost возвращает значение true.) В более позднем руководстве вы будете работать с входными формами, где этот тест становится особенно полезным.
Запустите страницу. Так как это первый раз, когда вы запрашиваете страницу, отображается сообщение "Это первый раз, когда вы запросили страницу". Эта строка — это значение, в которое вы инициализировали переменную сообщения. Существует тест if(IsPost), но он возвращает значение false в данный момент, поэтому код внутри блока не выполняется.
Нажмите кнопку "Отправить ". Страница снова запрашивается. Как и раньше, переменная сообщения имеет значение "Это первый раз..." Но на этот раз тест, если (IsPost) возвращает значение true, поэтому код внутри блока выполняется. Код изменяет значение переменной сообщения на другое значение, которое отображается в разметке.
Теперь добавьте условие if в разметку. Под элементом <p> , содержащим кнопку "Отправить ", добавьте следующую разметку:
@if(IsPost){
<p>You submitted the page at @DateTime.Now</p>
}
Вы добавляете код в разметку, поэтому необходимо начать с @. Затем в блоке кода есть тест, аналогичный тому, который вы добавили ранее в блоке кода. Внутри фигурных скобок, однако, вы добавляете обычный HTML - по крайней мере, это обычно, пока он не станет.@DateTime.Now Это еще один немного кода Razor, поэтому снова необходимо добавить @ перед ним.
Здесь можно добавить условия как в блоке кода вверху, так и в разметке. Если в тексте страницы используется условие if, строки внутри блока могут быть разметкой или кодом. В этом случае и как показано в любой момент, когда вы смешиваете разметку и код, необходимо использовать @, чтобы сделать его понятным для ASP.NET, где находится код.
Запустите страницу и нажмите кнопку "Отправить". На этот раз вы увидите не только другое сообщение при отправке ("Теперь вы отправили ..."), но вы увидите новое сообщение, которое выводит список дат и времени.
Тестирование значения строки запроса
Еще один тест. На этот раз вы добавите блок, который проверяет значение с именем show, которое может быть передано в строке запроса. (Как показано ниже: http://localhost:43097/TestRazorPart2.cshtml?show=true) Вы измените страницу таким образом, чтобы отображаемое сообщение ("Это первый раз ..." и т. д.) отображается только в том случае, если значение шоу имеет значение true.
В нижней части (но внутри) блок кода в верхней части страницы добавьте следующее:
var showMessage = false;
if(Request.QueryString["show"].AsBool() == true) {
showMessage = true;
}
Полный блок кода теперь выглядит следующим образом. (Помните, что при копировании кода на страницу отступ может выглядеть иначе. Но это не влияет на выполнение кода.)
@{
var message = "This is the first time you've requested the page.";
if(IsPost) {
message = "Now you've submitted the page.";
}
var showMessage = false;
if(Request.QueryString["show"].AsBool() == true) {
showMessage = true;
}
}
Новый код в блоке инициализирует переменную с именем showMessage значение false. Затем выполняется проверка поиска значения в строке запроса. При первом запросе страницы у него есть URL-адрес, подобный следующему:
http://localhost:43097/TestRazorPart2.cshtml
Код определяет, содержит ли URL-адрес переменную с именем в строке запроса, например эту версию URL-адреса:
http://localhost:43097/TestRazorPart2.cshtml?show=true
Сам тест смотрит на свойство QueryString объекта Request. Если строка запроса содержит элемент с именем show, а если этот элемент имеет значение true, блок выполняется и задает для переменной showMessage значение true.
Здесь есть трюк, как вы можете видеть. Как и имя, строка запроса — это строка. Однако можно проверить только значение true и false, если значение, которое вы тестируете, является логическим значением (true/false). Прежде чем протестировать значение отображаемой переменной в строке запроса, необходимо преобразовать ее в логическое значение. Это то, что делает метод AsBool— он принимает строку в качестве входных данных и преобразует ее в логическое значение. Очевидно, что если строка имеет значение true, метод AsBool преобразует это значение в true. Если значение строки является чем-либо другим, AsBool возвращает значение false.
Совет
Методы типов данных и as()
Мы только сказали до сих пор, что при создании переменной используется var ключевого слова. Это не вся история, хотя. Для управления значениями — для добавления чисел или сцепления строк или сравнения дат или проверки на значение true/false — C# должен работать с соответствующим внутренним представлением значения. C# обычно может определить, какое представление должно быть (то есть тип данных) на основе того, что вы делаете со значениями. И тогда, однако, это не может сделать. Если нет, необходимо явно определить, как C# должен представлять данные. Метод AsBool делает это — сообщает C# о том, что строковое значение true или false должно рассматриваться как логическое значение. Аналогичные методы существуют для представления строк, как и другие типы, например AsInt (рассматривать как целое число), AsDateTime (рассматривать как дату и время), AsFloat (рассматривать как число с плавающей запятой) и т. д. Если вы используете эти методы As( ), если C# не может представлять строковое значение, как запрошено, вы увидите ошибку.
В разметке страницы удалите или закомментируйте этот элемент (здесь отображается комментарий):
<!-- <p>@message</p> -->
Прямо в том месте, где вы удалили или закомментировали этот текст, добавьте следующее:
@if(showMessage) {
<p>@message</p>
}
Если тест говорит, что если переменная showMessage имеет значение true, отрисовка <элемента p> со значением переменной сообщения.
Сводка по условной логике
В случае, если вы не совсем уверены в том, что вы только что сделали, вот сводка.
- Переменная сообщения инициализирована в строку по умолчанию ("Это первый раз..."
- Если запрос страницы является результатом отправки (публикации), значение сообщения изменяется на "Теперь вы отправили ..."
- Переменная showMessage инициализируется в false.
- Если строка запроса содержит ?show=true, переменная showMessage имеет значение true.
- В разметке, если showMessage имеет значение true, <отрисовывается p-элемент> , показывающий значение сообщения. (Если showMessage имеет значение false, то в разметке ничего не отображается.)
- В разметке, если запрос является записью, <элемент p> отображается, отображающий дату и время.
Запустите страницу. Сообщение отсутствует, так как showMessage имеет значение false, поэтому в разметке теста if(showMessage) возвращается значение false.
Щелкните Отправить. Вы видите дату и время, но по-прежнему нет сообщения.
В браузере перейдите в поле URL-адреса и добавьте в конец URL-адреса следующее: ?show=true, а затем нажмите клавишу ВВОД.
Страница отображается снова. (Так как вы изменили URL-адрес, это новый запрос, а не отправка.) Нажмите кнопку "Отправить " еще раз. Сообщение отображается снова, как и дата и время.
В URL-адресе измените ?show=true на ?show=false и нажмите клавишу ВВОД. Отправьте страницу еще раз. Страница возвращается к началу работы — сообщение не отображается.
Как отмечалось ранее, логика этого примера немного задумана. Тем не менее, если вы собираетесь прийти во многих ваших страницах, и это займет одну или несколько форм, которые вы видели здесь.
Установка вспомогательного средства (отображение образа Gravatar)
Некоторые задачи, которые люди часто хотят делать на веб-страницах, требуют большого количества кода или требуют дополнительных знаний. Примеры: отображение диаграммы для данных; поместите кнопку "Нравится" Facebook на странице; отправка электронной почты с веб-сайта; обрезка или изменение размера изображений; использование PayPal для вашего сайта. Чтобы упростить эти действия, веб-страницы ASP.NET позволяет использовать вспомогательные средства. Вспомогательные компоненты — это компоненты, устанавливаемые для сайта, и это позволяет выполнять типичные задачи с помощью всего нескольких строк кода Razor.
веб-страницы ASP.NET имеет несколько вспомогательных встроенных. Однако многие вспомогательные средства доступны в пакетах (надстройках), предоставляемых с помощью диспетчера пакетов NuGet. NuGet позволяет выбрать пакет для установки, а затем заботиться обо всех деталях установки.
В этой части руководства вы установите вспомогательный элемент, который позволяет отображать изображение Gravatar ("глобально распознаваемого аватара"). Вы научитесь двумя вещами. Одно из способов поиска и установки вспомогательного средства. Вы также узнаете, как помощник упрощает выполнение чего-то, что вам в противном случае нужно сделать с помощью большого количества кода, который вам придется писать самостоятельно.
Вы можете зарегистрировать собственный Gravatar на веб-сайте Gravatar на http://www.gravatar.com/сайте, но не важно создать учетную запись Gravatar для выполнения этой части руководства.
В WebMatrix нажмите кнопку NuGet .
При этом запускается диспетчер пакетов NuGet и отображаются доступные пакеты. (Не все пакеты являются вспомогательными; некоторые добавляют функциональные возможности в сам WebMatrix, некоторые из них являются дополнительными шаблонами и т. д.) Вы можете получить сообщение об ошибке о несовместимости версии. Это сообщение об ошибке можно игнорировать, нажав кнопку "ОК" и перейдя к этому руководству.
В поле поиска введите "asp.net вспомогательных". NuGet показывает пакеты, соответствующие условиям поиска.
Библиотека веб-вспомогательных средств ASP.NET содержит код для упрощения многих распространенных задач, включая использование образов Gravatar. Выберите пакет библиотеки веб-вспомогательных служб ASP.NET и нажмите кнопку "Установить", чтобы запустить установщик. Нажмите кнопку "Да ", если вы хотите установить пакет, и примите условия для завершения установки.
Вот и все. NuGet загружает и устанавливает все, включая все дополнительные компоненты, которые могут потребоваться (зависимости).
Если по какой-то причине вам нужно удалить вспомогательный процесс, процесс очень похож. Нажмите кнопку NuGet, перейдите на вкладку "Установленная" и выберите пакет, который требуется удалить.
Использование вспомогательного средства на странице
Теперь вы будете использовать помощник, который вы только что установили. Процесс добавления вспомогательного помощника на страницу аналогичен большинству вспомогательных.
В WebMatrix создайте страницу и назовите ее GravatarTest.cshml. (Вы создаете специальную страницу для тестирования вспомогательного помощника, но вы можете использовать вспомогательные элементы на любой странице в вашем сайте.)
<Внутри элемента body> добавьте <элемент div>. В элементе div> введите следующее<:
@Gravatar.
Символ @— это тот же символ, который вы использовали для пометки кода Razor. Gravatar — это вспомогательный объект, с которым вы работаете.
Как только вы вводите период (.), WebMatrix отображает список методов (функций), которые помощник Gravatar делает доступным:
Эта функция называется IntelliSense. Это помогает коду, предоставляя соответствующие контексту варианты. IntelliSense работает с HTML, CSS, ASP.NET кодом, JavaScript и другими языками, поддерживаемыми в WebMatrix. Это еще одна функция, которая упрощает разработку веб-страниц в WebMatrix.
Нажмите клавишу G на клавиатуре и видите, что IntelliSense находит метод GetHtml. Нажмите клавишу TAB. IntelliSense вставляет выбранный метод (GetHtml) для вас. Введите открытую скобку и обратите внимание, что закрывающая скобка автоматически добавляется. Введите адрес электронной почты в кавычки между двумя скобками. Если у вас есть учетная запись Gravatar, будет возвращено изображение профиля. Если у вас нет учетной записи Gravatar, возвращается изображение по умолчанию. По завершении строка выглядит следующим образом:
@Gravatar.GetHtml("john@contoso.com")
Теперь просмотрите страницу в браузере. Отображается изображение или изображение по умолчанию в зависимости от того, есть ли у вас учетная запись Gravatar.
Чтобы получить представление о том, что помощник делает для вас, просмотрите источник страницы в браузере. Наряду с HTML-кодом, который вы получили на странице, вы увидите элемент изображения, содержащий идентификатор. Это код, который вспомогательный объект отрисовывается на странице в месте, где у вас был @Gravatar.GetHtml. Помощник взял предоставленные сведения и создал код, который напрямую взаимодействует с Gravatar, чтобы вернуть правильный образ для предоставленной учетной записи.
Метод GetHtml также позволяет настраивать изображение, предоставляя другие параметры. В следующем коде показано, как запросить изображение с шириной и высотой 40 пикселей и использовать указанный образ по умолчанию с именем wavatar , если указанная учетная запись не существует.
@Gravatar.GetHtml("john@contoso.com", 40, "wavatar")
Этот код создает примерно следующий результат (изображение по умолчанию будет случайным образом отличаться).
Ближайший следующий
Чтобы сохранить это руководство коротким, мы должны были сосредоточиться только на нескольких основах. Естественно, есть гораздо больше для Razor и C#. Вы узнаете больше, как описано в этих руководствах. Если вы хотите узнать больше о аспектах программирования Razor и C# прямо сейчас, вы можете ознакомиться с более подробными сведениями здесь: Введение в ASP.NET веб-программирование с помощью синтаксиса Razor.
В следующем руководстве описано, как работать с базой данных. В этом руководстве вы начнете создавать пример приложения, которое позволяет перечислять избранные фильмы.
Полное описание страницы TestRazor
@{
// Working with numbers
var a = 4;
var b = 5;
var theSum = a + b;
// Working with characters (strings)
var technology = "ASP.NET";
var product ="Web Pages";
// Working with objects
var rightNow = DateTime.Now;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Testing Razor Syntax</title>
<meta charset="utf-8" />
<style>
body {font-family:Verdana; margin-left:50px; margin-top:50px;}
div {border: 1px solid black; width:50%; margin:1.2em;padding:1em;}
span.bright {color:red;}
</style>
</head>
<body>
<h1>Testing Razor Syntax</h1>
<form method="post">
<div>
<p>The value of <em>a</em> is @a. The value of <em>b</em> is @b.
<p>The sum of <em>a</em> and <em>b</em> is <strong>@theSum</strong>.</p>
<p>The product of <em>a</em> and <em>b</em> is <strong>@(a*b)</strong>.</p>
</div>
<div>
<p>The technology is @technology, and the product is @product.</p>
<p>Together they are <span class="bright">@(technology + " " + product)</span></p>
</div>
<div>
<p>The current date and time is: @rightNow</p>
<p>The URL of the current page is<br/><br/><code>@Request.Url</code></p>
</div>
</form>
</body>
</html>
Полное описание страницы TestRazorPart2
@{
var message = "This is the first time you've requested the page.";
if (IsPost) {
message = "Now you've submitted the page.";
}
var showMessage = false;
if (Request.QueryString["show"].AsBool() == true) {
showMessage = true;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Testing Razor Syntax - Part 2</title>
<meta charset="utf-8" />
<style>
body {font-family:Verdana; margin-left:50px; margin-top:50px;}
div {border: 1px solid black; width:50%; margin:1.2em;padding:1em;}
</style>
</head>
<body>
<h1>Testing Razor Syntax - Part 2</h1>
<form method="post">
<div>
<!--<p>@message</p>-->
@if(showMessage){
<p>@message</p>
}
<p><input type="submit" value="Submit" /></p>
@if (IsPost) {
<p>You submitted the page at @DateTime.Now</p>
}
</div>
</form>
</body>
</html>
Полное описание страницы GravatarTest
@{
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div>
@Gravatar.GetHtml("john@contoso.com")
@Gravatar.GetHtml("john@contoso.com", 40, "wavatar")
</div>
</body>
</html>