Блог Сергея Байдачного

Мой блог о технологиях

Archive for Август 2010

Продолжаем работать с WebMatrix

3 комментария

В предыдущем посте мы познакомились с продуктом WebMatrix, который позволяет создавать простые сайты, имея минимум знаний в программировании. Как было сказано, WebMatrix позволяет перемешивать серверный код и HTML на подобии классического ASP или PHP. Давайте рассмотрим простые синтаксические конструкции, которые будут полезны для написания любого серверного кода.

Начнем с того, что весь серверный код начинается с символа @. Так, если Вы планируете вставить в HTML значение переменной или статического свойства, то достаточно записать конструкцию @имя переменной/свойства в том месте, где Вы хотите получить значение (например, внутри элемента div). Если же Вы планируете писать более сложный код, содержащий определение переменных и какую-то логику, то подобный код необходимо заключить в фигурные скобки, а каждую отдельную строку заканчивать точкой с запятой.

Пример 1.

@DateTime.Now.Day

Пример 2.

@{
var i=3;
Response.Write(i);
}

Естественно, что при описании логики кода, Вы можете использовать стандартные конструкции любого языка: условия и циклы. Так, WebMatrix поддерживает два языка при разработке динамических страниц, это C# и VB.NET. Мы будем писать весь код на C#. Ниже Вы можете увидеть небольшой пример, использующий конструкцию if.

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
        @{
        var message="";
        if (IsPost)
        {
            message="His name is Sergiy";
        }
        }
        <form action="" method="post">
            <p><label>Enter ID:</label>
               <input type="text" name="text2" />
            </p>
            <p><input type="submit" value="Add" /></p>
        </form>
        <p>@message</p>
    </body>
</html>

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

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

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
        <form action="" method="post">
            <p><label>Enter ID:</label>
               <input type="text" name="text2" />
            </p>
            <p><input type="submit" value="Add" /></p>
        </form>
        @{
        if (IsPost)
        {
            <p>His name is Sergiy</p>
        }
        }
    </body>
</html>

Выглядит потрясающе. Такого нельзя было выполнить в старом добром ASP.NET. Тут есть одно ограничение: вставки HTML в серверный код должны быть полноценными HTML тегами, иными словами нельзя вставить обычный текст. Если Вы все же решили вставить обычный текст, то и для этого случая есть решение – оператор @:. Вот наш пример, с использованием этого оператора:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
        <form action="" method="post">
            <p><label>Enter ID:</label>
               <input type="text" name="text2" />
            </p>
            <p><input type="submit" value="Add" /></p>
        </form>
        <p>
        @{
        if (IsPost)
        {
            @: His name is Sergiy
        }
        }
        </p>
    </body>
</html>

Оператор @: указывается только в начале строки, и также допускает перемешивать HTML и серверные переменные. Наконец, если текст состоит из нескольких строк, то его вывод можно оформить и с помощью элемента text:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
        <form action="" method="post">
            <p><label>Enter ID:</label>
               <input type="text" name="text2" />
            </p>
            <p><input type="submit" value="Add" /></p>
        </form>
        <p>
        @{
        if (IsPost)
        {
            <text>His name is Sergiy</text>
        }
        }
        </p>
    </body>
</html>

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

Реклама

Written by Sergiy Baydachnyy

11.08.2010 at 16:50

Опубликовано в .NET Development, ASP.NET, Web Matrix

Tagged with

Начинаем работать с WebMatrix

12 комментариев

Каждый раз, рассказывая об ASP.NET, я сталкиваюсь с одной и той же проблемой со стороны НЕ Microsoft разработчиков: мы не хотим учить ООП, осваивать универсальный продукт Visual Studio, изучать громадный набор классов и т. д., чтобы создавать простые сайты. Действительно, ASP.NET позволяет создавать сложные корпоративные приложения, позволяющие выдерживать большие нагрузки. Но для небольших компаний большинство возможностей ASP.NET не применимы. Ведь большинству компаний нужны простые «визитки», содержащие минимум интерактивности и работы с данными. Вот поэтому все небольшие сайты и продолжают писать на PHP – ведь не нужно нанимать дорогого .NET разработчика, тем более, что сам сайт представляет собой набор HTML страниц. Именно поэтому, Microsoft представляет новый инструмент – Web Matrix, который позволяет покрыть потребности разработчиков небольших сайтов.

Итак, Web Matrix представляет собой легковесный и простой инструмент для создания веб-сайтов (именно веб-сайтов, а не веб-приложений). Инструмент, который ориентирован не только на начинающего ASP.NET разработчика, но и на PHP-разработчика.

Чтобы установить Web Matrix, достаточно воспользоваться следующей ссылкой http://www.microsoft.com/web/webmatrix/. Тут Вам будет предложено использовать Web Platform Installer, чтобы установить не только Web Matrix, но и все требуемые компоненты. Кроме того, Вы можете выбрать любые другие компоненты, предоставляемые Web Platform Installer (развернуть одно или несколько приложений из галереи, добавить возможности к Вашему веб-серверу и т. д.).

clip_image002

Установив Web Matrix и запустив его в первый раз, Вы получаете возможность открыть один из существующих сайтов, либо создать новый сайт на основе существующего шаблона или выбрав сайт из галереи.

clip_image004

Если Вы выбираете механизм создания сайта из галереи, то Web Matrix отображает несколько десятков уже готовых приложений. Данные веб-приложения чаще всего являются популярными в мире системами с открытым кодом, оптимизированные для работы на платформе Windows. Причем тут есть и PHP-приложения (например, WordPress) и ASP.NET приложения. Преимущество такого подхода состоит в том, что Вы сразу получаете готовый сайт, поддерживающий большое количество функционала. Как правило, перед публикацией такого сайта, Вы вносите минимум необходимых изменений (а многие публикуют сайт в исходном виде, особенно если речь идет о CMS). Естественно, чтобы использовать этот подход, необходимо потратить какое-то время на исследование возможностей существующих приложений.

clip_image006

Следующий подход к созданию сайтов состоит в использовании достаточно простых шаблонов, поставляемых вместе с Web Matrix.

clip_image008

Чаще всего Вы будете использовать Empty Site. Остальные шаблоны больше подходят для изучения возможностей Web Matrix.

Cоздав веб-сайт, Вы попадаете в главное окно Web Matrix, которое тут же предоставляет список активностей, которые Вы можете делать с созданным сайтом:

clip_image010

Главное окно оснащено Лентой, содержащей основные действия над сайтом (Запустить, Опубликовать и т. д.). Кроме того тут имеются четыре закладки, описывающие соответствующие рабочие пространства Web Matrix. Давайте рассмотрим каждую из закладок более подробно:

· Site – тут содержатся основные настройки сайта и присутствует возможность проанализировать список запросов ко всем составляющим сайта, чтобы определить потенциальные проблемы при работе со страницами (отсутствующие страницы на сайте);

· Files – это рабочее пространство позволяет просматривать все файлы, из которых состоит ваш веб-сайт, а также добавлять и редактировать файлы сайта. Фактически это основное рабочее пространство с которым придется работать;

· Databases – тут вы можете создать новую базу данных, используя SQL Server Compact Edition, либо подключиться к существующей базе данных, которая храниться в SQL Server или My SQL. Данное пространство имен позволяет взаимодействовать с базой данных, как на уровне отдельных объектов, так и на уровне данных;

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

Чтобы приступить к созданию нового сайта, перейдите в рабочее пространство Files и выберите существующий index.cshtml файл (двойным щелчком). Файл будет открыт на редактирование. Расширение cshtml представляет собой специальное расширение для файлов содержащих HTML-код и специальные вставки кода. Вот тут самое интересное! Компания Microsoft долгое время пропагандировала разделение кода и содержимого. Это замечательный подход, если речь идет о сложных приложениях, разрабатываемых годами и поддерживаемых разными разработчиками. Но, если речь идет и создании простого сайта, то разработчики предпочитают смешивать код и представление. Последнее легко сделать в PHP, но сложно реализовать в ASP.NET. Именно поэтому в Web Matrix были включены специальные объекты, позволяющие легко смешивать код, используя ASP.NET (в PHP в этом не было необходимости, так как там все было и так плохо, то есть хорошо). В качестве примера можно взять следующий код:

<!DOCTYPE html>

<html>

<head>

<title></title>

</head>

<body>

@DateTime.Now

</body>

</html>

Запустив приложение выше, Вы увидите текущую дату и время. Фактически мы обращаемся к свойству Now класса DateTime, определенного в .NET Framework. И, хотя этот код не похож на синтаксис ASP.NET, это ASP.NET, использующий новый синтаксис, получивший название RazorJ

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

<!DOCTYPE html>

<html>

<head>

<title></title>

</head>

<body>

@Twitter.Profile(«sbaidachni»)

</body>

</html>

clip_image012

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

Written by Sergiy Baydachnyy

10.08.2010 at 17:00

Опубликовано в .NET Development, ASP.NET, Web Matrix

Tagged with

P & P Symposium в Украине

leave a comment »

Коллеги, приглашаю к регистрации на Paterns & Practices Symposium, который состоится 10 сентября в Киеве. Сайт события: http://pnpcee.com

Written by Sergiy Baydachnyy

10.08.2010 at 13:48

Опубликовано в Microsoft