다음을 통해 공유

4부: 제품 나열

작성자 : Joe Stagner

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

이 자습서 시리즈에서는 Tailspin Spyworks 샘플 애플리케이션을 빌드하기 위해 수행되는 모든 단계를 자세히 설명합니다. 4부에서는 GridView 컨트롤을 사용하여 제품을 나열하는 것을 다룹니다.

GridView 컨트롤을 사용하여 제품 나열

솔루션에서 "마우스 오른쪽 단추를 클릭하고" "추가" 및 "새 항목"을 선택하여 ProductsList.aspx 페이지 구현을 시작하겠습니다.

새 항목을 선택할 위치를 보여 주는 스크린샷

"마스터 페이지를 사용하는 웹 양식"을 선택하고 ProductsList.aspx의 페이지 이름을 입력합니다.

"추가"를 클릭합니다.

추가를 클릭할 위치를 보여 주는 스크린샷

그런 다음 Site.Master 페이지를 배치한 "스타일" 폴더를 선택하고 "폴더의 내용" 창에서 선택합니다.

Styles 폴더의 내용을 보여 주는 스크린쇼입니다.

"확인"을 클릭하여 페이지를 만듭니다.

데이터베이스는 아래와 같이 제품 데이터로 채워집니다.

제품 데이터로 채워진 데이터베이스를 보여 주는 스크린샷

페이지를 만든 후에는 엔터티 데이터 원본을 다시 사용하여 해당 제품 데이터에 액세스하지만, 이 instance 제품 엔터티를 선택해야 하며, 선택한 범주에 대해서만 반환되는 항목으로만 반환되는 항목을 제한해야 합니다.

이를 위해 EntityDataSource에 WHERE 절을 자동으로 생성하도록 지시하고 WhereParameter를 지정합니다.

"제품 범주 메뉴"에서 메뉴 항목을 만들 때 각 링크의 QueryString에 CategoryID를 추가하여 링크를 동적으로 빌드했습니다. Entity 데이터 원본에 해당 QueryString 매개 변수에서 WHERE 매개 변수를 파생하도록 지시합니다.

<asp:EntityDataSource ID="EDS_ProductsByCategory" runat="server"  
                      EnableFlattening="False" AutoGenerateWhereClause="True"
                      ConnectionString="name=CommerceEntities"  
                      DefaultContainerName="CommerceEntities" 
                      EntitySetName="Products">
<WhereParameters>
        <asp:QueryStringParameter Name="CategoryID" 
                                        QueryStringField="Category Id" 
                                        Type="Int32" />
       </WhereParameters>
</asp:EntityDataSource>

다음으로 제품 목록을 표시하도록 ListView 컨트롤을 구성합니다. 최적의 쇼핑 환경을 만들기 위해 ListVew에 표시되는 각 개별 제품에 몇 가지 간결한 기능을 압축합니다.

  • 제품 이름은 제품의 세부 정보 보기에 대한 링크가 됩니다.
  • 제품의 가격이 표시됩니다.
  • 제품의 이미지가 표시되고 애플리케이션의 카탈로그 이미지 디렉터리에서 이미지를 동적으로 선택합니다.
  • 특정 제품을 쇼핑 카트에 즉시 추가하는 링크가 포함됩니다.

다음은 ListView 컨트롤 instance 대한 태그입니다.

<asp:ListView ID="ListView_Products" runat="server" 
              DataKeyNames="ProductID"  
              DataSourceID="EDS_ProductsByCategory" 
              GroupItemCount="2">
   <EmptyDataTemplate>
      <table runat="server">
        <tr>
          <td>No data was returned.</td>
        </tr>
     </table>
  </EmptyDataTemplate>
  <EmptyItemTemplate>
     <td runat="server" />
  </EmptyItemTemplate>
  <GroupTemplate>
    <tr ID="itemPlaceholderContainer" runat="server">
      <td ID="itemPlaceholder" runat="server"></td>
    </tr>
  </GroupTemplate>
  <ItemTemplate>
    <td runat="server">
      <table border="0" width="300">
        <tr>
          <td>&nbsp</td>
          <td>
            <a href='ProductDetails.aspx?productID=<%# Eval("ProductID") %>'>
               <image src='Catalog/Images/Thumbs/<%# Eval("ProductImage") %>' 
                      width="100" height="75" border="0">
            </a> &nbsp
          </td>
          <td>
            <a href='ProductDetails.aspx?productID=<%# Eval("ProductID") %>'><span 
               class="ProductListHead"><%# Eval("ModelName") %></span><br>
            </a>
            <span class="ProductListItem">
              <b>Special Price: </b><%# Eval("UnitCost", "{0:c}")%>
            </span><br />
            <a href='AddToCart.aspx?productID=<%# Eval("ProductID") %>'>
               <span class="ProductListItem"><b>Add To Cart<b></font></span>
            </a>
          </td>
        </tr>
      </table>
    </td>
  </ItemTemplate>
  <LayoutTemplate>
    <table runat="server">
      <tr runat="server">
        <td runat="server">
          <table ID="groupPlaceholderContainer" runat="server">
            <tr ID="groupPlaceholder" runat="server"></tr>
          </table>
        </td>
      </tr>
      <tr runat="server"><td runat="server"></td></tr>
    </table>
  </LayoutTemplate>
</asp:ListView>

표시된 각 제품에 대해 여러 링크를 동적으로 빌드하고 있습니다.

또한 새 페이지를 테스트하기 전에 다음과 같이 제품 카탈로그 이미지에 대한 디렉터리 구조를 만들어야 합니다.

디렉터리 구조를 보여 주는 스크린샷

제품 이미지에 액세스할 수 있게 되면 제품 목록 페이지를 테스트할 수 있습니다.

제품 목록 페이지를 보여 주는 스크린샷

사이트의 홈페이지에서 범주 목록 링크 중 하나를 클릭합니다.

범주 목록 링크를 보여 주는 스크린샷

이제 ProductDetails.aspx 페이지와 AddToCart 기능을 구현해야 합니다.

File-New>를 사용하여 이전과 같이 사이트 마스터 페이지를 사용하여 ProductDetails.aspx 페이지 이름을 만듭니다.

EntityDataSource 컨트롤을 다시 사용하여 데이터베이스의 특정 제품 레코드에 액세스하고 다음과 같이 ASP.NET FormView 컨트롤을 사용하여 제품 데이터를 표시합니다.

<asp:FormView ID="FormView_Product" runat="server" DataKeyNames="ProductID" 
                                                           DataSourceID="EDS_Product">
  <ItemTemplate>
    <div class="ContentHead"><%# Eval("ModelName") %></div><br />
      <table  border="0">
        <tr>
          <td>
            <img src='Catalog/Images/<%# Eval("ProductImage") %>'  border="0" 
                                                       alt='<%# Eval("ModelName") %>' />
          </td>
          <td><%# Eval("Description") %>
            <br /><br /><br />                  
          </td>
        </tr>
      </table>
      <span class="UnitCost"><b>Your Price:</b> <%# Eval("UnitCost", "{0:c}")%> 
      <br /> 
      <span class="ModelNumber">
        <b>Model Number:</b> <%# Eval("ModelNumber") %>
      </span><br />
      <a href='AddToCart.aspx?ProductID=
        <%# Eval("ProductID") %>'> 
        <img id="Img1" src="~/Styles/Images/add_to_cart.gif" runat="server" 
             alt="" />
      </a>
      <br /><br />      
    </ItemTemplate>
  </asp:FormView>
  <asp:EntityDataSource ID="EDS_Product" runat="server" AutoGenerateWhereClause="True"  
                        EnableFlattening="False" 
                        ConnectionString="name=CommerceEntities" 
                        DefaultContainerName="CommerceEntities" 
                        EntitySetName="Products" 
                        EntityTypeFilter="" 
                        Select="" Where="">
    <WhereParameters>
      <asp:QueryStringParameter Name="ProductID" 
                                QueryStringField="productID"  Type="Int32" />
    </WhereParameters>
  </asp:EntityDataSource>

서식이 약간 재미있어 보이는지 걱정하지 마세요. 위의 태그는 나중에 구현할 몇 가지 기능에 대한 표시 레이아웃에 공간을 남겨 둡니다.

쇼핑 카트는 애플리케이션에서 더 복잡한 논리를 나타냅니다. 시작하려면 File-New>를 사용하여 MyShoppingCart.aspx라는 페이지를 만듭니다.

이름 ShoppingCart.aspx는 선택하지 않습니다.

데이터베이스에는 "ShoppingCart"라는 테이블이 포함되어 있습니다. 엔터티 데이터 모델을 생성할 때 데이터베이스의 각 테이블에 대해 클래스가 생성되었습니다. 따라서 엔터티 데이터 모델은 "ShoppingCart"라는 엔터티 클래스를 생성했습니다. 쇼핑 카트 구현에 해당 이름을 사용하거나 필요에 따라 확장할 수 있도록 모델을 편집할 수 있지만 충돌을 피할 이름을 선택하기만 하면 됩니다.

또한 간단한 쇼핑 카트를 만들고 쇼핑 카트 디스플레이와 함께 쇼핑 카트 논리를 포함할 것입니다. 완전히 분리된 비즈니스 계층에서 쇼핑 카트를 구현하도록 선택할 수도 있습니다.

이전다음