Build Your OwnReal World Websites With Matrix

Saurabh is a Microsoft alumnus and one of the first 500 professionals around the world to be awarded Microsoft Most Valuable Professional (Visual C#), MCT.NET, MCTS(Windows/Web), MCSD.NET, MCAD.NET and MCDBA (Microsoft Certified Professional since 1998)

About Me

• What is WebMatrix?

• Razor Syntax

• Database Access

• WebGrid

Agenda

Introducing Web Matrix

Customize PublishCreate

Introducing Web Matrix

Web Server Database Development Tool

Who is Web Matrix 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

A Lap aroundThe magic of Web Matrix

• The easiest way to code websites

• Easy to mix HTML and Code

• Lots of useful Helpers

Introducing Razor

Razor : Cut above the rest

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

WEB FORMS

6 markup transitions

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

PHP

2 markuptransitions 1display

echo

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

RAZOR

2 markup transitions

Razor : Code to Markup

@{ 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

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

OPTION 3

SINGLE line

Razor : Commenting Code

@* <div> Hello World </div>*@

OPTION 1

MARKUP

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

OPTION 2

CODE

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

OPTION 3

BOTH

Razor SyntaxExperience the change

Databases

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

Easy to design, easy to code against

Designing

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

Coding

Database AccessLet’s create our first database

Display data using WebGridDisplays your data quickly and easilyLots of options to customize layout, appearance, paging etc.

@{ 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);}

Display DataUsing WebGrid

• What is WebMatrix?

• Razor Syntax

• Database Access

• WebGrid

Summary

How do you reach me?

saurabh@realbox.in

8826.935.555

get the latest at

http://www.facebook.com/ysaurabh

follow me at

http://www.twitter.com/ysaurabh