Download
1 / 23

Learning WebMatrix: Part 1 of 3 - PowerPoint PPT Presentation


  • 90 Views
  • Uploaded on

Learning WebMatrix: Part 1 of 3. Akber Alwani http://twitter.com/epdotnet. You are a Web Camper!. Congratulations! Y ou are part of a global community of thousands of web developers who attend Web Camps to keep their web development skills up-to-date

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' Learning WebMatrix: Part 1 of 3' - tommy


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Learning webmatrix part 1 of 3
Learning WebMatrix: Part 1 of 3

AkberAlwani

http://twitter.com/epdotnet


You are a web camper
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
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
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
Introducing WebMatrix

Create

Customize

Publish


Introducing webmatrix1
Introducing WebMatrix

Web Server

Database

Development Tool


What it actually consists of
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
Who is WebMatrix for?

I’m a professional software developer and I build complex, large scale web sites with a team of developers

I want to build web sites myself with an easy to learn tool and framework

I <3 Web Apps. I just need a tool that makes them easier to configure, customize and publish them

WebMatrix

WebMatrix

Visual Studio 2010




A lap around webmatrix

Demonstration

A lap around WebMatrix


Introducing razor
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
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>


M ove from code to markup easily with razor
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
Commenting in Razor

@*

<div>

Hello World

</div>

*@

Option 1:

Markup

@{

//var name = "John Doe”;

//@name

}

Option 2:

Code

@*

@{

var name = "John Doe";

@name

}

*@

Option 3:

Both


Razor syntax

Demonstration

Razor syntax


Database
Database

  • SQL Compact Edition

    • File-based, so it’s portable. Runs without a server.

  • Easy to design, easy to code against

Designing

Coding

@{

vardb = Database.Open("ArtGallery");

var product = db.Query("SELECT * FROM PRODUCTS);

}


Database access

Demonstration

Database Access


Display your data easily with webgrid
Display your data easily with WebGrid

  • Displays your data quickly and easily

  • Lots of options to customize layout, appearance, paging etc.

@{

vardb = 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>[email protected]</text>)

)

)

</div>

@{

vardb = Database.Open("ArtGallery");

var data = db.Query("SELECT * FROM PRODUCTS);

var grid = new WebGrid(

source: data,

defaultSort: "Name",

rowsPerPage: 3);

}


Webgrid

Demonstration

Webgrid


Part 1 summary
Part 1 Summary

  • What is WebMatrix?

  • Razor Syntax

  • Database Access

  • WebGrid



ad