Část 3: Nabídka Rozložení a Kategorie

Joe Stagner

Tailspin Spyworks ukazuje, jak je mimořádně jednoduché vytvářet výkonné a škálovatelné aplikace pro platformu .NET. Ukazuje, jak používat skvělé nové funkce v ASP.NET 4 k vytvoření online obchodu, včetně nakupování, pokladny a správy.

Tato série kurzů podrobně popisuje všechny kroky k sestavení ukázkové aplikace Tailspin Spyworks. Část 3 se věnuje přidání rozložení a nabídky kategorií.

Přidání rozložení a nabídky Kategorie

Na stránku předlohy webu přidáme div pro levý boční sloupec, který bude obsahovat naši nabídku kategorií produktů.

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

Všimněte si, že požadované zarovnání a další formátování bude poskytovat třída CSS, kterou jsme přidali do souboru Style.css.

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

Nabídka kategorií produktů se bude dynamicky vytvářet za běhu dotazováním obchodní databáze na existující kategorie produktů a vytvořením položek nabídky a odpovídajících odkazů.

K tomu použijeme dvě z asp. Výkonné ovládací prvky dat v NET. Ovládací prvek "Zdroj dat entity" a ovládací prvek "ListView".

Přepneme do návrhového zobrazení a pomocí pomocných rutin nakonfigurujeme ovládací prvky.

Nastavte vlastnost ID EntityDataSource na EDS_Category_Menu a klikněte na Konfigurovat zdroj dat.

Vyberte připojení CommerceEntities, které se pro nás vytvořilo při vytváření modelu zdroje dat entit pro naši obchodní databázi, a klikněte na Další.

Vyberte název sady entit Kategorie a ponechte zbývající možnosti jako výchozí. Klikněte na Dokončit.

Teď nastavíme vlastnost ID instance ovládacího prvku ListView, kterou jsme umístili na naši stránku, aby ListView_ProductsMenu a aktivovala jeho pomocníka.

I když bychom mohli použít možnosti ovládacích prvků k formátování zobrazení a formátování datové položky, vytvoření nabídky bude vyžadovat pouze jednoduché revize, takže kód zadáme do zobrazení zdroje.

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

Všimněte si příkazu "Eval": <%# Eval("CategoryName") %>

Syntaxe <ASP.NET %# %> je zkratka, která dává modulu runtime pokyn ke spuštění všeho, co je obsaženo, a výstupem výsledků "in Line".

Příkaz Eval("CategoryName") dává pokyn, aby pro aktuální položku v vázané kolekci datových položek načítá hodnotu názvů položek modelu entity "CategoryName". Jedná se o stručnou syntaxi pro velmi výkonnou funkci.

Pojďme aplikaci spustit teď.

Všimněte si, že se teď zobrazuje nabídka kategorií produktů a když najedeme myší na jednu z položek nabídky, uvidíme, že odkaz na položku nabídky odkazuje na stránku, kterou jsme ještě neimplementovali s názvem ProductsList.aspx, a že jsme vytvořili dynamický argument řetězce dotazu, který obsahuje ID kategorie.

PředchozíDalší