PPTX, PDF1,907 views

Microsoft Web Matrix

The document discusses building real-world websites using WebMatrix, a development tool favored by professionals for its ease of use, including features like Razor syntax and database access. It highlights the advantages of mixing HTML with code and utilizing web grids for displaying data. The author, a Microsoft MVP, shares insights on customizing and publishing websites effectively.

Technology◦

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)

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

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

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

<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

@{
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

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

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

Database Access
Let’s create our first database

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

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

Microsoft Web Matrix

2.
Build Your Own RealWorld Websites With Matrix
3.
Saurabh is aMicrosoft 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 isWebMatrix? • Razor Syntax • Database Access • WebGrid
5.
Customize PublishCreate
6.
Web Server DatabaseDevelopment Tool
7.
I <3 WebApps. 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 Themagic of Web Matrix
9.
• The easiestway to code websites • Easy to mix HTML and Code • Lots of useful Helpers
10.
<ul> <% for (inti = 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 @{ //varname = "John Doe”; //@name } OPTION 2 CODE @* @{ var name = "John Doe"; @name } *@ OPTION 3 BOTH
13.
Razor Syntax Experience thechange
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 createour first database
16.
Displays your dataquickly 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 isWebMatrix? • Razor Syntax • Database Access • WebGrid
19.
get the latestat http://www.facebook.com/ysaurabh follow me at http://www.twitter.com/ysaurabh

Editor's Notes

#5 What WebMatrix is, who the intended users are for WebMatrix and what the Razor Syntax is. You will also learn how to access a database and how to use a WebGrid control to present its data in table format.
#6 1 minute WebMatrix is a free tool that makes it really easy to create, configure and publish your web sites and web applications. It’s built on Microsoft’s in depth knowledge of web platforms, tools and frameworks and surfaced in a more approachable and straightforward way. As we go through the training you should keep these three main focus areas in your mind; create, customize and publish – we’ll be touching on them as we cover the different areas of WebMatrix.
#7 1 minute WebMatrix comes with everything you need to get started building websites and web applications: A complete and integrated development environment, with a small download and a simple install. You get a database engine (SQL Server Compact Edition) to handle your data. All the structures you create in this database engine will be compatible with professional versions of SQL Server. WebMatrix supports a Web Server (IIS Express) to serve all your web pages. This web server is compatible with the professional versions of IIS as well. WebMatrix also comes with a new, simple programming framework that allows for rapid development of web sites and web applications. It supports Razor, the latest and simplified way to code web sites. It also provides a gallery of free open source applications to complement your development. It comes with an integrated installer that manages the heavy lifting of downloading and installing each component.
#8 3 minutes When we look at all the different profiles of people creating websites we see certain patterns emerge. First, there’s a group of people that like to use the large number of rich web applications out there as a starting point, and then add some specific functionality. They need a quick and easy way to customize and publish their solutions. Many of these web applications are tailored for specific tasks like Content Management Systems or eCommerce websites. These developers will often repeat this process many times for each customer, their goal is to make the process of acquiring the application, customization and publishing it as quick as possible. A second group need to create web apps from scratch. These developers are hobbyists, beginners and people who need a tool that is easy to learn and that allows them to focus on the application functionality instead of developers’ details. Finally, the group of professional developers. They need a powerful tool, full of features and able to work in team, perhaps distributed ones. They will use a source and version control and will need a testing framework to write their own unit tests. This tool needs to support the addition of 3rd party powerful extensions. WebMatrix is built for those developers that like to start from scratch or by building from a 3rd party web applications.
#10 1 minute When you create a new website from scratch in WebMatrix, you will be using the new Razor syntax. It’s very compact and easy to read and write, and allows you to flow between code and markup seamlessly. You can write your code in languages such as C# or VB, and it’s extensible via Helpers (we’ll talk about Helpers in Part 3)
#11 2 minutes We’ve designed Razor to be concise and easy to use. When we think about the way developers use a language we take into account the context switching they have to do and also the number of keystrokes. The way that Razor allows you to transition seamlessly between markup and code makes for a much more natural and fluent style and also helps to reduce the number of keystrokes and context switching that a developer has to do, thinking about markup and code separately. With Razor, markup and code are really the same thing. We think it’s the easiest way to code websites and when you compare it to the other languages out there, it’s easy to see why.
#12 1 minute The transition from code to markup is one of the most elegant things about Razor but there a few rules that are worth knowing about. Option 1: Code is the primary citizen in a code block, not HTML. This means the parser will always expect code unless it finds valid opening (and closing) tags. In the first option block you see that after the @{ a name variable is defined. No additional tag is necessary. A <div> section tells Razor that what follows should be taken as literal. Then the @name indicates a variable that needs to be replaced with its value. Option 2: Similarly, to explicitly call out text in a code block as HTML, wrap it in a <text> tag Option 3: Single line of output within markup can be denoted by @: This option is useful when you don’t want to render an HTML element as part of the output. Extra Knowledge (Advanced): The Parser that understands Razor is itself a standalone assembly (System.Web.Razor.dll) which has no dependencies on ASP.NET which means you can use it to parse CSHTML/VBHTML files and produce C#/VB code in any .NET application.
#13 1 minute It’s always good practice to comment your code. In Razor we have the following options for commenting: Option 1: You can comment a block by using @* … *@ Please note that this method could not be recursive (you could not have a @* inside another @*) Option 2: You can comment lines by using // (in C#) the same way you do in your code files. Option 3: If you need to comment a whole razor block, you should add a @* before the beginning of the code block and a *@ after it’s finish.
#14 5 minutes Syntax moving from code to markup ObjectInfo() ServerInfo()
#15 2 minutes The database that comes with WebMatrix is SQL Compact Edition, or SQL CE for short. It’s free, lightweight and doesn’t require a separate server to run – which makes it much easier to get setup and running than traditional versions of SQL Server like SQL Server Express. SQL Compact Edition includes tools to manage your tables and data and because it’s file-based, you simply need to copy the database files to transport your database to another machine. This is really useful if you are sharing a database with another developer. This sample code shows how to connect to an ArtGallery Database and then perform a query with SQL to retrieve the ArtGallery products.
#16 5 minutes Creating DB Designing DB Accessing DB using Razor (introduce URLData)
#17 2 minutes As we’ve seen, the database design and access from Razor code in WebMatrix is easy. Often when we’re building websites, we’ll want to render data in some form of table. The WebGrid can help to make this easy to do. Build 1 In it’s simplest form, just give the WebGrid data and it will render it out in a valid HTML table. WebMatrix will make all the magic for you. But this has a few drawbacks: You’re not choosing the columns you want to show and they will be named as the field names in the database. Build 2 In the second sample, you explicitly state which columns to include in the WebGrid, their title (e.g.: «Product» instead of «Name») and how they will be formatted: Product column will use a CSS style, Description will appear in italic font, and so on. Build 3 In the last sample, you can see that we order the data by the «Name» column and by simply defining one parameter, we state that we want 3 rows per page. WebMatrix will do the rest for you.
#18 5 minutes Build on previous data demo and place data in the WebGrid and render it. Add columns and paging.
#19 1 minute We have learnt what is WebMatrix and who is it for. We had an overview Razor, a new way to code websites. We learned how to consume a database and how to display its data with a WebGrid Helper Finally, we have learned how to customize the data displayed in WebGrids.

Microsoft Web Matrix

More Related Content

What's hot

Similar to Microsoft Web Matrix

Recently uploaded

Microsoft Web Matrix

Editor's Notes