3. Bölüm: Düzen ve Kategori MenüsüPart 3: Layout and Category Menu

ali Stagnerby Joe Stagner

Tailspin Spyworks, .NET platformu için güçlü ve ölçeklenebilir uygulamalar oluşturmanın ne kadar kolay olduğunu gösterir.Tailspin Spyworks demonstrates how extraordinarily simple it is to create powerful, scalable applications for the .NET platform. 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.It shows off how to use the great new features in ASP.NET 4 to build an online store, including shopping, checkout, and administration.

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.This tutorial series details all of the steps taken to build the Tailspin Spyworks sample application. 3. bölüm, düzen ve kategori menüsü eklemeyi içerir.Part 3 covers adding layout and a category menu.

Bazı düzen ve kategori menüsü eklemeAdding Some Layout and a Category Menu

Site ana sayfamızda, sol taraftaki sütun için, ürün kategorisi menüsünü içerecek bir div ekleyeceğiz.In our site master page we'll add a div for the left side column that will contain our product category menu.

<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.Note that the desired aligning and other formatting will be provided by the CSS class that we added to our Style.css file.

#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.The product category menu will be dynamically created at runtime by querying the Commerce database for existing product categories and creating the menu items and corresponding links.

Bunu gerçekleştirmek için, iki ASP. NET ' in güçlü veri denetimleri.To accomplish this we will use two of ASP.NET's powerful data controls. "Varlık veri kaynağı" denetimi ve "ListView" denetimi.The "Entity Data Source" control and the "ListView" control.

"Tasarım görünümüne" geçelim ve denetimlerinizi yapılandırmak için yardımcıları kullanabilirsiniz.Let's switch to "Design View" and use the helpers to configure our controls.

EntityDataSource ID özelliğini EDS_category_Menu olarak ayarlayalim ve "veri kaynağını Yapılandır" seçeneğine tıklaalım.Let's set the EntityDataSource ID property to EDS_Category_Menu and click on "Configure Data Source".

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.Select the CommerceEntities Connection that was created for us when we created the Entity Data Source Model for our Commerce Database and click "Next".

"Kategoriler" varlık kümesi adını seçin ve diğer seçenekleri varsayılan olarak bırakın.Select the "Categories" Entity set name and leave the rest of the options as default. "Son" düğmesine tıklayın.Click "Finish".

Ş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.Now let's set the ID property of the ListView control instance that we placed on our page to ListView_ProductsMenu and activate its helper.

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.Though we could use control options to format the data item display and formatting, our menu creation will only require simple markup so we will enter the code in the source view.

<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")%>Please note the "Eval" statement : <%# 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.The ASP.NET syntax <%# %> is a shorthand convention that instructs the runtime to execute whatever is contained within and output the results "in Line".

İ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.The statement Eval("CategoryName") instructs that, for the current entry in the bound collection of data items, fetch the value of the Entity Model item names "CategoryName". Bu, çok güçlü bir özellik için kısa bir sözdizimidir.This is concise syntax for a very powerful feature.

Uygulamayı şimdi çalıştırmaya izin verir.Lets run the application now.

Ü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.Note that our product category menu is now displayed and when we hover over one of the category menu items we can see the menu item link points to a page we have yet to implement named ProductsList.aspx and that we have built a dynamic query string argument that contains the category id.