Transcript Learning Web Matrix - Part 1

Learning
WebMatrix:
Part 1 of 3
Akber Alwani
http://twitter.com/epdotnet
You are a Web Camper!
Congratulations! You are part of a global
community of thousands of web developers
who attend Web Camps to keep their web
development skills up-to-date
Web Camps are run all over the world in 6
continents, 30 countries
Join the community!
Facebook Fan Page (search for Web Camps)
Follow @Webcamps on Twitter
Find out more about events here:
www.webcamps.ms
Where do I get this content?
Today’s decks, demos and labs are
available at www.webcamps.ms (click
on Web Camps Training Kit)
Plus, there’s also content on
ASP.NET MVC 3
HTML5 and IE9
jQuery
Web Apps!
It’s all FREE! 
Agenda
Part 1
What is WebMatrix?
Razor Syntax
Database Access
WebGrid
Part 2
Layouts
Helpers
Themes, Package Manager, Facebook and more
Membership
Routing
Part 3
Building Helpers
WebMatrix and OSS Web Apps
Publishing your website or web app
How to “grow up” to Visual Studio 2010 and ASP.NET MVC
Introducing WebMatrix
Create
Customize
Publish
Introducing WebMatrix
Web Server
Database
Development Tool
What it actually consists of
Templates
Web App
Gallery
Programming Framework:
ASP.NET/PHP
Web Server: IIS Express
Database: SQL Server
Compact/MySQL
http://go.microsoft.com/fwlink/?LinkID=205867
Who is WebMatrix for?
I <3 Web Apps.
I just need a tool that
makes them easier to
configure, customize
and publish them
I want to build web
sites myself with an
easy to learn tool
and framework
I’m a professional
software developer
and I build complex,
large scale web sites
with a team of
developers
Web PI
Package installs
Demonstration
A LAP AROUND WEBMATRIX
Introducing Razor
The easiest way to code websites
Easy to mix HTML and Code
Lots of useful Helpers
Razor is a cut above the rest
Web Forms
(6 markup transitions):
<ul>
<% for (int i = 0; i < 10; i++) { %>
<li><% =i %></li>
<% } %>
</ul>
PHP
(2 markup transitions
& an echo):
<ul>
<?php
for ($i = 0; $i < 10; $i++) {
echo("<li>$i</li>");
}
?>
</ul>
Razor
(2 markup transitions):
<ul>
@for (int i = 0; i < 10; i++) {
<li>@i</li>
}
</ul>
Move from code to markup
easily with Razor
@{
var name = “John Doe”;
<div>
Your name: @name
</div>
Option 1:
HTML Block
}
@{
var name = “John Doe”;
<text>
Your name: @name
</text>
Option 2:
Text Block
}
Option 3:
Single line of output
in markup
@{
var name = “John Doe”;
@: Your name: @name
}
Commenting in Razor
Option 1:
Markup
Option 2:
Code
Option 3:
Both
@*
<div>
Hello World
</div>
*@
@{
//var name = "John Doe”;
//@name
}
@*
@{
var name = "John Doe";
@name
}
*@
Demonstration
RAZOR SYNTAX
Database
SQL Compact Edition
File-based, so it’s portable. Runs without a server.
Easy to design, easy to code against
Designing
Coding
@{
var db = Database.Open("ArtGallery");
var product = db.Query("SELECT * FROM PRODUCTS);
}
Demonstration
DATABASE ACCESS
Display your data easily with WebGrid
Displays your data quickly and easily
Lots of options to customize layout,
appearance, paging etc.
@{
var db = Database.Open("ArtGallery");
var data = db.Query("SELECT * FROM PRODUCTS);
<div id="grid">
[email protected](
grid @{
= new WebGrid(data);
}
columns:
var grid.Columns(
db = Database.Open("ArtGallery");
grid.Column("Name",
"Product", style:
var data = db.Query("SELECT
* FROM "product"),
PRODUCTS);
<div id="grid">
grid.Column("Description",
var grid = new WebGrid( format:@<i>@item.Description</i>),
@grid.GetHtml();
grid.Column("Price", format:@<text>[email protected]</text>)
source: data,
</div> )
defaultSort: "Name",
)
rowsPerPage: 3);
</div> }
Demonstration
WEBGRID
Part 1 Summary
What is WebMatrix?
Razor Syntax
Database Access
WebGrid
Q&A