Bölüm 4: Ürünleri Listeleme

tarafından Joe Stagner

Tailspin Spyworks, .NET platformu için güçlü, ölçeklenebilir uygulamalar oluşturmanın ne kadar basit olduğunu gösterir. Alışveriş, ödeme ve yönetim gibi çevrimiçi bir mağaza oluşturmak için ASP.NET 4'teki harika yeni özelliklerin nasıl kullanılacağını gösterir.

Bu öğretici serisi, Tailspin Spyworks örnek uygulamasını derlemek için atılan tüm adımların ayrıntılarını içerir. Bölüm 4, GridView denetimiyle ürünleri listelemeyi kapsar.

GridView Denetimi ile Ürünleri Listeleme

Çözümümüze "Sağ Tıklayarak" ve "Ekle" ve "Yeni Öğe" öğesini seçerek ProductsList.aspx sayfamızı uygulamaya başlayalım.

"Ana SayfaYı Kullanan Web Formu" öğesini seçin ve ProductsList.aspx sayfasının adını girin.

"Ekle"ye tıklayın.

Ardından, Site.Master sayfasını yerleştirdiğimiz "Stiller" klasörünü seçin ve "Klasörün içeriği" penceresinden seçin.

Sayfayı oluşturmak için "Tamam"a tıklayın.

Veritabanımız aşağıda gösterildiği gibi ürün verileriyle doldurulur.

Sayfamız oluşturulduktan sonra bu ürün verilerine erişmek için bir Varlık Veri Kaynağı kullanacağız, ancak bu örnekte Ürün Varlıklarını seçmemiz ve döndürülen öğeleri yalnızca seçili Kategori için olan öğelerle kısıtlamamız gerekiyor.

Bunu başarmak için EntityDataSource'a WHERE yan tümcesini Otomatik Olarak Oluştur'a söyleriz ve WhereParameter değerini belirtiriz.

"Ürün Kategorisi Menümüzde" Menü Öğelerini oluşturduğumuzda, her bağlantı için QueryString'e CategoryID'yi ekleyerek bağlantıyı dinamik olarak oluşturduğumuzu hatırlayacaksınız. Varlık Veri Kaynağı'na WHERE parametresini bu QueryString parametresinden türetmelerini söyleyeceğiz.

<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>

Ardından, ListView denetimini ürünlerin listesini görüntüleyecek şekilde yapılandıracağız. En iyi alışveriş deneyimini oluşturmak için ListVew'imizde görüntülenen her bir ürüne çeşitli kısa özellikler ekleyeceğiz.

• Ürün adı, ürünün ayrıntı görünümünün bağlantısı olacaktır.
• Ürünün fiyatı görüntülenir.
• Ürünün bir görüntüsü görüntülenir ve görüntüyü uygulamamızdaki bir katalog görüntüleri dizininden dinamik olarak seçeceğiz.
• Belirli bir ürünü hemen alışveriş sepetine eklemek için bir bağlantı ekleyeceğiz.

ListView denetim örneğimizin işaretlemesi aşağıdadır.

<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>

Görüntülenen her ürün için dinamik olarak çeşitli bağlantılar oluşturuyoruz.

Ayrıca, yeni sayfayı test etmeden önce ürün kataloğu görüntüleri için dizin yapısını aşağıdaki gibi oluşturmamız gerekir.

Ürün görüntülerimize erişildikten sonra ürün listesi sayfamızı test edebiliriz.

Sitenin giriş sayfasında Kategori Listesi Bağlantılarından birine tıklayın.

Şimdi ProductDetails.aspx sayfasını ve AddToCart işlevini uygulamamız gerekiyor.

Daha önce yaptığımız gibi Ana Sayfa sitesini kullanarak ProductDetails.aspx sayfa adı oluşturmak için Dosya-Yeni'yi> kullanın.

Veritabanındaki belirli ürün kaydına erişmek için bir EntityDataSource denetimi kullanacağız ve ürün verilerini aşağıdaki gibi görüntülemek için bir ASP.NET FormView denetimi kullanacağız.

<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>

Biçimlendirme size biraz komik görünüyorsa endişelenmeyin. Yukarıdaki işaretleme, daha sonra uygulayacağımız birkaç özellik için görüntü düzeninde yer bırakır.

Alışveriş Sepeti uygulamamızdaki daha karmaşık mantığı temsil edecektir. Başlamak için Dosya-Yeni'yi> kullanarak MyShoppingCart.aspx adlı bir sayfa oluşturun.

ShoppingCart.aspx adını seçmediğimize dikkat edin.

Veritabanımız "ShoppingCart" adlı bir tablo içeriyor. Varlık Veri Modeli oluşturduğumuz zaman veritabanındaki her tablo için bir sınıf oluşturuldu. Bu nedenle, Varlık Veri Modeli "ShoppingCart" adlı bir Varlık Sınıfı oluşturdu. Bu adı alışveriş sepeti uygulamamız için kullanabilmek veya ihtiyaçlarımız için genişletebilmek için modeli düzenleyebiliriz, ancak bunun yerine çakışmayı önleyecek bir ad seçmeyi tercih edeceğiz.

Ayrıca basit bir alışveriş sepeti oluşturacağımızı ve alışveriş sepeti mantığını alışveriş sepeti ekranıyla ekleyebileceğimizi de belirtmekte fayda var. Ayrıca alışveriş sepetimizi tamamen ayrı bir İş Katmanında uygulamayı da seçebiliriz.

ÖncekiSonraki