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

  • [アーティクル]

作成者: Joe Stagner

Tailspin Spyworks は、.NET プラットフォーム用の強力でスケーラブルなアプリケーションを作成することが非常にシンプルであることを示しています。 ASP.NET 4 の優れた新機能を使用して、ショッピング、チェックアウト、管理などのオンライン ストアを構築する方法を示します。

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

概要

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

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

単純なオンライン ストアを示すスクリーンショット。

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

訪問者がカテゴリ別に製品を閲覧できることを示すスクリーンショット。

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

訪問者が 1 つの製品を表示し、カートに追加できることを示すスクリーンショット。

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

訪問者がカートを確認し、不要になったアイテムを削除できることを示すスクリーンショット。

チェックアウトに進むと、次のメッセージが表示されます

チェックアウト時にサインインするように求めるプロンプトを示すスクリーンショット。

チェックアウト時に新しいアカウントを作成するプロンプトを示すスクリーンショット。

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

確認画面を示すスクリーンショット。

まず、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 の [ファイル] メニューから [新しいプロジェクト] を選択します。 [新しいプロジェクト] ダイアログが表示されます。

[新しいプロジェクト] 画面を示すスクリーンショット。

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

プロジェクトに名前を付ける場所を示すスクリーンショット。

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

プロジェクトの作成時に表示されるフォルダーを示すスクリーンショット。

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

基本的なフォルダー構造を示すスクリーンショット。

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

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

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

F 5 キーを押したときのアプリケーションを示すスクリーンショット。

最初のアプリケーションの機能強化は、既定の WebForms テンプレートの Style.css ファイルを、Tailspin Spyworks アプリケーションに必要なビジュアルのアセティクスをレンダリングする CSS クラスと関連するイメージ ファイルに置き換えます。

その後、default.aspx ページは次のようにレンダリングされます。

既定のページのレンダリング方法を示すスクリーンショット。

ページの右上にある画像リンクと、マスター ページに追加されたメニュー項目に注目してください。 "サインイン" リンクと "アカウント" リンクのみが、存在するページ (既定のテンプレートによって生成) と、アプリケーションのビルド時に実装する残りのページを指します。

また、マスター ページを Styles ディレクトリに再配置します。 これは好みにすぎませんが、今後アプリケーションを "スキン可能" にすることにした場合、物事が少し簡単になる可能性があります。

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

次へ