3. Bölüm: Düzen ve Kategori Menüsü

ali Stagner

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

Bu öğretici serisi, Tailspin Spyworks örnek uygulamasını oluşturmak için kullanılan adımların tümünü ayrıntılarıyla ayrıntılardır. 3. bölüm, düzen ve kategori menüsü eklemeyi içerir.

Bazı düzen ve kategori menüsü ekleme

Site ana sayfamızda, sol taraftaki sütun için, ürün kategorisi menüsünü içerecek bir div ekleyeceğiz.

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

İstenen hizalama ve diğer biçimlendirmeler Style. css dosyanıza eklediğimiz CSS sınıfı tarafından sağlanacaktır.

#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%;
}

Ürün kategorisi menüsü, mevcut ürün kategorileri için ticaret veritabanını sorgulayarak ve menü öğeleri ve karşılık gelen bağlantılar oluşturarak çalışma zamanında dinamik olarak oluşturulur.

Bunu gerçekleştirmek için, iki ASP. NET ' in güçlü veri denetimleri. "Varlık veri kaynağı" denetimi ve "ListView" denetimi.

"Tasarım görünümüne" geçelim ve denetimlerinizi yapılandırmak için yardımcıları kullanabilirsiniz.

EntityDataSource ID özelliğini EDS_category_Menu olarak ayarlayalim ve "veri kaynağını Yapılandır" seçeneğine tıklaalım.

Ticaret veritabanımız için varlık veri kaynağı modelini oluşturduğumuzda ve "Ileri" ye tıkladığımızda bizim için oluşturulan CommerceEntities bağlantısını seçin.

"Kategoriler" varlık kümesi adını seçin ve diğer seçenekleri varsayılan olarak bırakın. "Son" düğmesine tıklayın.

Şimdi sayfamıza yerleştirdiğimiz ListView denetim örneğinin ID özelliğini bir ListView_ProductsMenu olarak ayarlayalım ve yardımcı ' i etkinleştirmektir.

Veri öğesi görüntüleme ve biçimlendirmesini biçimlendirmek için denetim seçeneklerini kullanabiliriz; ancak, bu kodu kaynak görünümüne girebilmemiz için menü oluşturma yalnızca basit biçimlendirme gerektireceğiz.

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

Lütfen "eval" ekstresini unutmayın: <% # eval ("CategoryName")%>

ASP.NET sözdizimi <% #%>, çalışma zamanının içinde yer aldığı her şeyi yürütmesini ve sonuçları "satır" olarak çıktısını veren bir toplu kuraldır.

İfade eval ("CategoryName"), veri öğelerinin bağlantılı koleksiyonundaki geçerli giriş için "CategoryName" varlık modeli öğe adlarının değerini getiren bildirir. Bu, çok güçlü bir özellik için kısa bir sözdizimidir.

Uygulamayı şimdi çalıştırmaya izin verir.

Ürün kategorisi menümüzün görüntülendiğini ve kategori menü öğelerinden birinin üzerine geldiğinizde, menü öğesi bağlantı noktalarını yalnızca adlandırılmış ProductsList. aspx ' i uygulamamız ve bir dinamik sorgu dizesi bağımsız değişkeni ( kategori kimliği.