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

3. 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!

4. Today’s decks, demos and labs are available at www.webcamps.ms (click on Web Camps Training Kit)www.webcamps.ms Plus, there’s also content on ASP.NET MVC 3 HTML5 and IE9 jQuery Web Apps! It’s all FREE! Where do I get this content?

5. 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 Agenda

6. Introducing WebMatrix Customize Publish Create

7. Introducing WebMatrix Web ServerDatabaseDevelopment Tool

8. What it actually consists of TemplatesTemplates Web Server: IIS Express Database: SQL Server Compact/MySQL Web App Gallery Programming Framework: ASP.NET/PHP http://go.microsoft.com/fwlink/?LinkID=205867

9. 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

10. Web PI

11. Package installs

12. A LAP AROUND WEBMATRIX Demonstration

13. The easiest way to code websites Easy to mix HTML and Code Lots of useful Helpers Introducing Razor

14. Razor is a cut above the rest @for (int i = 0; i < 10; i++) { @i } @for (int i = 0; i < 10; i++) { @i } Razor (2 markup transitions): Web Forms (6 markup transitions): <?php for ($i = 0; $i < 10; $i++) { echo(" $i "); } ?> <?php for ($i = 0; $i < 10; $i++) { echo(" $i "); } ?> PHP (2 markup transitions & an echo):

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

16. Commenting in Razor @* Hello World *@ @* Hello World *@ @* @{ var name = "John Doe"; @name } *@ @* @{ var name = "John Doe"; @name } *@ Option 3: Both Option 1: Markup @{ //var name = "John Doe”; //@name } @{ //var name = "John Doe”; //@name } Option 2: Code

17. RAZOR SYNTAX Demonstration

18. SQL Compact Edition File-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); } @{ var db = Database.Open("ArtGallery"); var product = db.Query("SELECT * FROM PRODUCTS); } Coding

19. DATABASE ACCESS Demonstration

20. Displays your data quickly and easily Lots 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); } @grid.GetHtml(); @{ var db = Database.Open("ArtGallery"); var data = db.Query("SELECT * FROM PRODUCTS); var grid = new WebGrid(data); } @grid.GetHtml(); @grid.GetHtml( columns: grid.Columns( grid.Column("Name", "Product", style: "product"), grid.Column("Description", format:@ @item.Description ), grid.Column("Price", format:@ $@item.Price ) ) @grid.GetHtml( columns: grid.Columns( grid.Column("Name", "Product", style: "product"), grid.Column("Description", format:@ @item.Description ), grid.Column("Price", format:@ $@item.Price ) ) @{ var db = Database.Open("ArtGallery"); var data = db.Query("SELECT * FROM PRODUCTS); var grid = new WebGrid( source: data, defaultSort: "Name", rowsPerPage: 3); } @{ var db = Database.Open("ArtGallery"); var data = db.Query("SELECT * FROM PRODUCTS); var grid = new WebGrid( source: data, defaultSort: "Name", rowsPerPage: 3); }

21. WEBGRID Demonstration

22. What is WebMatrix? Razor Syntax Database Access WebGrid Part 1 Summary

23. Q&A