<div id="header">
<h1><a href="/">ASP.NET MVC MUSIC STORE</a></h1>
<ul id="navlist">
<li class="first"><a href="/" id="current">Home</a></li>
<li><a href="/Store/">Store</a></li>
<li><a href="/ShoppingCart?Length=12" id="cart-status">Cart (13)</a></li>
<li><a href="/StoreManager/">Admin</a></li>
</ul>
</div>
<ul id="categories">
<li><a href="/Store/Browse?Genre=Rock">Rock</a>
</li>
<li><a href="/Store/Browse?Genre=Jazz">Jazz</a>
</li>
<li><a href="/Store/Browse?Genre=Metal">Metal</a>
</li>
<li><a href="/Store/Browse?Genre=Alternative">Alternative</a>
</li>
<li><a href="/Store/Browse?Genre=Disco">Disco</a>
</li>
<li><a href="/Store/Browse?Genre=Blues">Blues</a>
</li>
<li><a href="/Store/Browse?Genre=Latin">Latin</a>
</li>
<li><a href="/Store/Browse?Genre=Reggae">Reggae</a>
</li>
<li><a href="/Store/Browse?Genre=Pop">Pop</a>
</li>
<li><a href="/Store/Browse?Genre=Classical">Classical</a>
</li>
</ul>
<div id="main">
<h3>
<em>Review</em> your cart:
</h3>
<p class="button">
<a href="/Checkout/AddressAndPayment">Checkout >></a>
</p>
<div id="update-message">
</div>
<table>
<tr>
<th>
Album Name
</th>
<th>
Price (each)
</th>
<th>
Quantity
</th>
<th></th>
</tr>
<tr id="row-1">
<td>
<a href="/Store/Details/7">Nevermind</a>
</td>
<td>
8.99
</td>
<td id="item-count-1">
4
</td>
<td>
<a href="#" class="RemoveLink" data-id="1">Remove from cart</a>
</td>
</tr>
<tr id="row-2">
<td>
<a href="/Store/Details/183">Morning Dance</a>
</td>
<td>
8.99
</td>
<td id="item-count-2">
1
</td>
<td>
<a href="#" class="RemoveLink" data-id="2">Remove from cart</a>
</td>
</tr>
<tr id="row-3">
<td>
<a href="/Store/Details/141">A Copland Celebration, Vol. I</a>
</td>
<td>
8.99
</td>
<td id="item-count-3">
2
</td>
<td>
<a href="#" class="RemoveLink" data-id="3">Remove from cart</a>
</td>
</tr>
<tr id="row-4">
<td>
<a href="/Store/Details/233">The Cream Of Clapton</a>
</td>
<td>
8.99
</td>
<td id="item-count-4">
6
</td>
<td>
<a href="#" class="RemoveLink" data-id="4">Remove from cart</a>
</td>
</tr>
<tr>
<td>
Total
</td>
<td>
</td>
<td>
</td>
<td id="cart-total">
116.87
</td>
</tr>
</table>
</div>
<div id="footer">
built with <a href="http://asp.net/mvc">ASP.NET MVC 3</a>
</div>
$(".RemoveLink").click(function() {
var recordToDelete = $(this).attr("data-id");
if (recordToDelete) {
$.post("/ShoppingCart/RemoveFromCart", {
"id": recordToDelete
}, function(data) {
if (data.ItemCount === 0) {
$('#row-' + data.DeleteId).fadeOut('slow');
} else {
$('#item-count-' + data.DeleteId).text(data.ItemCount);
}
$('#cart-total').text(data.CartTotal);
$('#update-message').text(data.Message);
$('#cart-status').text('Cart (' + data.CartCount + ')');
});
}
});
$.mockjax({
url: "/ShoppingCart/RemoveFromCart",
responseTime: 750,
response: function(settings) {
var row = $( "#row-" + settings.data.id ),
itemCount = +row.find( "td" ).eq( 2 ).text(function(index, text) {
return +$.trim(text) - 1;
}).text(),
cartTotal = 0, cartCount = 0;
$("table tr").each(function(index, element) {
var row = $(element),
price = +row.find( "td" ).eq( 1 ).text(),
quantity = +row.find( "td" ).eq( 2 ).text();
if (price && quantity) {
cartCount += quantity;
cartTotal += price * quantity;
}
});
this.responseText = {
ItemCount: itemCount,
DeleteId: settings.data.id,
CartTotal: cartTotal.toFixed(2),
Message: "Your cart has been updated!",
CartCount: cartCount
};
}
});
*
{
margin: 0px;
padding: 0px;
border: none;
}
body
{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
background-color: #FBF9EF;
padding: 0px 6%;
}
#container
{
float: left;
}
#header
{
float: left;
width: 100%;
border-bottom: 1px dotted #5D5A53;
margin-bottom: 10px;
}
#header h1
{
font-size: 18px;
float: left;
background: url(/content/Images/logo.png) no-repeat;
padding: 45px 0px 5px 0px;
}
#promotion
{
height: 300px;
width: 700px;
background: url(/content/Images/home-showcase.png) no-repeat;
}
ul li a
{
font-size: 16px;
}
#main
{
overflow: hidden;
padding: 0 0 15px 10px;
}
ul
{
list-style-type: square;
margin-left: 25px;
font-size: 14px;
}
ul#album-list
{
list-style: none;
margin-left: 0px;
}
ul#album-list li
{
height: 130px;
width: 100px;
float: left;
margin: 10px;
text-align: center;
}
ul#album-list li a, ul#album-list li .button
{
font-size: 13px;
float: left;
}
ul#album-list li a span
{
color: #9b9993;
text-decoration: underline;
}
#cart
{
float: right;
}
#update-message
{
color: #F6855E;
font-weight: bold;
}
.button, input[type=submit]
{
clear: both;
display: inline-block;
padding: 5px;
margin-top: 10px;
border: 1px;
background: #5e5b54;
color: #fff;
font-weight: bold;
}
.button a
{
color: #fff !important;
}
#footer
{
clear: both;
padding: 10px;
text-align: right;
border-top: 1px dotted #8A8575;
border-bottom: 1px dotted #8A8575;
font-family: Constantia, Georgia, serif;
}
/******************** Top Navigation ************************/
ul#navlist
{
float: right;
}
ul#navlist li
{
display: inline;
}
ul#navlist li a
{
border-left: 1px dotted #8A8575;
padding: 10px;
margin-top: 10px;
color: #8A8575;
text-decoration: none;
float: left;
}
ul#navlist li:first-child a
{
border: none;
}
ul#navlist li a:hover
{
color: #F6855E;
}
/********************* End top navigation ***************************/
p
{
margin-bottom: 15px;
margin-top: 0px;
}
h2
{
color: #5e5b54;
}
h2, h3
{
margin-bottom: 10px;
font-size: 16px;
font-style: italic;
font-weight: bold;
}
h3
{
color: #9B9993;
}
#header h1 a, h3 em
{
color: #5E5B54;
}
a:link, a:visited
{
color: #F6855E;
text-decoration: none;
font-weight: bold;
}
a:hover
{
color: #333333;
text-decoration: none;
font-weight: bold;
}
a:active
{
color: #006633;
text-decoration: none;
font-weight: bold;
}
/***************************** sidebar navigation ****************************/
#categories
{
font-family: Constantia, Georgia, serif;
list-style-type: none;
border-right: #5d5a53 1px dotted;
padding-right: 10px;
margin: 0 25px 0 0;
float: left;
}
#categories a:link, #categories a:visited
{
color: #9B9993;
text-decoration: none;
}
#categories a:hover
{
color: #F46739;
}
div#album-details p
{
margin-bottom: 5px;
color: #5e5b54;
font-weight: bold;
}
p em
{
color: #9b9993;
}
/* Form styles */
legend
{
padding: 10px;
font-weight: bold;
}
fieldset
{
border: #9b9993 1px solid;
padding: 0 10px;
margin-bottom: 10px;
clear: left;
}
div.editor-field
{
margin-bottom: 10px;
}
label
{
display: block;
width: 300px;
}
input[type=text], input[type=password], select
{
border: 1px solid #8A8575;
width: 300px;
}
/* Begin: Tables */
table
{
border: 1px solid #000;
border-collapse: collapse;
color: #666666;
min-width: 500px;
width: 100%;
}
tr
{
border: 1px solid #000;
line-height: 25px;
}
th
{
background-color: #9b9993;
color: #000;
font-size: 13px;
text-align: left;
}
th, td
{
padding-left: 5px;
}
tr:hover
{
background-color: #fff;
}
/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error
{
color: #ff0000;
}
.field-validation-valid
{
display: none;
}
.input-validation-error
{
border: 1px solid #ff0000;
background-color: #ffeeee;
}
.validation-summary-errors
{
font-weight: bold;
color: #ff0000;
}
.validation-summary-valid
{
display: none;
}
External resources loaded into this fiddle: