Introduction towebmatrix

Editor's Notes

• #3: 1 minuteWelcome, in the next few hours we are going to learn about WebMatrix.[Introduce yourself]
• #4: 1 minuteThis session is broken down into three parts, each of approximately 50-60 minutes. At the end of this training you will have a good base understanding of WebMatrix and how to build websites and web applications using the tool and framework.In Part 1 you will learn 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.In Part 2 you will learn how to use Layouts to maintain a consistent look and feel across all of the pages within your website. You will also be introduced to the use of helpers to manage different themes in your site, connecting to Facebook and more. Then you will learn about security and websites membership. Finally you will explore how the URL routing works in WebMatrix.In Part 3 you will discover how to create your own helpers to reuse your components in WebMatrix and we will discuss about WebMatrix and Open Source Software Web Applications integration. You will then learn how to publish your web applications. We will also discuss about when and how to move to Visual Studio and ASP.NET MVC application development.
• #5: 1 minuteWebMatrix 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.
• #6: 1 minuteWebMatrix 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 simplifiedway 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.
• #7: 3 minutesWhen 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.
• #8: 10 minutesSee demo script for overview
• #9: 1 minuteWhen 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)
• #10: 2 minutesWe’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.
• #11: 1 minuteThe 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> tagOption 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.
• #12: 1 minuteIt’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.
• #13: 5 minutesSyntax moving from code to markupObjectInfo()ServerInfo()
• #14: 2 minutesThe 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.
• #15: 5 minutesCreating DBDesigning DBAccessing DB using Razor(introduce URLData)
• #16: 2 minutesAs 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 1In 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 3In 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.
• #17: 5 minutesBuild on previous data demo and place data in the WebGrid and render it.Add columns and paging.Perhaps show ajax if we have time.
• #18: 1 minuteWe 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 HelperFinally, we have learned how to customize the data displayed in WebGrids.