Bagian 3: Menu Tata Letak dan Kategori

oleh Joe Stagner

Tailspin Spyworks menunjukkan betapa sangat sederhananya membuat aplikasi yang kuat dan dapat diskalakan untuk platform .NET. Ini menunjukkan cara menggunakan fitur baru yang hebat di ASP.NET 4 untuk membangun toko online, termasuk belanja, checkout, dan administrasi.

Seri tutorial ini merinci semua langkah yang diambil untuk membangun aplikasi sampel Tailspin Spyworks. Bagian 3 mencakup penambahan tata letak dan menu kategori.

Menambahkan Beberapa Tata Letak dan Menu Kategori

Di halaman master situs kami, kami akan menambahkan div untuk kolom sisi kiri yang akan berisi menu kategori produk kami.

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

Perhatikan bahwa penyelarasan yang diinginkan dan pemformatan lainnya akan disediakan oleh kelas CSS yang kami tambahkan ke file Style.css kami.

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

Menu kategori produk akan dibuat secara dinamis saat runtime dengan mengkueri database Perdagangan untuk kategori produk yang ada dan membuat item menu dan tautan terkait.

Untuk mencapai hal ini, kami akan menggunakan dua ASP. Kontrol data NET yang kuat. Kontrol "Sumber Data Entitas" dan kontrol "ListView".

Mari kita beralih ke "Tampilan Desain" dan menggunakan pembantu untuk mengonfigurasi kontrol kita.

Mari kita atur properti ID EntityDataSource ke EDS_Category_Menu dan klik "KonfigurasiKan Sumber Data".

Pilih Koneksi Entitas Perdagangan yang dibuat untuk kami saat kami membuat Model Sumber Data Entitas untuk Database Perdagangan kami dan klik "Berikutnya".

Pilih nama kumpulan Entitas "Kategori" dan biarkan opsi lainnya sebagai default. Klik "Selesai".

Sekarang mari kita atur properti ID dari instans kontrol ListView yang kami tempatkan di halaman kami untuk ListView_ProductsMenu dan mengaktifkan pembantunya.

Meskipun kita dapat menggunakan opsi kontrol untuk memformat tampilan dan pemformatan item data, pembuatan menu kita hanya akan memerlukan markup sederhana sehingga kita akan memasukkan kode dalam tampilan sumber.

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

Harap perhatikan pernyataan "Eval": <%# Eval("CategoryName") %>

Sintaks <ASP.NET %# %> adalah konvensi singkat yang menginstruksikan runtime untuk mengeksekusi apa pun yang terkandung dalam dan menghasilkan hasil "di Baris".

Pernyataan Eval("CategoryName") menginstruksikan bahwa, untuk entri saat ini dalam kumpulan terikat item data, ambil nilai item Model Entitas bernama "CategoryName". Ini adalah sintaks ringkas untuk fitur yang sangat kuat.

Mari kita jalankan aplikasi sekarang.

Perhatikan bahwa menu kategori produk kami sekarang ditampilkan dan ketika kami mengarahkan mouse ke atas salah satu item menu kategori, kita dapat melihat titik tautan item menu ke halaman yang belum kita terapkan bernama ProductsList.aspx dan bahwa kita telah membangun argumen string kueri dinamis yang berisi id kategori.

SebelumnyaBerikutnya