Lista produktów dla danej kategorii

 

Ostatnie zmiany w kodzie aplikacji zakończone zostały na dodaniu przeze mnie spisu kategorii produktów w postaci menu znajdującego się w master page. Menu zostało utworzone jako zbiór odnośników, z których każdy tworzony jest przez dodanie tzw. query string do adresu URL. Jako wartość parametru przekazywany jest numer odpowiedniej kategorii. Użytkownik przenoszony jest na stronę ProductsList.aspx. Zadaniem tej strony jest wyświetlenie wszystkich produktów należących do danej kategorii. Na tym etapie prac wyświetlenie jest realizowane w bardzo prosty sposób.

Na stronie z produktami umiesczona została kontrolka ListView, pozwalająca na dość swobodne przeprowadzanie modyfikacji jej wyglądu. Jako, że produkty pobierane są z bazy danych, kontrolka została powiązana ze źródłem danych:

<asp:SqlDataSource ID="SqlDataSource1" runat="server" 
            ConnectionString="<%$ ConnectionStrings:ShoppingAppDbConnectionString %>" 
            SelectCommand="SELECT * FROM [tProducts] WHERE ([ProductCategoryID] = @ProductCategoryID)">
            <SelectParameters>
                <asp:QueryStringParameter Name="ProductCategoryID" 
                    QueryStringField="CategoryId" Type="Byte" />
            </SelectParameters>
</asp:SqlDataSource>

Do połączenia wykorzystywany jest standardowo connectionString znajdujący się w pliku Web.config. W wyniku zapytania pobierane z tabeli tProducts są wszystkie kolumny, przy czym klauzula WHERE mówi o tym, że identyfikator kategorii ProductCategoryID pochodzi z ustawionego parametru. Parametr ten pobierany jest z query string, o czym świadczy kod znajdujący się pomiędzy znacznikami <SelectParameters></SelectParameters>. Do parametru o odpowiedniej nazwie (name), pobierana jest wartość z query string (querystringfield) o typie danych (type) Byte (kolumna w tabeli jest typu tinyint).

W przypadku kontrolki ListView najbardziej interesujące są dwa miejsca. Jest to deklaracja kontrolki oraz jej ItemTemplate. Kontrolka tworzona jest w następujący sposób:

<asp:ListView ID="ListView1" runat="server" DataKeyNames="ProductID" 
            DataSourceID="SqlDataSource1" GroupItemCount="2">
...
</asp:ListView>

Szczególnie interesujący jest atrybut groupitemcount, mówiący o tym, ile produktów wyświetlanych będzie w jednym rzędzie danych.

W ItemTemplate natomiast znalazł się następujący kod:

<ItemTemplate>
	<td runat="server" style="">
		<table border="0" width="300">
		<tr>
			<td style="width: 25px"></td>
			<td style="vertical-align: middle; text-align: right">
				<a href="ProductsDetails.aspx?ProductID=&lt;%# Eval(&quot;ProductId&quot;) %&gt;">
					<image src="Images/triangle.jpg" width="30px" height="30px" border="1"></image>
				</a>
			</td>
			<td style="width: 250px; vertical-align: middle">
				<a href="ProductsDetails.aspx?ProductID=&lt;%# Eval(&quot;ProductId&quot;) %&gt;"><%# Eval("ProductName") %></a>
				<br />Weight:
				<asp:Label ID="WeightLabel" runat="server" Text='<%# Eval("Weight") %>' />
				<br />Capacity:
				<asp:Label ID="CapacityLabel" runat="server" Text='<%# Eval("Capacity") %>' />
				<br />Items:
				<asp:Label ID="ItemsLabel" runat="server" Text='<%# Eval("Items") %>' />
				<br />
			</td>
		</tr>
		</table>
	</td>
</ItemTemplate>

Każdy produkt wyświetlany jest w jednym rzędzie utworzonej tabelki. Pierwsza komórka odpowiedzialna jest za ustalenie odstępów pomiędzy produktami. Zadaniem drugiej komórki jest wyświetlenie obrazka, będącego jednocześnie odnośnikiem, natomiast w trzeciej komórce znajduje się krótki opis produktu. Zarówno po kliknięciu obrazka, jak i wybraniu nazwy produktu użytkownik przenoszony jest do strony ProductsDetails.aspx, na której będzie mógł poznać cenę wybranego produktu.

Post zrealizowany na podstawie: http://www.asp.net/aspnet-4/videos/tailspin-spyworks-display-the-product-list

PS. Po opublikowaniu poprzedniego posta zauważyłem, że kolumna ‘cena’ nie powinna znajdować się w tabeli z produktami, gdyż cena jest zależna od sklepu, w którym znajduje się produkt. Błąd ten niedługo zostanie poprawiony 🙂

Reklamy

Skomentuj

Wprowadź swoje dane lub kliknij jedną z tych ikon, aby się zalogować:

Logo WordPress.com

Komentujesz korzystając z konta WordPress.com. Log Out / Zmień )

Zdjęcie z Twittera

Komentujesz korzystając z konta Twitter. Log Out / Zmień )

Facebook photo

Komentujesz korzystając z konta Facebook. Log Out / Zmień )

Google+ photo

Komentujesz korzystając z konta Google+. Log Out / Zmień )

Connecting to %s

%d blogerów lubi to: