Learning WebMatrix: Part 1 of 3Akber Alwani http://twitter.com/epdotnet

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

You are a Web Camper!

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 3HTML5 and IE9jQueryWeb Apps!

It’s all FREE!

Where do I get this content?

Part 1What is WebMatrix?Razor SyntaxDatabase AccessWebGrid

Part 2LayoutsHelpers

Themes, Package Manager, Facebook and more

MembershipRouting

Part 3Building HelpersWebMatrix and OSS Web AppsPublishing your website or web appHow to “grow up” to Visual Studio 2010 and ASP.NET MVC

Agenda

Introducing WebMatrix

Customize PublishCreate

Introducing WebMatrix

Web Server Database Development Tool

What it actually consists of

Templates

Web Server: IIS Express

Database: SQL Server Compact/MySQL

Web App Gallery

Programming Framework: ASP.NET/PHP

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

WebMatrix WebMatrix

Visual Studio 2010

Web PI

Package installs

A LAP AROUND WEBMATRIX

Demonstration

The easiest way to code websitesEasy to mix HTML and CodeLots of useful Helpers

Introducing Razor

Razor is a cut above the rest

<ul> <% for (int i = 0; i < 10; i++) { %> <li><% =i %></li> <% } %></ul>

<ul> @for (int i = 0; i < 10; i++) { <li>@i</li> }</ul>

Razor (2 markup transitions):

Web Forms (6 markup transitions):

<ul> <?php for ($i = 0; $i < 10; $i++) { echo("<li>$i</li>"); } ?></ul>

PHP(2 markup transitions

& an echo):

Move from code to markup easily with Razor

@{ var name = “John Doe”; <div> Your name: @name </div>}

@{ var name = “John Doe”; @: Your name: @name}

Option 3:Single line of output

in markup

Option 1:HTML Block

@{ var name = “John Doe”; <text> Your name: @name </text>}

Option 2:Text Block

Commenting in Razor@* <div> Hello World </div>*@

@* @{ var name = "John Doe"; @name }*@

Option 3:Both

Option 1:Markup

@{ //var name = "John Doe”; //@name}

Option 2:Code

RAZOR SYNTAXDemonstration

SQL Compact EditionFile-based, so it’s portable. Runs without a server.

Easy to design, easy to code against

Database

Designing

@{ var db = Database.Open("ArtGallery"); var product = db.Query("SELECT * FROM PRODUCTS); }

Coding

DATABASE ACCESSDemonstration

Displays your data quickly and easilyLots of options to customize layout, appearance, paging etc.

Display your data easily with WebGrid

@{ var db = Database.Open("ArtGallery"); var data = db.Query("SELECT * FROM PRODUCTS);

var grid = new WebGrid(data);}

<div id="grid"> @grid.GetHtml();</div>

<div id="grid"> @grid.GetHtml( columns: grid.Columns( grid.Column("Name", "Product", style: "product"), grid.Column("Description", format:@<i>@item.Description</i>), grid.Column("Price", format:@<text>$@item.Price</text>) ) )</div>

@{ var db = Database.Open("ArtGallery"); var data = db.Query("SELECT * FROM PRODUCTS); var grid = new WebGrid( source: data, defaultSort: "Name", rowsPerPage: 3);}

WEBGRIDDemonstration

What is WebMatrix?Razor SyntaxDatabase AccessWebGrid

Part 1 Summary

Q&A