Создание Веб-страниц с помощью WebMatrix (часть 2

Создание Веб-страниц с помощью WebMatrix (часть 2 - урок 3)

23.11.2011

Урок 3 - Динамический контент (Основы синтаксиса).

В этой статье мы познакомим вас с основами кода, который позволяет создавать динамический контент на ваших веб-страницах с помощью WebMatrix. Вы скоро ознакомитесс с синтаксисом Razor ASP.NET , и приступитек разработке полезных веб-приложений в кратчайшие сроки! Приключение начинается...

Шаг 1: Прежде всего создайте новый пустой сайт. Для этого выполните следующие: 1) запустить WebMatrix, 2) перейти к окну "Быстрый старт", 3) выберите «Сайт из шаблона", 4) выберите "Очистить сайт", 5) назовите его: "BasicsSyntax" и нажмите "ОК ».

Если вы хотите, вы также можете использовать ранее созданные "HelloWorld" сайт и добавить пустую страницу на него. Для этого выполните следующие: 1) найти и нажмите на кнопку "Новый" в стандартной панели инструментов, 2) выберете "CSHTML" как тип файла, 3) наконец, введите название страницы: "BasicsSyntax" и нажмите кнопку "OK" (пожалуйста проверьте правильность выполнения операций, согласно приведённым ниже).

Шаг 2: Как только вы это сделаете - вам автоматически будет представлено содержимое вновь созданной страници. Чтобы продолжить, замените существующую разметку на следующую ниже:

Примечание: Вы можете просто скопировать и вставить код ниже в WebMatrix IDE; комментарии совершенно необязательны.

Полный пример кода

@ {

/ / Вот как вы помечаете одну строку кода в качестве комментария

/ *

Вы также можете указать комментарий,

Который будет охватывать несколько строк

* /

}

<! DOCTYPE HTML>

<HTML>

<Head>

<Title> Основные сведения: Синтаксис </ title>

</ HEAD>

<Body>

<! - Вот как вы указываете одну строку в качестве комментария в HTML-разметке ->

<! -

Вы также можете указать комментарий,

Который будет охватывать несколько строк

<! - Вот как вы объявите и инициализируете переменную ->

@ {VAR VariableOne = "Hello World :-)!";}

<! - Вот как вы отобразите содержимое переменной ->

Содержание "VariableOne" переменной: @ VariableOne

<! -

Вот как вы объявите и инициализируете переменную, используя содержимое другой переменной,

Совмещяя строчный тип и helper (многоканальный блок заявление)

@ {

string VariableTwo = VariableOne + "Сегодня:" + @ DateTime.Now;

}

<! - Вот как вы отобразите содержимое переменной ->

<Р> Содержание "VariableTwo" переменной: @ VariableTwo

</ Body>

</ HTML>

Шаг 3: Когда вы закончили, наступило самое время, чтобы увидеть вашу веб-страницу в действии! Нажмите на "Run" в стандартной панели инструментов, или нажмите клавишу F12 на клавиатуре для запуска страницы в браузере.То что вы увидите, должно соответствовать изображение, показанное ниже.

Шаг 4: Теперь давайте более внимательно посмотрим на исходный код. Как вы уже, наверное, заметили, ваша страница состоит из двух компонентов, а именно - HTML / CSS разметки и синтаксиса ASP.NET Razor (см. выше).

Вложенный код

Вы можете вставлять код любым из трех способов: в качестве встроенного выражения - линии № 29 и 41 (С одной стороны коду предшествует символ "@", что не накладывает никаких особенных требований - просто указывается только с одной строки кода, которая будет выполнена),

Фрагмент кода 1: Встроенные выражения

...

29 Содержание "VariableOne" переменной: @ VariableOne

…

41 <Р> Содержание "VariableTwo" переменной: @ VariableTwo

...

Единый блок заявление - линия № 25 (аналогичной, как и раньше, но с открытием и закрытием фигурных скобок охватывающих код. Обратите внимание на точку с запятой в конце каждой инструкции - хотя в этом случае есть только одна строка кода, которая будет выполнена, однако их может быть и больше, как вы увидите в следующем примере кода),

Фрагмент кода 2: один блок Заявление

...

25 @ {VAR VariableOne = "Hello World :-)!";}

...

или блоком инструкций - линии # 35-37 (по аналогии, с более ранним примером, но теперь с код размещен вертикально между открытием и закрытием скобок, опять же нужно отметить точкой с запятой окончание каждого оператора).

Фрагмент кода 3: Multi Блок инструкций:

...

35 @ {

36 Строка VariableTwo = VariableOne + "Сегодня:" + @ DateTime.Now;

37 }

...

По мере работы с кодом и он растет в размерах, важно, чтобы вы знали, как комментировать определенные части так, чтобы это помогло напоминать вам (или другим) именно то, что этот кусок кода делает в случае необходимости. В WebMatrix, комментируя разметки можно использовать как комментарий в одну линию (линии № 16, 23, 25, 35)

Фрагмент кода 4: однострочные комментарии

...

16 <! - Вот как вы указываете одну строку комментария в HTML-разметке ->

...

24 <! - Вот как вы объявите и инициализации переменной (один блок заявление) ->

...

28 <! - Вот как вы отображать содержимое переменной ->

...

40 <! - Вот как вы отображать содержимое переменной ->

...

Так и в несколько строк (строки # 18-21, 27-30).

Фрагмент кода 5: Многострочные Комментарии

...

18 <! -

19 Вы также можете указать комментарий

20 , который охватывает несколько строк

21 ->

...

31 <! -

32 Вот как вы можете объявить и инициализировать переменную, используя содержимое другой переменной,

33 Строковый литерал и помощник (многоканальный блок заявление)

34 ->

…

То же самое касается символа «/» для одной строки (строка № 2) и нескольких строк (строки # 4-7) комментарии.

Фрагмент кода 6: Комментарии внутри кода

...

2 / / Вот как вы указываете одну строку кода в комментарий

...

4 / *

5 Вы также можете указать комментарий

6 , который охватывает несколько строк

* /

...

Переменные

Переменные - средства для хранения значений в памяти (например, числа, строки, даты и т.д.) и для работы на них. При работе с переменными, вы объявите их с помощью оператора "Var", предшествующего переменной (для неявного типа) - строка # 25 или предопределенного типа (для явного типа) - линия № 36, который может быть одним из широко известных типов данных, включая : целый, дробный, бинарный, строка, логический… Инициализация происходит так же просто, как и использование оператора присваивания: "=" и следующим за ним значением (для числовых данных) с последующей запятой либо двойными кавычками (для текстовых данных).

Фрагмент кода 7: Объявление переменных Implicit/Explicit

...

25 @ {VAR VariableOne = "Hello World :-)!";}

...

36 string VariableTwo = VariableOne + "Сегодня:" + @ DateTime.Now;

...

Отображение содержимого переменной

Для того, чтобы отобразить содержимое переменной вы просто ставите перед её именем символ "@" (линии № 29, 41). Вы можете объединить содержимое нескольких переменных путем размещения символа "+" между ними (линия № 36).

Фрагмент кода 8: Отображение Содержимого одной/нескольких переменных

...

29 Содержание "VariableOne" переменной: @ VariableOne

...

41 <Р> Содержание "VariableTwo" переменной: @ VariableTwo

...

36 string VariableTwo = VariableOne + "Сегодня:" + @ DateTime.Now;

...

Шаг 5: Поздравляем! Вы завершили все упражнения, связанные с этим уроком.

Что мы сделали?

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

Создание Веб-страниц с помощью WebMatrix (часть 2 - урок 3)

<h2>Урок 3 - Динамический контент (Основы синтаксиса).</h2> В этой статье мы познакомим вас с основами кода, который позволяет создавать динамический контент на ваших веб-страницах с помощью WebMatrix. Вы скоро ознакомитесс с синтаксисом Razor ASP.NET , и приступитек разработке полезных веб-приложений в кратчайшие сроки! Приключение начинается... Шаг 1: Прежде всего создайте новый пустой сайт. Для этого выполните следующие: 1) запустить WebMatrix, 2) перейти к окну "Быстрый старт", 3) выберите «Сайт из шаблона", 4) выберите "Очистить сайт", 5) назовите его: "BasicsSyntax" и нажмите "ОК ». Если вы хотите, вы также можете использовать ранее созданные "HelloWorld" сайт и добавить пустую страницу на него. Для этого выполните следующие: 1) найти и нажмите на кнопку "Новый" в стандартной панели инструментов, 2) выберете "CSHTML" как тип файла, 3) наконец, введите название страницы: "BasicsSyntax" и нажмите кнопку "OK" (пожалуйста проверьте правильность выполнения операций, согласно приведённым ниже). <img src="/upload/medialibrary/8c0/8c09328febdef16fdbec9d8114c6669a.PNG" title="step1.PNG" border="0" alt="step1.PNG" width="600" height="363" /> <img src="/upload/medialibrary/e9d/e9ddbeca73a04faa42fb04fdc427724e.PNG" title="step2.PNG" border="0" alt="step2.PNG" width="413" height="293" /> Шаг 2: Как только вы это сделаете - вам автоматически будет представлено содержимое вновь созданной страници. Чтобы продолжить, замените существующую разметку на следующую ниже: Примечание: Вы можете просто скопировать и вставить код ниже в WebMatrix IDE; комментарии совершенно необязательны. Полный пример кода <table> <tbody> <tr> <td> @ { / / Вот как вы помечаете одну строку кода в качестве комментария / * Вы также можете указать комментарий, Который будет охватывать несколько строк * / } <! DOCTYPE HTML> <HTML> <Head> <Title> Основные сведения: Синтаксис </ title> </ HEAD> <Body> <! - Вот как вы указываете одну строку в качестве комментария в HTML-разметке -> <! - Вы также можете указать комментарий, Который будет охватывать несколько строк -> <! - Вот как вы объявите и инициализируете переменную -> @ {VAR VariableOne = "Hello World :-)!";} <! - Вот как вы отобразите содержимое переменной -> Содержание "VariableOne" переменной: @ VariableOne <! - Вот как вы объявите и инициализируете переменную, используя содержимое другой переменной, Совмещяя строчный тип и helper (многоканальный блок заявление) -> @ { string VariableTwo = VariableOne + "Сегодня:" + @ DateTime.Now; } <! - Вот как вы отобразите содержимое переменной -> <Р> Содержание "VariableTwo" переменной: @ VariableTwo </ Body> </ HTML> </td> </tr> </tbody> </table> Шаг 3: Когда вы закончили, наступило самое время, чтобы увидеть вашу веб-страницу в действии! Нажмите на "Run" в стандартной панели инструментов, или нажмите клавишу F12 на клавиатуре для запуска страницы в браузере.То что вы увидите, должно соответствовать изображение, показанное ниже. <img src="/upload/medialibrary/869/869843e8b781814e76fe6d37023d5431.PNG" title="step3.PNG" border="0" alt="step3.PNG" /> Шаг 4: Теперь давайте более внимательно посмотрим на исходный код. Как вы уже, наверное, заметили, ваша страница состоит из двух компонентов, а именно - HTML / CSS разметки и синтаксиса ASP.NET Razor (см. выше). <h2>Вложенный код </h2> Вы можете вставлять код любым из трех способов: в качестве встроенного выражения - линии № 29 и 41 (С одной стороны коду предшествует символ "@", что не накладывает никаких особенных требований - просто указывается только с одной строки кода, которая будет выполнена), Фрагмент кода 1: Встроенные выражения <table> <tbody> <tr> <td> ... 29 Содержание "VariableOne" переменной: @ VariableOne … 41 <Р> Содержание "VariableTwo" переменной: @ VariableTwo ... </td> </tr> </tbody> </table> Единый блок заявление - линия № 25 (аналогичной, как и раньше, но с открытием и закрытием фигурных скобок охватывающих код. Обратите внимание на точку с запятой в конце каждой инструкции - хотя в этом случае есть только одна строка кода, которая будет выполнена, однако их может быть и больше, как вы увидите в следующем примере кода), Фрагмент кода 2: один блок Заявление <table> <tbody> <tr> <td> ... 25 @ {VAR VariableOne = "Hello World :-)!";} ... </td> </tr> </tbody> </table> или блоком инструкций - линии # 35-37 (по аналогии, с более ранним примером, но теперь с код размещен вертикально между открытием и закрытием скобок, опять же нужно отметить точкой с запятой окончание каждого оператора). Фрагмент кода 3: Multi Блок инструкций: <table> <tbody> <tr> <td> ... 35 @ { 36 Строка VariableTwo = VariableOne + "Сегодня:" + @ DateTime.Now; 37 } ... </td> </tr> </tbody> </table> <h2>Комментарии </h2> По мере работы с кодом и он растет в размерах, важно, чтобы вы знали, как комментировать определенные части так, чтобы это помогло напоминать вам (или другим) именно то, что этот кусок кода делает в случае необходимости. В WebMatrix, комментируя разметки можно использовать как комментарий в одну линию (линии № 16, 23, 25, 35) Фрагмент кода 4: однострочные комментарии <table> <tbody> <tr> <td> ... 16 <! - Вот как вы указываете одну строку комментария в HTML-разметке -> ... 24 <! - Вот как вы объявите и инициализации переменной (один блок заявление) -> ... 28 <! - Вот как вы отображать содержимое переменной -> ... 40 <! - Вот как вы отображать содержимое переменной -> ... </td> </tr> </tbody> </table> Так и в несколько строк (строки # 18-21, 27-30). Фрагмент кода 5: Многострочные Комментарии <table> <tbody> <tr> <td> ... 18 <! - 19 Вы также можете указать комментарий 20 , который охватывает несколько строк 21 -> ... 31 <! - 32 Вот как вы можете объявить и инициализировать переменную, используя содержимое другой переменной, 33 Строковый литерал и помощник (многоканальный блок заявление) 34 -> … </td> </tr> </tbody> </table> То же самое касается символа «/» для одной строки (строка № 2) и нескольких строк (строки # 4-7) комментарии. Фрагмент кода 6: Комментарии внутри кода <table> <tbody> <tr> <td> ... 2 / / Вот как вы указываете одну строку кода в комментарий ... 4 / * 5 Вы также можете указать комментарий 6 , который охватывает несколько строк * / ... </td> </tr> </tbody> </table> <h2>Переменные </h2> Переменные - средства для хранения значений в памяти (например, числа, строки, даты и т.д.) и для работы на них. При работе с переменными, вы объявите их с помощью оператора "Var", предшествующего переменной (для неявного типа) - строка # 25 или предопределенного типа (для явного типа) - линия № 36, который может быть одним из широко известных типов данных, включая : целый, дробный, бинарный, строка, логический… Инициализация происходит так же просто, как и использование оператора присваивания: "=" и следующим за ним значением (для числовых данных) с последующей запятой либо двойными кавычками (для текстовых данных). Фрагмент кода 7: Объявление переменных Implicit/Explicit <table> <tbody> <tr> <td> ... 25 @ {VAR VariableOne = "Hello World :-)!";} ... 36 string VariableTwo = VariableOne + "Сегодня:" + @ DateTime.Now; ... </td> </tr> </tbody> </table> <h3>Отображение содержимого переменной </h3> Для того, чтобы отобразить содержимое переменной вы просто ставите перед её именем символ "@" (линии № 29, 41). Вы можете объединить содержимое нескольких переменных путем размещения символа "+" между ними (линия № 36). Фрагмент кода 8: Отображение Содержимого одной/нескольких переменных <table> <tbody> <tr> <td> ... 29 Содержание "VariableOne" переменной: @ VariableOne ... 41 <Р> Содержание "VariableTwo" переменной: @ VariableTwo ... 36 string VariableTwo = VariableOne + "Сегодня:" + @ DateTime.Now; ... </td> </tr> </tbody> </table> Шаг 5: Поздравляем! Вы завершили все упражнения, связанные с этим уроком. <h2>Что мы сделали?</h2> В этом уроке вы познакомились с основами кода, который позволяет создавать динамический контент на ваших веб-страницах с помощью WebMatrix. В следующих статьях, вы узнаете больше о том, как использовать переменные для хранения предопределенных данных, а также о вводимых пользователем данных, которые затем могут быть в свою очередь использованы для принятия определенные решения. Это все еще впереди, пожалуйста, следите за обновлениями!