Learning WebMatrix: Part 1 of 3

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

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

4. 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! 

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

6. Introducing WebMatrix Create Customize Publish

7. Introducing WebMatrix Web Server Database Development Tool

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

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

10. Web PI

11. Package installs

12. Demonstration A lap around WebMatrix

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

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

15. 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 }

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

17. Demonstration Razor syntax

18. 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); }

19. Demonstration Database Access

20. 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>$@item.Price</text>) ) ) </div> @{ vardb = Database.Open("ArtGallery"); var data = db.Query("SELECT * FROM PRODUCTS); var grid = new WebGrid( source: data, defaultSort: "Name", rowsPerPage: 3); }

21. Demonstration Webgrid

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

23. Q&A