パート 1: ファイル -> 新しいプロジェクト

  • [アーティクル]

作成者: Joe Stagner

Tailspin Spyworks は、.NET プラットフォーム用の高性能でスケーラブルなアプリケーションを簡単に作成できる方法を実証します。 ASP.NET 4 の優れた新機能を使用して、ショッピング、チェックアウト、管理などのオンライン ストアを構築する方法を示します。

このチュートリアル シリーズでは、Tailspin Spyworks サンプル アプリケーションを作成するために必要なすべての手順について詳しく説明します。 パート 1 では、概要とファイル/新しいプロジェクトについて説明します。

概要

このチュートリアルでは、ASP.NET WebForms の概要について説明します。 チュートリアルはゆっくりと始めるので、Web 開発経験が初心者レベルでも大丈夫です。

構築するアプリケーションは、単純なオンライン ストアです。

Screenshot that shows a simple online store.

訪問者は、カテゴリ別に製品を閲覧できます。

Screenshot that shows that visitors can browse products by category.

1 つの製品を表示し、それをカートに追加できます。

Screenshot that shows that visitors can view a single product and add it to their cart.

カートを確認し、不要になったアイテムを削除できます。

Screenshot that shows that visitors can review their cart and remove items they no longer want.

精算に進むと、ダイアログが表示されて次の操作を求められます

Screenshot that shows the prompt to sign in at checkout.

Screenshot that shows the prompt to create a new account at checkout.

注文後、簡単な確認画面が表示されます。

Screenshot that shows the confirmation screen.

まず、Visual Studio 2010 の中で新しい ASP.NET WebForms プロジェクトを作成し、機能を段階的に追加して、完全な機能するアプリケーションを作成します。 その過程で、一貫性のあるページ レイアウト、AJAX、検証、ユーザー メンバーシップなどを目的としたマスター ページを使用して、データベース アクセス、リストおよびグリッド ビュー、データ更新ページ、データ検証について説明します。

Visual Studio 2010 または無料の Visual Web Developer 2010 を https://www.microsoft.com/express/Web/ から使用できます。 アプリケーションをビルドするには、SQL Server または無料の SQL Server Express を使用し、データベースをホストできます。

ファイル/新しいプロジェクト

まず、Visual Studio の中の [ファイル] メニューから [新しいプロジェクト] を選択します。 [新しいプロジェクト] ダイアログが表示されます。

Screenshot that shows the New Project screen.

左側の [Visual C#] / [Web] テンプレート グループを選択し、それから中央の列内で [ASP.NET Web アプリケーション] テンプレートを選択します。 そのプロジェクトに「TailspinSpyworks」という名前を付けて、[OK] ボタンを押します。

Screenshot that shows where to name your project.

これにより、プロジェクトが作成されます。 右側のソリューション エクスプローラー内で、アプリケーションに含まれているフォルダーを見てみましょう。

Screenshot that shows the folders that appear when you create a project.

空のソリューションは、完全に空ではありません。基本的なフォルダー構造が追加されています。

Screenshot that shows the basic folder structure.

ASP.NET 4 の既定のプロジェクト テンプレートによって実装される規則に注目してください。

  • [Account] フォルダーには、ASP.NET のメンバーシップ サブシステム用の基本的なユーザー インターフェイスが実装されています。
  • [Scripts] フォルダーはクライアント側の JavaScript ファイルのリポジトリとして機能し、コア jQuery .js ファイルを既定で使用できます。
  • [Styles] フォルダーは、Web サイトのビジュアルを整理するために使用します (CSS スタイル シート)

F5 キーを押してアプリケーションを実行し、default.aspx ページをレンダリングすると、次のようになります。

Screenshot that shows the application when you press F 5.

最初のアプリケーションの機能強化は、既定の WebForms テンプレートの Style.css ファイルを、(Tailspin Spyworks アプリケーションに必要なビジュアルの外観をレンダリングする) CSS クラスおよび関連付けられた画像ファイルと置き換えることです。

これを実行すると、default.aspx ページは次のようにレンダリングされます。

Screenshot that shows how the default page renders.

ページの右上にある画像リンクと、マスター ページに追加されたメニュー項目に注目してください。 [Sign In] および [Account] リンクのみが (既定のテンプレートによって生成された) 存在するページを指しており、残りのページはアプリケーションを構築する際に実装します。

また、マスター ページを Styles ディレクトリに再配置します。 これはあくまでも好みですが、今後このアプリケーションで "スキンを適用可能" にすることを決めた場合に、作業が少し簡単になる場合があります。

これを実行した後、既定の ASP.NET WebForms ページによって生成されたすべての .aspx ファイル内のマスター ページ参照を変更する必要があります。

次へ