Общие сведения о веб-страницы ASP.NET . Основы программирования
; автор — Том ФитцМакен (Tom FitzMacken)
В этом руководстве описано, как программировать в веб-страницы ASP.NET с помощью синтаксиса Razor.
Из этого руководства вы узнаете, как выполнять такие задачи:
- Базовый синтаксис Razor, используемый для программирования в веб-страницы ASP.NET.
- Некоторые базовые C#, которые являются языком программирования, который вы будете использовать.
- Некоторые основные понятия программирования для веб-страниц.
- Установка пакетов (компонентов, содержащих предварительно созданный код) для использования с сайтом.
- Использование вспомогательных служб для выполнения распространенных задач программирования.
Обсуждаемые функции и технологии:
- NuGet и диспетчер пакетов.
- Помощник
Gravatar.
Это руководство в первую очередь представляет собой упражнение по ознакомлению с синтаксисом программирования, который будет использоваться для веб-страницы ASP.NET. Вы узнаете о синтаксисе Razor и коде, написанном на языке программирования C#. Вы получили представление об этом синтаксисе в предыдущем руководстве; В этом руководстве мы подробнее объясним синтаксис.
Мы обещаем, что это руководство включает в себя больше всего программирования, которое вы увидите в одном руководстве, и что это единственный учебник, который посвящен только программированию. В остальных руководствах в этом наборе вы фактически создадите страницы, которые выполняют интересные действия.
Вы также узнаете о помощниках. Вспомогательный компонент — это компонент , который можно добавить на страницу. Помощник выполняет за вас работу, которая в противном случае может быть мухой или сложной для выполнения вручную.
Создание страницы для воспроизведения с помощью Razor
В этом разделе вы немного поиграете с Razor, чтобы получить представление о базовом синтаксисе.
Запустите WebMatrix, если она еще не запущена. Вы будете использовать веб-сайт, созданный в предыдущем руководстве (начало работы с веб-страницами). Чтобы снова открыть его, щелкните Личные сайты и выберите WebPageMovies:
Выберите рабочую область Файлы .
На ленте нажмите кнопку Создать , чтобы создать страницу. Выберите CSHTML и назовите новую страницу TestRazor.cshtml.
Нажмите кнопку ОК.
Скопируйте приведенные ниже данные в файл, полностью заменив то, что уже есть.
Примечание
При копировании кода или разметки из примеров на страницу отступы и выравнивание могут быть не такими, как в учебнике. Однако отступ и выравнивание не влияют на выполнение кода.
@{
// 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 отрисовывает все, что находится в переменной с именем 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. (Например, он также используется в ASP.NET представлениях MVC.)
Мы упоминание это, потому что если вы ищете информацию о программировании веб-страницы 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 имеет следующую структуру:
if(some condition){
One or more statements here that run if the condition is true;
}
Проверяемое условие находится в круглых скобках. Это должно быть значение или выражение, возвращающее значение true или false. Если условие верно, 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 не имеет значения true.
Условия можно объединять с помощью логического оператора AND (&& ) или логического ОПЕРАТОРА ИЛИ (||). Например, последнее из условий if в предыдущих примерах означает, если fileProcessingIsDone не имеет значение true, а для displayMessage задано значение false.
Блок else
Последнее, что касается блоков if: за блоком if может следовать блок else. Другой блок полезен, если условие имеет значение false, необходимо выполнить другой код. Вот простой пример:
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 не выполняется.
Нажмите кнопку Отправить . Страница будет запрошена снова. Как и ранее, для переменной сообщения задано значение "Это первый раз...". Но на этот раз тест if(IsPost) возвращает значение true, поэтому код внутри блока if выполняется. Код изменяет значение переменной сообщения на другое значение, которое отображается в разметке.
Теперь добавьте условие if в разметку. Под элементом <p> , содержащим кнопку Отправить , добавьте следующую разметку:
@if(IsPost){
<p>You submitted the page at @DateTime.Now</p>
}
Вы добавляете код в разметку, поэтому вам нужно начать с @. Затем есть тест if, аналогичный тому, который вы добавили ранее в блок кода. Однако внутри фигурных скобок вы добавляете обычный HTML- по крайней мере, он обычный, пока не дойдет до @DateTime.Now. Это еще один фрагмент кода Razor, поэтому снова необходимо добавить @ перед ним.
Дело в том, что можно добавить условия if как в блоке кода вверху, так и в разметке. Если в тексте страницы используется условие if, строки внутри блока могут быть разметкой или кодом. В этом случае и, как это верно, каждый раз, когда вы смешиваете разметку и код, необходимо использовать @, чтобы четко ASP.NET, где находится код.
Запустите страницу и нажмите кнопку Отправить. На этот раз при отправке вы увидите не только другое сообщение ("Теперь вы отправили..."), но и новое сообщение со списком даты и времени.
Проверка значения строки запроса
Еще один тест. На этот раз вы добавите блок if, который проверяет значение с именем 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. Затем выполняется проверка if для поиска значения в строке запроса. При первом запросе страницы у нее есть 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 можно только в том случае, если проверяемое значение является логическим значением (true/false). Прежде чем проверить значение переменной show в строке запроса, необходимо преобразовать его в логическое значение. Это то, что делает метод AsBool — он принимает строку в качестве входных данных и преобразует ее в логическое значение. Очевидно, что если строка имеет значение true, метод AsBool преобразует это значение в значение true. Если значение строки является чем-либо другим, AsBool возвращает значение false.
Совет
Типы данных и методы As()
До сих пор мы только говорили, что при создании переменной используется ключевое слово var. Это еще не вся история, однако. Для управления значениями — для добавления чисел, объединения строк, сравнения дат или проверки на истинность или ложь — C# должен работать с соответствующим внутренним представлением значения. C# обычно может выяснить, каким должно быть это представление (то есть тип данных) на основе того, что вы делаете со значениями. Время от момента, однако, он не может сделать это. В противном случае необходимо помочь, явно указав, как C# должен представлять данные. Это делает метод AsBool— он сообщает C#, что строковое значение true или false следует рассматривать как логическое значение. Существуют аналогичные методы для представления строк, как и другие типы, например AsInt (обрабатывается как целое число), AsDateTime (обрабатывается как дата и время), AsFloat (обрабатывается как число с плавающей запятой) и т. д. Если вы используете эти методы As( ), если C# не может представить строковое значение в соответствии с запросом, вы увидите ошибку.
В разметке страницы удалите или закомментируйте этот элемент (здесь он закомментирован):
<!-- <p>@message</p> -->
В том месте, где вы удалили или закомментировали этот текст, добавьте следующее:
@if(showMessage) {
<p>@message</p>
}
В тесте if указано, что если переменная showMessage имеет значение true, отрисовка <элемента p> со значением переменной message.
Сводка условной логики
Если вы не совсем уверены в том, что вы только что сделали, вот сводка.
- Переменная сообщения инициализируется строкой по умолчанию ("Это первый раз...").
- Если запрос страницы является результатом отправки (публикации), значение сообщения изменяется на "Теперь вы отправили ..."
- Переменная showMessage инициализируется значением false.
- Если строка запроса содержит ?show=true, переменной showMessage присваивается значение true.
- Если в разметке showMessage имеет значение true, <отрисовывается элемент p> , отображающий значение сообщения. (Если параметр showMessage имеет значение false, ничего не отображается в этой точке разметки.)
- В разметке, если запрос является post, <отрисовывается элемент 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-кодом, который вы имели на странице, вы увидите элемент image, содержащий идентификатор. Это код, который помощник отрисовывает на странице в том месте, где у вас есть @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>
Дополнительные ресурсы
Обратная связь
Ожидается в ближайшее время: в течение 2024 года мы постепенно откажемся от GitHub Issues как механизма обратной связи для контента и заменим его новой системой обратной связи. Дополнительные сведения см. в разделе https://aka.ms/ContentUserFeedback.
Отправить и просмотреть отзыв по