Tailspin Spyworks demonstrates how extraordinarily simple it is to create powerful, scalable applications for the .NET platform. It shows off how to use the great new features in ASP.NET 4 to build an online store, including shopping, checkout, and administration.
通過Tailspin Spyworks 演示在.NET平臺創建功能強大，結構良好的應用程序有多麼簡單。演示如何使用ASP.NET 4的新特性創建一個包含購物、結算和管理功能的在線網店。
This tutorial series details all of the steps taken to build the Tailspin Spyworks sample application. Part 1 covers Overview and File/New Project.
本系列指南對構建案例程序的每一步做了詳細的解釋。第一部分包括綜述和創建新項目。
概述
This tutorial is an introduction to ASP.NET WebForms. We'll be starting slowly, so beginner level web development experience is okay.
The application we'll be building is a simple on-line store.
指南介紹ASP.NET WebForms，不需要太多web開發經驗也能明白。
Visitors can browse Products by Category:
顧客可通過類別瀏覽商品：
They can view a single product and add it to their cart:
可瀏覽具體商品病添加到購物車：
They can review their cart, removing any items they no longer want:
可查看購物車，移除不想要的商品：
Proceeding to Checkout will prompt them to
執行結束將會把顧客引入此界面：
After ordering, they see a simple confirmation screen:
訂購之後，顧客看到確認界面：
We'll begin by creating a new ASP.NET WebForms project in Visual Studio 2010, and we'll incrementally add features to create a complete functioning application. Along the way, we'll cover database access, list and grid views, data update pages, data validation, using master pages for consistent page layout, AJAX, validation, user membership, and more.
首先創建VS 2010的項目，隨後逐步添加功能完成一個完整的程序。此過程將包括數據庫訪問，list和gridview，數據更新頁面，數據驗證，使用master頁面控制佈局，AJAX，驗證、用戶管理等。
You can follow along step by step, or you can download the completed application fromhttp://tailspinspyworks.codeplex.com/
可跟隨步驟完成，也可去http://tailspinspyworks.codeplex.com/下載完整的程序。
You can use either Visual Studio 2010 or the free Visual Web Developer 2010 fromhttp://www.microsoft.com/express/Web/. To build the application, you can use either SQL Server or the free SQL Server Express to host the database.
可使用VS2010或免費的VWD2010.數據庫可使用SQL Server或免費的SQL Server Express
/ew Project
/ New Project
創建新項目
We'll start by selecting the New Project from the File menu in Visual Studio. This brings up the New Project dialog.
新建項目。
We’ll select the Visual C# / Web Templates group on the left, and then choose the “ASP.NET Web Application” template in the center column. Name your project TailspinSpyworks and press the OK button.
如下圖選擇、設置，然後點擊OK按鈕。
This will create our project. Let's take a look at the folders that are included in our application in the Solution Explorer on the right side.
創建項目之後的界面效果。
The Empty Solution isn't completely empty – it adds a basic folder structure:
解決方案管理器中列出的程序基本結構：
Note the conventions implemented by the ASP.NET 4 default project template.
注意默認文件夾的功能。
- The "Account" folder implements a basic user interface for ASP.NET's membership subsystem.
- The "Scripts" folder serves as the repository for client side JavaScript files and the core jQuery .js files are made available by default.
- The "Styles" folder is used to organize our web site visuals (CSS Style Sheets)
When we press F5 to run our application and render the default.aspx page we see the following.
點擊F5，運行效果如下：
Our first application enhancement will be to replace the Style.css file from the default WebForms template with the CSS classes and associated image files that will render the visual asthetics that we want for our Tailspin Spyworks application.
替換掉默認的Style.css文件，修改顯示效果，將相應需要的圖片添加到項目中。
After doing so our default.aspx page renders like this.
修改後，頁面效果如下：
Notice the image links at the top right of the page and the menu items that have been added to the master page. Only the "Sign In" and "Account" links point to pages that exist (generated by the default template) and the rest of the pages we will implement as we build our application.
注意，右上方的圖片鏈接和紅色的菜單添加到了master頁面中。其中只有“Sign In”和“Account”鏈接已經可用，別的隨後會逐一實現。
We're also going to relocate the Master Page to the Styles directory. Though this is only a preference it may make things a little easier if we decide to make our application "skinable" in the future.
將Master頁面重定位到Sytles文件夾。這樣做以便於後期需要爲程序實現“主題風格可變”時使用。
After doing this we'll need to change the master page references in all the .aspx files generated by the default ASP.NET WebForms pages.
