Microsoft Web Matrix


Published on

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.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • 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.
  • 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.
  • 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.
  • 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.
  • 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)
  • 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.
  • 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.
  • 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.
  • 5 minutes

    Syntax moving from code to markup

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

    Creating DB
    Designing DB
    Accessing DB using Razor
    (introduce URLData)
  • 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.
  • 5 minutes

    Build on previous data demo and place data in the WebGrid and render it.
    Add columns and paging.
  • 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

    1. 1. Build Your Own Real World Websites With Matrix
    2. 2. 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)
    3. 3. • What is WebMatrix? • Razor Syntax • Database Access • WebGrid
    4. 4. Customize PublishCreate
    5. 5. Web Server Database Development Tool
    6. 6. 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
    7. 7. A Lap around The magic of Web Matrix
    8. 8. • The easiest way to code websites • Easy to mix HTML and Code • Lots of useful Helpers
    9. 9. <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
    10. 10. @{ 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
    11. 11. @* <div> Hello World </div> *@ OPTION 1 MARKUP @{ //var name = "John Doe”; //@name } OPTION 2 CODE @* @{ var name = "John Doe"; @name } *@ OPTION 3 BOTH
    12. 12. Razor Syntax Experience the change
    13. 13. 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
    14. 14. Database Access Let’s create our first database
    15. 15. 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); }
    16. 16. Display Data Using WebGrid
    17. 17. • What is WebMatrix? • Razor Syntax • Database Access • WebGrid
    18. 18. get the latest at follow me at