Примечание.
Для доступа к этой странице требуется авторизация. Вы можете попробовать войти или изменить каталоги.
Для доступа к этой странице требуется авторизация. Вы можете попробовать изменить каталоги.
В этом руководстве вы узнаете, как программировать в веб-страницы ASP.NET с помощью синтаксиса Razor.
Что вы узнаете:
- Базовый синтаксис Razor, используемый для программирования в ASP.NET Web Pages.
- Основы 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. (В этом случае это элемент .
- Фигурные скобки ({ и }) заключают блок кода 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>
Блок кода наверху инициализирует переменную с именем message с помощью некоторого текста. В тексте страницы содержимое переменной сообщения отображается внутри <элемента 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. В коде условие имеет такую структуру:
if(some condition){
One or more statements here that run if the condition is true;
}
Условие для тестирования находится в скобках. Оно должно быть значением или выражением, возвращающим true или false. Если условие является истинным, ASP.NET выполняет инструкцию или инструкции, находящиеся внутри фигурных скобок. (Это then часть в логике if-then.) Если условие ложно, блок кода пропускается.
Ниже приведены несколько примеров условий, которые можно проверить в инструкции 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.
! оператор сам по себе означает логическое НЕ. Например, условие if(!IsPost) означает если IsPost не истинно.
Условия можно объединить с помощью логического оператора AND (&>) или логического ИЛИ (|| оператора). Например, последнее из условий, указанных в предыдущих примерах, означает , что значение FileProcessingIsDone не имеет значения true AND displayMessage имеет значение false.
Блок else
Последнее о блоках if: за блоком if может следовать блок else. Блок else полезен, если вам нужно выполнить другой код, когда условие является ложным. Вот простой пример.
var message = "";
if(errorOccurred == true)
{
message = "Sorry, an error occurred.";
}
else
{
message = "The process finished without errors!";
}
Вы увидите некоторые примеры в последующих руководствах этой серии, где полезно использовать блок else.
Проверка того, является ли запрос отправленным (POST-запрос)
Есть больше, но давайте вернемся к примеру, который имеет условие if(IsPost){ ... }. IsPost фактически является свойством текущей страницы. При первом запросе страницы IsPost возвращает значение false. Однако если вы нажимаете кнопку или отправляете страницу , то есть вы публикуете ее, — IsPost возвращает значение true. Поэтому IsPost позволяет определить, имеете ли вы дело с отправкой формы. (С точки зрения http-команд, если запрос является операцией GET, IsPost возвращает значение false. Если запрос является операцией POST, IsPost возвращает значение true.) В более позднем руководстве вы будете работать с входными формами, где этот тест становится особенно полезным.
Запустите страницу. Так как это первый раз, когда вы запрашиваете страницу, отображается сообщение "Это первый раз, когда вы запросили страницу". Эта строка — это значение, в которое вы инициализировали переменную сообщения. Существует тест if(IsPost), но он возвращает значение false в данный момент, поэтому код внутри блока не выполняется.
Нажмите кнопку "Отправить ". Страница снова запрашивается. Как и раньше, переменная сообщения имеет значение "Это первый раз..." Но на этот раз условие if (IsPost) возвращает значение true, поэтому код внутри блока if выполняется. Код изменяет значение переменной сообщения на другое значение, которое отображается в разметке.
Теперь добавьте условие 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) Вы измените страницу так, чтобы сообщение, которое вы показываете ("Это первый раз ..." и т. д.), отображалось только в том случае, если флаг show имеет значение 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-адрес переменную с именем show в строке запроса, как в этой версии URL-адреса:
http://localhost:43097/TestRazorPart2.cshtml?show=true
Сам тест смотрит на свойство QueryString объекта Request. Если строка запроса содержит элемент с именем show и этот элемент имеет значение true, выполняется блок if, который устанавливает переменной showMessage значение true.
Здесь есть трюк, как вы можете видеть. Как следует из названия, строка запроса — это строка. Однако вы можете проверять истину и ложь, только если значение, которое вы тестируете, является булевым (логическим) значением 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> с значением переменной message.
Сводка по условной логике
В случае, если вы не совсем уверены в том, что вы только что сделали, вот сводка.
- Переменная сообщения инициализирована в строку по умолчанию ("Это первый раз..."
- Если запрос страницы является результатом отправки (публикации), значение сообщения изменяется на "Теперь вы отправили ..."
- Переменная showMessage инициализируется в false.
- Если строка запроса содержит ?show=true, переменная showMessage имеет значение true.
- В разметке, если showMessage имеет значение true, отображается элемент <p>, показывающий значение сообщения. (Если showMessage имеет значение false, то в разметке ничего не отображается.)
- В разметке, если запрос является POST, элемент <p> отображается и выводит дату и время.
Запустите страницу. Сообщение отсутствует, так как showMessage имеет значение false, поэтому в разметке условие if(showMessage) возвращает значение false.
Щелкните Отправить. Вы видите дату и время, но по-прежнему нет сообщения.
В браузере перейдите в адресную строку и добавьте в конец URL-адреса следующее: ?show=true, а затем нажмите Enter.
Страница отображается снова. (Так как вы изменили URL-адрес, это новый запрос, а не отправка.) Нажмите кнопку "Отправить " еще раз. Сообщение отображается снова, как и дата и время.
В URL-адресе измените ?show=true на ?show=false и нажмите клавишу ВВОД. Отправьте страницу еще раз. Страница вернулась в первоначальное состояние — сообщение отсутствует.
Как отмечалось ранее, логика этого примера немного задумана. Тем не менее, если это будет появляться на многих ваших страницах, оно примет одну или несколько форм, которые вы уже видели здесь.
Установка вспомогательного средства (отображение образа Gravatar)
Некоторые задачи, которые люди часто хотят делать на веб-страницах, требуют большого количества кода или требуют дополнительных знаний. Примеры: отображение диаграммы для данных; поместите кнопку "Нравится" Facebook на странице; отправка электронной почты с веб-сайта; обрезка или изменение размера изображений; использование PayPal для вашего сайта. Чтобы упростить эти действия, веб-страницы ASP.NET позволяет использовать вспомогательные средства. Вспомогательные компоненты — это компоненты, устанавливаемые для сайта, и это позволяет выполнять типичные задачи с помощью всего нескольких строк кода Razor.
веб-страницы ASP.NET имеют несколько встроенных вспомогательных элементов. Однако многие вспомогательные средства доступны в пакетах (надстройках), предоставляемых с помощью диспетчера пакетов NuGet. NuGet позволяет выбрать пакет для установки, а затем заботиться обо всех деталях установки.
В этой части руководства вы установите вспомогательный элемент, который позволяет отображать изображение 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>