HTML and CSS Reference
In-Depth Information
As you can see, the web form represents a simple shopping cart. Various products are represented by
<div>
elements placed inside a
Repeater
control. The products can be dragged and dropped onto the
shopping bag. Once all the required products are added, the user can click the Place Order button to send
product data to the server to place an order.
Entity Framework Data Model
The Shopping Cart example stores data in a SQL Server Express database. To get the data in and out of the
database, the application uses the Entity Framework data model, as shown in Figure 9-6.
Figure 9-6.
Entity Framework data model for the Shopping Cart database
The data model consists of two classes:
Product
and
Order
. The
Product
class captures details such as
ProductId
,
Name
,
Description
,
Cost
, and
ImageUrl
. The
Order
class captures details such as
OrderId
,
ProductName
, and
Qty
. Of course, a real-world shopping-cart system captures many more details, but this
data model is sufficient to illustrate this subject.
Product Catalog and Shopping Cart
The product catalog is a
Repeater
control whose
ItemTemplate
contains a draggable
<div>
element. This
<div>
element wraps all the product details such as
Name
,
Description
, and
Cost
for an individual product.
The
Repeater
control receives its data through an
EntityDataSource
control. The markup of the
Repeater
control is given in Listing 9-7.
Listing 9-7.
Markup of the Product Catalog
<asp:Repeater ID="Repeater1" runat="server" DataSourceID="EntityDataSource1">
<ItemTemplate>
<div class=”product” draggable=”true”>
<header><%# Eval("Name") %></header>
<div>
<asp:Image runat="server" ID="img1"
ImageUrl='<%# Eval("ImageUrl") %>' />
</div>
<div><%# Eval("Description") %></div>
<br />
<div class="cost"><%# Eval("Cost","Cost : ${0}") %></div>
