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">
<div class=”product” draggable=”true”>
<header><%# Eval("Name") %></header>
<asp:Image runat="server" ID="img1"
ImageUrl='<%# Eval("ImageUrl") %>' />
<div><%# Eval("Description") %></div>
<br />
<div class="cost"><%# Eval("Cost","Cost : ${0}") %></div>
Search WWH ::

Custom Search