3부: 레이아웃 및 범주 메뉴

작성자 : Joe Stagner

Tailspin Spyworks는 .NET 플랫폼에 대해 강력하고 확장 가능한 애플리케이션을 만드는 것이 얼마나 간단한지 보여 줍니다. ASP.NET 4의 새로운 기능을 사용하여 쇼핑, 체크 아웃 및 관리를 포함한 온라인 스토어를 구축하는 방법을 보여줍니다.

이 자습서 시리즈에서는 Tailspin Spyworks 샘플 애플리케이션을 빌드하기 위해 수행되는 모든 단계를 자세히 설명합니다. 3부에서는 레이아웃 및 범주 메뉴 추가를 다룹니다.

일부 레이아웃 및 범주 메뉴 추가

사이트 master 페이지에서 제품 범주 메뉴를 포함할 왼쪽 열에 대한 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를 사용합니다. NET의 강력한 데이터 컨트롤. "엔터티 데이터 원본" 컨트롤 및 "ListView" 컨트롤입니다.

"디자인 뷰"로 전환하고 도우미를 사용하여 컨트롤을 구성해 보겠습니다.

EntityDataSource ID 속성을 EDS_Category_Menu 설정하고 "데이터 원본 구성"을 클릭합니다.

상거래 데이터베이스에 대한 엔터티 데이터 원본 모델을 만들 때 만든 CommerceEntities 연결을 선택하고 "다음"을 클릭합니다.

"범주" 엔터티 집합 이름을 선택하고 나머지 옵션을 기본값으로 둡니다. "마침"을 클릭합니다.

이제 페이지에 배치한 ListView 컨트롤 instance 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"의 값을 가져오라고 지시합니다. 이는 매우 강력한 기능을 위한 간결한 구문입니다.

지금 애플리케이션을 실행할 수 있습니다.

이제 제품 범주 메뉴가 표시되고 범주 메뉴 항목 중 하나를 마우스로 가리키면 아직 명명된 ProductsList.aspx를 구현하지 않은 페이지를 가리키는 메뉴 항목 링크를 볼 수 있으며 범주 ID를 포함하는 동적 쿼리 문자열 인수를 작성했습니다.

이전다음