Presented at MUGH TechMeet , Hyderabad in October 2011

1. Welcome to
MUGH TechMeet – October
2011

2. Introduction to WebMatrix
Pranav Ainavolu
Thomson Reuters
Twitter: @a_pranav | Blog: http://pranavon.net

3. Agenda
 What is WebMatrix?
 Razor Syntax
 Database Access
 WebGrid

4. Introducing WebMatrix
Create Customize Publish

5. Introducing WebMatrix
Web Server Database Development Tool

6. Who is WebMatrix for?
I <3 Web Apps. I want to build web I’m a professional
I just need a tool that sites myself with software developer
makes them easier to an easy to learn and I build complex,
configure, customize tool and large scale web sites
and publish them framework with a team of
developers

7. A lap around WebMatrix
Demo

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

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

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

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

12. Razor syntax
Demo

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

14. Database Access
Demo

15. 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);
<div id="grid">
var@grid.GetHtml(
grid @{ new WebGrid(data);
=
} columns: grid.Columns(
var db = Database.Open("ArtGallery");
grid.Column("Name", "Product", style: "product"),
var data = db.Query("SELECT * FROM PRODUCTS);
<div id="grid"> grid = new WebGrid( format:@<i>@item.Description</i>),
grid.Column("Description",
var
@grid.GetHtml();
grid.Column("Price", format:@<text>$@item.Price</text>)
source: data,
</div> ) defaultSort: "Name",
) rowsPerPage: 3);
</div> }

16. WebGrid
Demo

17. Summary
 What is WebMatrix?
 Razor Syntax
 Database Access
 WebGrid

18. Q&A
Thank You!