WebMatrix is a free web development tool from Microsoft that includes everything you need for website development. Start from open source web applications, built-in web templates or just start writing code yourself. It’s all-inclusive, simple and best of all free. In this session we will walk you through on how you can create a full production feature rich open-source website from scratch.

2. Build Your Own
Real World Websites With Matrix

3. Saurabh is a Microsoft alumnus and one of the first 500
professionals around the world to be awarded Microsoft Most
Valuable Professional (Visual C#), MCT.NET, MCTS(Windows/Web),
MCSD.NET, MCAD.NET and MCDBA (Microsoft Certified Professional since 1998)

4. • What is WebMatrix?
• Razor Syntax
• Database Access
• WebGrid

5. Customize PublishCreate

6. Web Server Database Development Tool

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

8. A Lap around
The magic of Web Matrix

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

10. <ul>
<% for (int i = 0; i < 10; i++) { %>
<li><% =i %></li>
<% } %>
</ul>
WEB FORMS
6markup transitions
<ul>
<?php
for ($i = 0; $i < 10; $i++) {
echo("<li>$i</li>");
}
?>
</ul>
PHP
2markup
transitions
1display
echo
<ul>
@for (int i = 0; i < 10; i++) {
<li>@i</li>
}
</ul>
RAZOR
2markup transitions

11. @{
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
@{
var name = “John Doe”;
@: Your name: @name
}
OPTION 3
SINGLE line

12. @*
<div>
Hello World
</div>
*@
OPTION 1
MARKUP
@{
//var name = "John Doe”;
//@name
}
OPTION 2
CODE
@*
@{
var name = "John Doe";
@name
}
*@
OPTION 3
BOTH

13. Razor Syntax
Experience the change

14. SQL Compact Edition
File-based, so it’s portable. Runs without a server.
Easy to design, easy to code against
Designing
@{
var db = Database.Open("ArtGallery");
var product = db.Query("SELECT * FROM PRODUCTS);
}
Coding

15. Database Access
Let’s create our first database

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

17. Display Data
Using WebGrid

18. • What is WebMatrix?
• Razor Syntax
• Database Access
• WebGrid

19. get the latest at
http://www.facebook.com/ysaurabh
follow me at
http://www.twitter.com/ysaurabh