Learning WebMatrix – Part 1: Demo

Demo OverviewThis demo shows the basic features of WebMatrix and how to create a site from scratch with the Razor syntax, using databases and a WebGrid Helper to make displaying data more easy.

Features Demo Flow

Prerequisites Duration Microsoft WebMatrix 25 mins

Page | 1

Web MatrixTool explorationDatabases

RazorSyntax overviewDatabase accessWebGrids

Section1 Lap Around WebMatrix

Section 2 Using Razor

Section 3 Working with Databases

Section 4 Using WebGrids

This demo consists in a brief walkthrough around the tool. The audience will be introduced to the WebMatrix tool, identifying its main features.

Talking Points Demo steps Screenshots

WebMatrix Basic Features: Free, lightweight Simple to code Elegant interface, simple

experience Simple publishing Grows with the user

Entering Demo after talking about WebMatrix platform

WebMatrix shows a QuickStart window on startup. There we can choose a site to work with:

1. My Sites: Opens an existing site

2. Sites from Web Gallery: you can choose a template from Web Gallery and create a site from it.

3. Site from Template: you can choose from 6 installed templates and build your site from them

4. Site from folder: starts a new site from scratch!

WebMatrix (GUI) is based on three concepts: Create, Configure and Publish.

1. Open WebMatrix2. Pause on QuickStart window3. Click on Site from Template and select “Empty Site”

Screenshot 1: WebMatrix QuickStart

Page | 2

Section1Lap Around WebMatrix

Screenshot 2: Sites From TemplateThe lower left menu bar

Lower Left menu bar contains configuration elements :

a. Site: Here you can configure and perform any operation related to the site. Change the location, Manage databases, run reports, publish, find hosting and browse the files.

b. Files: you can add pages or browse and open the existing for edition. From here you will create new pages and edit the existing ones

c. Databases: You can create or add a database and also manage it.

d. Reports: you can create reports that will be used to improve site positioning at search engines

This is a walkthrough that will cover WebMatrix GUI, where the user will briefly see where options are located.

1. Show the lower left menu bar:a. Left click and pause in Site

b. Left click and pause in Files

c. Left click and pause in Databases.

d. Left click and pause in Reports

Screenshot 1: lower left menu bar

Screenshot 2: Site dialog box

Page | 3

The upper ribbon bar

Upper ribbon bar will contain elements to run and publish a site.

a. My Sites: Here you can see all your sites

b. Publishc. Run and stop

1. Show the upper ribbon bar2. Briefly read and comment the options

Screenshot 3: Upper ribbon bar

Creating a new page

With WebMatrix it is possible to create many pages types: from HTML to scripting languages such as Razor cshtml, ASPX or Javascript.

After a page is created, it is placed inside the web folder.

1. Left click on Sites on the lower left menu bar.2. Left click on “Add a file to your site” in the center of

the screen.3. Pause on “Choose a File Type” dialog box4. Choose HTML and click OK5. Pause on the created page6. Left Click on Save menu option to save the Page

Screenshot 4: Choose a File Type Dialog Box

Screenshot 5: After creating an HTML page

What’s Next:Razor Introduction and Razor Slides

Page | 4

This demo will show how to code a website using the Razor syntax. By the end of the demo, the user will get a cshtml page that will show a name.

Talking Points Demo steps Screenshots

The benefit of Razor is that it allows you to transition between code and markup really easily.

It also keeps code to a minimum and leaves pages feeling a lot “lighter” with no annoying closing tags to worry about (like we have in Web Forms or PHP)

Entering demo after talking about Razor syntax

From markup to Razor code

To create a Razor page, we have to select a cshtml file.

A razor page will contain HTML markup as any HTML Web page, with razor code inside.

@{} defines a code block. Is the separation between markup and code. Inside a code block we can write razor elements, but also HTML elements

After we define a value, we can use it everywhere in the code with @.By using @ we can display any value inside the HTML.

1. Open the site Empty Site2. Go to New... option at upper ribbon bar to create a

new file3. Choose cshtml for Razor and leave the default value

for the Name of the file4. Pause on the code5. Add a new code block@{} to assign a value:

var name = “John Doe”;6. Create a div block and write Hello @name!7. Click on Run to open the browser and view the page

Figure 1: Hello Word

Page | 5

Section2Using Razor

Figure 2: Run the application

Figure 2: Hello Word runningComments and text blocks

There are many ways to include comments in the page using Razor.

We can use <text> block to write multiple HTML lines. If we want a single line, we use @:

1. Open the razor site Comments and Text2. Open Comments.cshtml3. Highlight the comments4. Open Page.cshtml and uncomment the lines5. Pause on <text> block6. Pause on @: block7. Press Run to open the browser and view the page

Figure 1: Razor Comments

Page | 6

Figure 2: Hello word with a text block

Lists and Loops

By using loops you can run the same statements repeatedly.

Lists are collections, which are groups of similar objects.

While working with a collection or array, it is better to use a For Each loop.

For Each loop lets you carry out a task on each item in the collection.

1. Open Lists and loops Web Site2. Open the file simpleFor.cshtml3. Pause on loop4. Uncomment the code that adds a list,

below the first loop.5. Highlight the list6. Run the example

Figure 1: Loop output

Figure 2: List Loop Output

Page | 7

Debugging with ObjectInfo Debugging is the process of finding

and fixing errors in your code pages.

The ObjectInfo helper displays the type and the value of each object you pass to it.

If you use ObjectInfo to print a variable, it will show its type and value

ObjectInfo can also be used to show more complex objects like the http request. This makes it easier to learn about an object’s properties and means you don’t have to guess the names of properties when you are coding.

1. Open the web site Object Info2. Open the file OutputExpressions.cshtml3. Run the example and then remark the

datetime output

4. Uncomment the following line: @* @ObjectInfo.Print(Request)*@

This will show the full request5. Pause in ObjectInfo.Print6. Run the example7. Remark the request

Figure 1: Showing ObjectInfo for the date

Figure 2: Showing a Request

What’s next: Database Access

Page | 8

This demo will show how to create and design a database with WebMatrix, that will be accessed from a Razor page.

Talking Points Demo steps Screenshots

WebMatrix uses SQL Server Compact Database engine (or SQL CE for short).

SQL Server CE is free, lightweight and does not require a separate server to run. It’s file based which means you can easily move your database files around, emailing them if you need to.

It’s also future proof because it also lets you move to SQL Server easily. This is great if you need more advanced features.

Entering demo after talking about databases

Creating a database: We can use an existing database or

create a new one using the WebMatrix tool for SQLServer Compact Edition

How to create a new database:1. Open the site DataBase2. In the lower left menu bar, Click on Database and select

“add a Database to your site”3. Give the database a name.

Figure 1: Empty Database

Figure 2: Upper ribbon bar for databases

Page | 9

Section 3Working with Databases

Designing a database:

After creating a Database, we have to add tables with data. We will use WebMatrix to design the database.

Adding tables1. In the upper ribbon bar select New Table to add a new

table in the database.2. In the dialog box for Columns properties, write a name

for the table and press enter3. Click on the Save button in the upper left and then enter

a Table name.4. In the left upper bar, right click on the database you’ve

created, and select Refresh to view the new table

Figure 3: Column properties for the new database

Connecting to the database and retrieving data:

This demo will use an existing database, “Bakery”, which is filled with data.

Razor provides the “Database” object to manage the connection from razor.

There are two ways to connect to a Database:

o Database.Openo Database.OpenConnection

StringIn this demo we will use Database.Open where we have to specify the database name

With db.Query, we will execute a query that will return a list of products. To read the results, we will use a foreach loop.

1. Open the site DatabaseWithData2. Open the database Bakery and double click on the table

Product to show the data. Show the columns: Id, Name, Description, Price and ImageName

3. In the lower left bar, select Files and open the page Products to create the connection

4. Uncomment and highlight the connection to the database:

@*@{ var db = Database.Open("Bakery"); var selectQueryString = "SELECT * FROM Products ORDER BY Name";}*@

5. Uncomment and highlight the code block that shows a list of bakery products:

@*@foreach (var row in db.Query(selectQueryString)) { <tr> <td>@row.Id</td> <td>@row.Name</td>

Figure 4: Bakery Products table

Figure 5: Bakery products

Page | 10

<td>@row.Description</td> <td>@row.Price</td> </tr>}*@

6. Highlight @row: we can access each column7. Run the Web site

What’s next: WebGrids

Page | 11

This demo will show how to display the data retrieved from a Database inside a WebGrid helper, which also allows paging and column addition.

Talking Points Demo steps Screenshots

In the previous demo we saw how to render data manually in a table

WebGrid Helper makes it easy to render an HTML table with data

Features: paging, sort, custom formatting

Entering demo after talking about WebGrids

Using a WebGrid to display data:

WebGrids can automatically render any database result as we have seen in Database Demo.

When we create a WebGrid, we send the results (data) to it, with optional additional features.

Additional features to create a WebGrid: Paging and Sorting

o defaultSort: Includes the sorting capability in the WebGrid, and also defines which column will be sorted by default.

o rowsPerPage: Adds the paging feature, and defines the rows per page

To render a WebGrid, we use the @grid.GetHtml method. In

1. Open the Web site WebGrid2. Open the page ProductsWebGrid3. Uncomment and Highlight the line where the

WebGrid is created:

// var grid = new WebGrid(data, defaultSort: "Name", rowsPerPage: 5);

4. Pause on DefaultSort to introduce Sorting5. Pause on rowsPerPage to introduce Paging

6. Uncomment and Highlight the line where the WebGrid is rendered by calling the helper:@*@grid.GetHtml( tableStyle: "grid", headerStyle: "head", alternatingRowStyle: "alt", columns: grid.Columns( grid.Column("Name", "Product", style: "product"),

Screenshot 1: WebGrid creation

Screenshot 2: WebGrid render in Razor

Page | 12

Section 4Using WebGrids

GetHTML we can specify the format and the columns if we want to improve grid appearance.

Custom Formatting: To specify the WebGrid format:

o tableStyle,headerStyle: we can use stylesheet

o alternatingRowStyle: to show alternate colors in the rows

To specify column format:o If we use stylesheets, we

can specify a style for each column data with style attribute.

o If we don’t have stylesheets or want more flexibility, we can use Format to include Razor code. In the example we are showing the description in italics.

grid.Column("Description", format:@<i>@item.Description</i>), grid.Column("Price", format:@<text>$@item.Price</text>) ))*@

Custom formatting section:7. Pause on GetHTML to explain the first three

format attributes8. Pause on grid.columns to explain column

definition9. Run the Web site

Screenshot 3: A WebGrid showing the list of items

Page | 13