Microsoft недавно выпустила бесплатный легкий инструмент для разработки веб-сайтов под названием
WebMatrix . Этот инструмент знаменует собой начало захватывающей новой эры для Microsoft. Сейчас они, как никогда ранее, охватывают приложения с открытым исходным кодом, тем самым обращаясь к широкому кругу веб-разработчиков.
WebMatrix делает разработку веб-сайтов быстрее и проще, чем когда-либо прежде, позволяя выбрать один из встроенных шаблонов сайта или из галереи десятков веб-приложений с открытым исходным кодом. В этой статье будет продемонстрировано, как легко создать сайт с помощью одного из готовых шаблонов сайта — сайта Bakery — и настроить его с помощью «C #» и нового синтаксиса Microsoft «Razor».
«Бритва» не является языком программирования; это имя нового «движка просмотра», доступного для ASP.NET, который упрощает, как никогда раньше, разметку HTML-разметки и кода C # или VB.NET на веб-странице. Мало того, что для пометки строк и блоков кода требуется меньше символов, он достаточно умен, чтобы позволить вам переключаться с кода на HTML и обратно, не сообщая об этом.
Web Matrix легко интегрирует среду программирования, поддержку базы данных и веб-сервер, что позволяет создавать сайты (например, сайт Bakery, используемый в этой статье) и публиковать их в провайдере услуг хостинга, не беспокоясь о том, чтобы все работало вместе со сложной конфигурацией. ,
При загрузке и установке WebMatrix вы также получаете IIS Express, SQL Server Compact Edition 4, Microsoft .NET Framework 4 и новую платформу ASP.NET Web Pages. WebMatrix также будет загружать, устанавливать и настраивать такие приложения, как MySQL и PHP, когда вы используете его для создания одного из веб-приложений с открытым исходным кодом, которым они требуются.
Хотя быстрое и простое создание веб-сайта важно, не менее важно иметь возможность публиковать веб-сайт в Интернете, чтобы он был доступен для ваших пользователей. Чтобы облегчить это, WebMatrix предоставляет возможности публикации веб-сайтов с использованием FTP или механизма Microsoft «Web Deploy». Он также интегрируется с «Веб-хостинг-галереей» Microsoft, которая является веб-сайтом, который позволяет легко найти хостинг-провайдера, который отвечает вашим потребностям.
Давайте начнем с установки WebMatrix. Перейдите по этой ссылке и нажмите «Установить WebMatrix»,
Это приведет вас к веб-странице, которая позволит вам загрузить и запустить «Установщик веб-платформы» (Web PI) от Microsoft:
После загрузки и инициализации приложения просто нажмите «Установить», примите лицензионное соглашение, и вы уже в пути…
После установки WebMatrix приложение запустится, и вы увидите экран запуска. Нажмите на значок «Сайт из шаблона», чтобы отобразить список предоставленных шаблонов сайта:
Выберите шаблон «Пекарня» и нажмите «ОК», чтобы создать веб-сайт пекарни:
Для начала нажмите значок «Выполнить», чтобы увидеть, как сайт выглядит «из коробки»:
В вашем браузере по умолчанию откроется домашняя страница сайта Bakery:
Первая настройка, которую мы собираемся внести на сайт, состоит в том, чтобы отображать список доступных продуктов в сетке, а не так, как они отображаются в красной рамке на изображении выше.
Закройте браузер, вернитесь в WebMatrix и нажмите кнопку «Файлы», чтобы переключиться в рабочую область «Файлы»:
Double click on the “default.cshtml” page in the left pane to view the Home page code. [Note that CSHTML is the extension used for Web pages that utilize the “C#” Razor syntax.]
Delete the code I have highlighted in the image above to remove the current method of listing the products and add the following code to display the product information within a grid:
@{
var database = Database.Open("bakery");
var data = database.Query("SELECT * FROM Products");
var grid = new WebGrid(data);
}
@grid.GetHtml()
Run the Web site and you will see the following:
It isn’t pretty – but it gets the job done. The main point of the code is to show how easy it can be. Now let’s go through the code and see how it works.
When embedding code in a Web page using Razor, you can use two different methods: a single line of code can be preceded by an “@” character, or you can embed a block of code between curly braces that is preceded by an “@” character:
@{
Multiple lines of code go in here…
}
The first line of code that you added opens the Web site’s “Bakery” database. Next, a “SELECT *” query is run on the database to get all of the data about the products. After that, a “Grid” Helper is created and initialized with the data from the database. Finally, the “GetHtml” method is invoked to render the data along with a header row that describes each column.
The next step is to modify the code to make the Web page look a little more appealing. Replace the line of code “@grid.GetHtml()” that you added previously with the following line of code:
@grid.GetHtml(columns: grid.Columns(
grid.Column(format: (item) => @Html.Raw("<img width='80px' height='80px' src='Images/Products/Thumbnails/" + @item.ImageName + "'>")),
grid.Column(format: (item) => @Html.Raw("<div style='width:150px; text-align:center;'>" + @item.Name + "</div>",
"Name")),
grid.Column(format: (item) => @Html.Raw("<div style='width:500px; text-align:center;'>" + @item.Description + "</div>",
"Description")),
grid.Column(format: (item) => @Html.Raw("<div style='width:150px; text-align:center;'> $" + @item.Price + "</div>")),
"Price")),
grid.Column(format: (item) => @Html.Raw("<a class='order-button' href='Order/" + @item.Id + "' title='Order'>Order</a>"))))
Now, while this may look very confusing, it is actually pretty straightforward when you break it down.
You’re still calling the same “GetHtml” method to render the grid, but this time you’re telling it which five fields you want displayed and how to display them. For each field you specify the format of the HTML that you want displayed.
We start the format of each column with “(item) =>”, which simply says that the product for the current row is named “item”. This allows you to specify one of the product’s fields using “item.field” (ex. item.Name displays the product’s name).
To put HTML in the grid, instead of text, you need to use the “Html.Raw” method.
The first column uses an “<img>” tag to display an 80×80 pixel image of the product. The name of the image file is in the “ImageName” database field, which is appended to the path “Images/Products/Thumbnails/” to create the URL.
The name, description, and price of the product are then displayed within fixed width “<div>” tags. You also specify a field name to display in the header row.
The last column displays a pretty hyperlink that allows you to order the particular product.
When you run the site, you’ll see the following Web page:
Now let’s integrate some social networking into the site. Add the following line of code to the bottom of the “default.cshtml” page and run your site:
@LinkShare.GetHtml("Fourth Coffee Bakery Site.")
Вы увидите следующий набор маленьких иконок в нижней части веб-страницы:
Каждый из них представляет собой ссылку на другой сайт социальной сети: Delicious, Digg, Google Reader, Facebook, Reddit и StumbleUpon. Нажав на одну из ссылок, вы откроете веб-страницу, связанную с сайтом. После входа в систему пользователи смогут делиться информацией о вашем сайте, что, как мы надеемся, приведет к увеличению трафика на него.
Последняя настройка, которую вы собираетесь внести на сайт, — это добавить канал Twitter на главную страницу. Я создал профиль в Twitter под названием «BakerySite». Чтобы добавить канал для этого профиля, просто поместите следующую строку кода внизу страницы «default.cshtml»:
@Twitter.Profile("BakerySite")
Когда вы запустите сайт, вы увидите нечто похожее на следующее:
Я надеюсь, что вам понравился этот краткий обзор WebMatrix и что он имеетs demonstrated how quick and easy it is to build and customize a site. We’ve only covered the tip of the “WebMatrix” iceberg – it has a lot of other capabilities and can be used to build a large number of popular open source Web sites. I hope that this article has given you the desire to play with WebMatrix and see what it can do for you.