Powered By ALT.NET Now more than just .NET

// create a 500px by 500px surface at (25, 25)
var surface = Raphael(25, 25, 500, 500); 

// create a 500px by 500px surface in the element with id "surface"
var surface = Raphael(document.getElementById("surface", 500, 500);

var circle = surface.circe(200, 200, 100);

circle.attr("stroke", "#0000ff"); // change the outline color to blue
circle.att("fill", "#00ff00"); // change the fill color to green

circle.attr({stroke: "#0000ff", fill: "#00ff00");

// create a rectangle with the upper left corner at (200, 200) and 100px wide and 200px high
var rectangle = surface.rect(200, 200, 100, 200);

// draw a line from (100, 100) to (200, 200)
var line = surface.path("M100 100L200 200");

var arc = surface.path("M150 80A70 70 0 0 1 220 150");

var http = require('http');

var handleHTTPRequest = function(request, response) {
    response.writeHead(200, {'content-type': 'text/html'});
    response.end('Hello Node!');
}

var server = http.createServer(handleHTTPRequest);

server.listen(3000);

> node httpsvr.js

var fs = require('fs');
var url = require('url');
var path = require('path');

var handleHTTPRequest = function(request, response) {
    var _url = url.parse(request.url);
    var resource = path.basename(_url.href);
    fs.readFile('www/' + resource, function(error, data) {
        if (error)
            throw error;
        response.writeHead(200, {'content-type': 'text/html'});
        response.end(data);
    }
};

if (error) {
    if (error.code == 'ENOENT') {
        fs.readFile('www/404.html', function(error2, data) {
            response.writeHead(404, {'content-type', 'text/html'});
            response.end(data);
        });
    } else {
        throw error;
    }
} else {
    response.writeHead(200, {'content-type', 'text/html'});
    response.end(data);
}

ASP.NET WebMatrix Part 1

The best way to learn a new technology is to do something with it.  The last couple of posts I have made on ASP.NET Web Pages have been more of an intro to features instead of showing something practical.  While the application I am going to build in this series is not production ready, it will show off the features in an application.

The application I am going to build is a simple address book.  When I say simple, I mean it.  An address in this case consists of a first name, last name, and email address.  The application will show a list of addresses, create new address, edit addresses and delete addresses.  In this first part we will set up the project, create the database, make a few pages and get the list to work.

Setup the project

The first thing to do is open WebMatrix in the Start Menu:

Assuming you have not changed the default settings (or this is the first time you have started WebMatrix) you will get a splash screen with these options:

(Click picture for larger version)

We are going to select “Site From Template” and be presented with the following dialog:

(Click picture for larger version)

Select “Empty Site”, give it a name of “AddressBookDemo” and click “OK”.

Create the database

We are now ready to create the database.  In the lower left corner of the window are some options.  Click on “Databases”:

Next click on the “New Database” button in the ribbon bar at the top of the screen:

A new database will be created under AddressBookDemo.  The default name is “AddressBookDemo.sdf” but you can change it.  I am going to leave it and just press Return.

Make sure the “Definition” button in the ribbon is clicked:

The next step is to create a new table.  At the top of the window in the ribbon bar is a “New Table” button.  Click it to create a new table in our database:

This will open up the table designer:

(Click picture for larger version)

In this dialog, we will define the structure of our table.  As I said before, the address will be very simple with just a first name, last name and email address.  Also, the database will want an ID which will just be an auto incrementing integer.

Click to the right of “(Name)” in Column Properties at the bottom of the designer.  Type in “ID”.  Use the drop-down next to “Data Type” to set the type to “int”.  Do the same with the drop-downs next to “Is Identity?” and “Is Primary Key?” to set them to True.  When creating a primary key, WebMatrix will set “Allows Nulls” to False.

Next click the “New Column” button at the top of the window:

Repeat the steps above (with the exception of setting the primary key and identity) to create three more columns:

• FirstName, type nvarchar (leave the length default of 100)
• LastName, type nvarchar
• EmailAddress, type nvarchar

Next, click the “Data” button and fill in the table as follows:

(Click picture for larger version)

Save the table by pressing Ctrl+S.  Name it “Addresses”.

Folder structure

With the database set up, we can create the folder structure for our application.  There will be two folders in the root: Shared for common files, and Styles for stylesheets.  Click on the Files option in the lower left of the window:

Right click on the “AddressBookDemo” folder, and select “New Folder”:

Name the folder “Shared”.  Repeat for “Styles”.

Create the stylesheet

The new stylesheet will be called “Site.css”.  To create it, right-click on “Styles” and select “New File”:

(Click picture for larger version)

Select “CSS” and name the file “Site.css” and click “OK”:

(Click picture for larger version)

Add the following to the file:

* {
    /* Poor man's reset */
    padding: 0;
    margin: 0;
    font-family: Arial, sans-serif;
    font-size: 12px;
}

div#top-menu {
    border-bottom: 1px solid #ccffcc;
    padding: 0 0 0 10px;
}

div#top-menu ul {
    list-style-type: none;
}

div#top-menu ul li {
    display: block;
    float: left;
}

div#top-menu ul li a {
    text-decoration: none;
    color: #000000;
    font-weight: bold;
    padding: 10px;
    display: block;
}

div#top-menu ul li a:hover {
    color: #006600;
    background-color: #ccffcc;
}

.clear {
    clear: both;
}

.listFirstName, .listLastName, .listEmailAddress, .listEditButton, .listDeleteButton {
    display: block;
    float:left;
    width: 200px;
}

.columnHeader {
    font-weight: bold;
    font-size: 16px;
    color: #006600;
    margin: 0 0 10px 0;
}

.addressDisplay {
    margin: 10px;
}

h1 {
    font-size: 34px;
    font-weight: bold;
    color: #006600;
}

Create the layout

Right-click on the “Shared” folder and select “New File”.  Create a new .cshtml file called “_Layout.cshtml”.  This will be the base page for our application.  Add a reference to our stylesheet in the head tag:

<link href="@Href("/Styles/Site.css")" rel="stylesheet" type="text/css"/>

Next, in the body, add the following code:

<div id="main_content">
    @RenderBody()
</div>

To see our layout page in the browser, create a new .cshtml file in the root of the application and call it “Home.cshtml”.  Replace the contents of the page with the following:

@{
    Layout = "/Shared/_Layout.cshtml";
}

<div class="addressDisplay">
    <h1>Address Book</h1>
</div>

This should be familiar from my previous post about sectional content in Razor.  What we have done is assigned the _Layout.cshtml to be our layout file.  Then when RenderBody is called in the layout file, it will insert the markup in Home.cshtml.  Next, click on the Home.cshtml file in the file list on the left side and click the “Run” at the top of the window:

It looks like this in the browser:

Adding the menu

To make things a little more interesting visually, we will add a navigation menu at the top of the layout page.  In the “Shared” folder, create another .cshtml file and call it “_Menu.cshtml”.  Replace the contents of the file with the following:

<div id="top-menu">
    <ul>
        <li><a href="/Index">Home</a></li>
        <li><a href="/Create">Create</a></li>
        <li><a href="/List">List</a></li>
    </ul>
    <div class="clear"></div>
</div>

This should appear at the top of every page so we need to have it render in the layout file.  Add the following after the body tag in _Layout.cshtml:

@RenderPage("/Shared/_Menu.cshtml")

Since we are referencing this file by name, we use the RenderPage helper as described in my previous post.  The result (when combined with the CSS) is the following:

Creating the list view

For the last part of this post, we will create the list view.  You might have noticed that all of the URLs for the links in the menu have no extension.  This is a nice feature of ASP.NET Web Pages that lets us create cleaner more SEO and bookmark friendly URLs.  The list view will be in a file called List.cshtml in the root folder (go ahead and create it) but we can access it at either /List.cshtml or /List.  Also, we can access the Home view at either /Home.cshtml or /Home.  I am using the latter as you can see in the menu.

Remove all the contents of the list view and put the following code in:

@{
    Layout = "/Shared/_Layout.cshtml";
    var db = Database.Open("AddressBookDemo");
    var queryList = db.Query("select * from Addresses");
}

The first line should be self-explanatory.  The second line uses the Open method on the built-in Database object to create a connection to our AddressBookDemo database.  Then we perform a SQL query on that connection object the retrieve all of the rows in the Addresses table.

The rest of the list view is this:

<div class="addressDisplay">
    <div class="listFirstName columnHeader">First Name</div>
    <div class="listLastName columnHeader">Last Name</div>
    <div class="listEmailAddress columnHeader">Email Address</div>
    <div class="listEditButton columnHeader"></div>
    <div class="listDeleteButton columnHeader"></div>
    <div class="clear"></div>
    @foreach(var address in queryList) {
        <div class="listFirstName">@address.FirstName</div>
        <div class="listLastName">@address.LastName</div>
        <div class="listEmailAddress">@address.EmailAddress</div>
        <div class="listEditButton"><a href="/Edit/@address.ID">Edit</a></div>
        <div class="listDeleteButton"><a href="/Delete/@address.ID">Delete</a></div>
        <div class="clear"></div>
    }
</div>

The first set of DIVs are the column headers.  Then, using Razor syntax, we use a foreach loop to get each row in the query.  The query is a ReadOnlyCollection instance.  Within the loop, we can use Razor syntax to easily access the properties of each address.  When combined with the CSS, we get this result:

(Click picture for larger version)

Setting the default page

That’s almost it for this part.  We need a final thing though.  The default page for the application needs to be Home.cshtml.  Click on “Site” in the lower left of the window:

And click “Settings” in the pane:

The site settings will appear:

(Click picture for larger version)

In the Manage Default Pages section, at the bottom, type Home.cshtml into the textbox and click “Add”:

(Click picture for larger version)

Home.cshtml is now at the top of the list and will be the first default page for the application.

The End

There is a lot more that WebMatrix can do.  In the next part, we will round out the editing of the database.  Please feel free to leave comments and concerns.

Source code: AddressBookDemo.zip

<html>
  <head>
    <title>Layout</title>
  </head>
  <body>
    <h1>My Layout Page</h1>
    <div id="content">
      @RenderBody()
    </div>
  </body>
</html>

@ {
  Layout = "/Shared/_Layout.cshtml";
  // we have to use the semicolon after a statement in a code block
}
This is the content.

<div id="menu">
  <ul class="top-menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">About</a></li>
  </ul>
</div>

@RenderPage("/Shared/_Menu.cshtml")

ul.top-menu {
    list-style-type: none;
}

ul.top-menu li {
    display: inline;
}

ul.top-menu li a {
    color: #000000;
    text-decoration: none;
}

ul.top-menu li a:hover {
    text-decoration: underline;
}

<link href="@Href("/Styles/Site.css")" rel="stylesheet" type="text/css"/>

@section logo {
  <div id="brand">
    <img src="@Href("/Shared/Site.css")"/>
  </div>
}

@RenderSection("logo")

var deferred = $.Deferred();