Learning Web Matrix - Part 1

Download Report

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): PHP (2 markup transitions & an echo): Razor (2 markup transitions):

    <%

    for (int i = 0; i < 10; i++) {

    %>

  • <%

    =i

    %>

    • <%

    }

    %>

    for ($i = 0; $i < 10; $i++) {

    echo

    ("

  • $i
    • "); }

    ?>

    @ for (int i = 0; i < 10; i++) {

  • @

    i

    • }

Move from code to markup easily with Razor Option 1: HTML Block Option 2: Text Block Option 3: Single line of output in markup @{ var name = “John Doe”;

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

Commenting in Razor

Option 1: Markup Option 2: Code Option 3: Both @*

Hello World
*@ @{ //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); }

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

Demonstration

WEBGRID

Part 1 Summary

What is WebMatrix?

Razor Syntax Database Access WebGrid

Q&A