Simple Razor Customizations that *Any* Web Developer or Designer Can Learn

WebMatrix makes developing Web sites quicker and easier than ever before – letting you choose from one of the built-in site templates or from a gallery of dozens of open source Web applications. This article will demonstrate how easy it is to create a site using one of the out-of-the-box site templates – the Bakery site – and customize it using “C#” and Microsoft’s new “Razor” syntax.

“Razor” is not a programming language; it is the name of the new “View Engine” available for ASP.NET that makes it easier than ever to intersperse HTML markup and C# or VB.NET code within a Web page. Not only does it require fewer characters to mark lines and blocks of code, it is smart enough to allow you to switch from code to HTML and back again without telling it.

Web Matrix seamlessly integrates the programming framework, database support, and Web server, which allows you to create sites (such as the Bakery site used in this article) and publish them to a Hosting Service Provider without worrying about making everything work together with complicated configuration.

When you download and install WebMatrix, you’ll also get IIS Express, SQL Server Compact Edition 4, Microsoft’s .NET Framework 4, and the new ASP.NET Web Pages framework. WebMatrix will also download, install and configure applications such as MySQL and PHP when you use it to create one of the open source Web applications that require them.

While quickly and easily creating a Web site is important, it is equally important to be able to publish the Web site to the Internet so that it is accessible to your users. To facilitate this, WebMatrix provides Web site publishing capabilities using FTP or Microsoft’s “Web Deploy” mechanism. It also integrates with Microsoft’s “Web-Hosting Gallery”, which is a Web site that makes it easy to find a Hosting Provider that meets your needs.

Let's get started by installing WebMatrix.  Follow this link and click on "Install WebMatrix",

This will bring you to a Web page that will allow you to download and run Microsoft’s “Web Platform Installer” (Web PI):

After the application downloads and initializes, simply click on “Install”, accept the EULA, and you’ll be on your way…

After WebMatrix is installed, the application will run, and you will be presented with a startup screen. Click on the “Site from Template” icon to display the list of site templates that are provided:

Select the “Bakery” template and click “OK” to create the Bakery Web site:

To start with, click the “Run” icon to see what the site looks like out-of-the-box:

The home page of the Bakery site will open in your default browser:

The first customization that we are going to make to the site is to display the list of available products in a grid rather than in the manner they are displayed within the red box in the above image. 

Close the browser, return to WebMatrix, and click the “Files” button to switch to the Files workspace:

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.

@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>"))))

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.")

You’ll see the following set of small icons at the bottom of the Web page:

Each one is a link to a different social networking site: Delicious, Digg, Google Reader, Facebook, Reddit, and StumbleUpon. By clicking on one of the links, you’ll open the Web page associated with the site. After logging on, users will be able to share information about your site, which hopefully will drive more traffic to it.

The last customization you are going to make to the site is to add a Twitter feed to the home page. I created a Twitter profile named “BakerySite”. To add the feed for this profile, just place the following line of code at the bottom of the “default.cshtml” page:

@Twitter.Profile("BakerySite")

I hope you’ve enjoyed this quick overview of WebMatrix and that it has 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.