3. Agenda Overview Introducing WebMatrix Putting things into perspective Who is WebMatrix for? Who is Web Matrix intended for? Typical Usage Scenarios What it actually consists of The ASP.NET family Web Matrix Project Feature Overview Community / Code Sharing Features Installation of webmatrix WebPages A lap around WebMatrix
16. Introducing WebMatrix The Microsoft ASP.NET Web Matrix Project is a lightweight, easy to use, community-oriented tool for developing Web applications with ASP.NET
17. Putting things into perspective Task focussed tool to make it really easy to get started with web development
18. Who is WebMatrix for? I’m a professional software developer and I build complex, large scale web sites with a team of developers I want to build web sites myself with an easy to learn tool and framework I <3 Web Apps. I just need a tool that makes them easier to configure, customize and publish them WebMatrix WebMatrix Visual Studio 2010
19. Who is Web Matrix intended for? Hobbyist / Student developers Learn ASP.NET Build simple sites Work independently Want to get connected to ASP.NET community Developers who wish to try out ASP.NET Zero-cost opportunity Discover the technology and the active community
20. Typical Usage Scenarios Hobbyist Web developer Personal / family / community site Photo album, sports team, community picnic etc. Web developers currently using other technologies: Investigate / evaluate ASP.NET at zero cost New developer / Student Learn about ASP.NET for work / school project Current ASP developer Migrate simple ASP site to ASP.NET Migrate skills to ASP.NET
21. What it actually consists of Templates Web App Gallery Programming Framework: ASP.NET/PHP Web Server: IIS Express Database: SQL Server Compact/MySQL
22. The ASP.NET family ASP.NET Dynamic Data & AJAX Presentation ASP.NET WebForms ASP.NET WebPages ASP.NET MVC ASP.NET Core Core Runtime
23. Web Matrix Project Feature Overview Simple / Easy to use File based workspace (no projects) WYSIWYG Web Form Designer Integrated Data Designers Task based tools and wizards FTP hosting support Code Builders (code-generating wizards) Code Snippet Sharing
24. Web Matrix Project Feature Overview Lightweight Small footprint (~1MB + .NET Framework Redist) / fast download No project system (entirely file based) Self contained web server for testing (does not serve pages externally) Community Oriented Control / Add-in / Code builder Gallery Pickers Instant Messaging Client Integration (Web Matrix buddies) Integrated Chat Client Community Tab with links to community
25. Community / Code Sharing Features Snippets Import / Export Controls gallery integration Download controls from the Web Community tab Collection of resources MSN Messenger integration Web Matrix buddy list Community search Search community listservs MSDN integrated class browser
36. Introducing Razor The easiest way to code websites Easy to mix HTML and Code Lots of useful Helpers
37. Razor is a cut above the rest Web Forms (6 markup transitions): <ul> <% for (int i = 0; i < 10; i++) { %> <li><% =i %></li> <% } %> </ul> <ul> <?php for ($i = 0; $i < 10; $i++) { echo("<li>$i</li>"); } ?> </ul> PHP(2 markup transitions & an echo): <ul> @for (int i = 0; i < 10; i++) { <li>@i</li> } </ul> Razor (2 markup transitions):
38. Move from code to markup easily with Razor @{ 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 of output in markup
39. Commenting in Razor @* <div> Hello World </div> *@ Option 1: Markup @{ //var name = "John Doe”; //@name } Option 2: Code @* @{ var name = "John Doe"; @name } *@ Option 3: Both
41. Database SQL Compact Edition File-based, so it’s portable. Runs without a server. Easy to design, easy to code against Designing Coding @{ vardb = Database.Open("ArtGallery"); var product = db.Query("SELECT * FROM PRODUCTS); }
42. SQL CE + IIS Express SQL CE: File based (*.sdf) Runs in medium trust -> hosting! Put in App_Data folder IIS Express: No admin needed IIS capabilities + Cassini ease of use combined
44. Display your data easily with WebGrid Displays your data quickly and easily Lots of options to customize layout, appearance, paging etc. @{ vardb = 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> @{ vardb = Database.Open("ArtGallery"); var data = db.Query("SELECT * FROM PRODUCTS); var grid = new WebGrid( source: data, defaultSort: "Name", rowsPerPage: 3); }
45. Web Matrix Project and Visual Studio .NET Complementary tools Web Matrix Project Targets needs of hobbyist Web developer Focused on Web application development Built for community interaction File-based projects No support for Team-based development IntelliSense Debugging Visual Studio .NET Target the needs of professional developers Features for the enterprise developer Team and collaboration-oriented Architect features Wide range of project types Web applications to desktop Rich client applications to device applications
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.
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.
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.
10 minutesSee demo script for overview
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)
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.
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.
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.
5 minutesSyntax moving from code to markupObjectInfo()ServerInfo()
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.
5 minutesCreating DBDesigning DBAccessing DB using Razor(introduce URLData)
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.
