第 3 部:レイアウトとカテゴリ メニュー

作成者: Joe Stagner

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

このチュートリアル シリーズでは、Tailspin Spyworks サンプル アプリケーションをビルドするために実行されるすべての手順について詳しく説明します。 パート 3 では、レイアウトとカテゴリ メニューの追加について説明します。

一部のレイアウトとカテゴリ メニューの追加

サイト マスター ページでは、製品カテゴリ メニューを含む左側の列の div を追加します。

<div id="content">
  <div id="rightColumn"></div>
  <div id="mainContent">
    <div id="centerColumn">
       <asp:ContentPlaceHolder ID="MainContent" runat="server"></asp:ContentPlaceHolder>
    </div>
  </div>
  <div id="leftColumn">
<!-- Our menu will go here -->       
  </div>
  <div class="clear"></div>
</div>

必要なアラインメントやその他の書式設定は、Style.css ファイルに追加した CSS クラスによって提供されることに注意してください。

#leftColumn
{
position: relative;float: left;width: 14em;padding: 2em 1.5em 2em;background: #fff url('images/a1.gif') repeat-y right top;
        top: 1px;
        left: 0px;
        height: 100%;
}

製品カテゴリ メニューは、既存の製品カテゴリについて Commerce データベースにクエリを実行し、メニュー項目と対応するリンクを作成することで、実行時に動的に作成されます。

これを実現するには、ASP の 2 つを使用します。NET の強力なデータ コントロール。 "Entity Data Source" コントロールと "ListView" コントロール。

"デザイン ビュー" に切り替えて、ヘルパーを使用してコントロールを構成してみましょう。

EntityDataSource ID プロパティを EDS_Category_Menu に設定し、[データ ソースの構成] をクリックします。

Commerce Database のエンティティ データ ソース モデルを作成したときに作成した CommerceEntities 接続を選択し、[次へ] をクリックします。

[カテゴリ] エンティティ セット名を選択し、残りのオプションを既定値のままにします。 [完了] をクリックします。

次に、ページに配置した ListView コントロール インスタンスの ID プロパティを、そのヘルパーをListView_ProductsMenuしてアクティブ化するように設定します。

コントロール オプションを使用してデータ項目の表示と書式設定を書式設定することもできますが、メニューの作成には単純なマークアップのみが必要になるため、ソース ビューにコードを入力します。

<asp:ListView ID="ListView_ProductsMenu" runat="server" DataKeyNames="CategoryID" 	DataSourceID="EDS_Category_Menu">
   <EmptyDataTemplate>No Menu Items.</EmptyDataTemplate>
   <ItemSeparatorTemplate></ItemSeparatorTemplate>
   <ItemTemplate>
      <li>
         <a href='<%# VirtualPathUtility.ToAbsolute("~/ProductsList.aspx?CategoryId=" + 
                                Eval("CategoryID")) %>'><%# Eval("CategoryName") %></a>
      </li>
   </ItemTemplate>               
   <LayoutTemplate>
      <ul ID="itemPlaceholderContainer" runat="server">
         <li runat="server" id="itemPlaceholder" />
      </ul>
      <div>
      </div>
   </LayoutTemplate>

"Eval" ステートメント : <%# Eval("CategoryName") %>

ASP.NET 構文 <%# %> は、ランタイムに、含まれているものを実行し、結果を "行内" で出力するように指示する省略形の規則です。

ステートメント Eval("CategoryName") は、データ項目のバインドされたコレクション内の現在のエントリに対して、エンティティ モデル項目名 "CategoryName" の値をフェッチするように指示します。 これは非常に強力な機能の簡潔な構文です。

ここでアプリケーションを実行します。

製品カテゴリ メニューが表示され、カテゴリメニュー項目の 1 つをポイントすると、メニュー項目リンクが、ProductsList.aspx という名前のページを指し示し、カテゴリ ID を含む動的クエリ文字列引数を作成したことに注意してください。

前へ次へ