ASP.NET MVC 5 with Bootstrap and Knockout.js (2015)
Part IV. A Practical Example
Chapter 13. Building a Shopping Cart
This final section will bring together everything that has been previously demonstrated, as well as a variety of new things, into one large example. By the end of this section, we will have built a fully functional shopping cart.
Shopping Cart Requirements
Before building anything, I prefer to start with a definition of what I am going to build. The shopping cart that I will build will be targeted at buying books. I envision four different pages that a user can navigate:
Home page
The home page (all pages actually) will contain a list of categories that will help filter the genre of books. This will be displayed on the left-hand side. The righthand side will be used to display several featured books. Clicking a book will direct the user to the book details page.
Books by category
If a user clicks a category on the left-hand side, a list of books in that category will be displayed (similar to how featured books are displayed). Clicking a book will direct the user to the book details page.
Book details
The book details page is where users will go when they select a book. This page will display some basic information about the book and the all-important “Add to Cart” feature.
Cart details
Once an item is added to the cart, the cart details page will display all items currently in the user’s cart. This page will allow the user to edit the quantity or remove the item from the cart.
Using a shared layout, the category listing will be displayed on every page, allowing the user to find a different book quickly. A cart summary will be displayed in the top menu that will contain a visible indicator of how many items are currently in the user’s cart. Clicking the icon will display a small summary of the items in the cart with a link to the cart details page.
Bootstrap will be used to create a nice user interface for the shopping cart. Knockout.js will be used to provide a slick user interface when adding/editing/deleting items from the cart. And, of course, MVC 5 will be used to enable the catalog of books to be stored/retrieved from a database.
The Shopping Cart Project
In the first three parts of this book, you have been extending a single project. For this final example, I have decided to make a new project; however, I will be leveraging many of the existing code created in the previous project.
With Visual Studio open, click File → New Project. Just like in Chapter 1, select the ASP.NET Web Application template. For the project name, I have chosen ShoppingCart. Select OK to continue. Once again, for the Web Templates, you will select the MVC template. This time, select the Web API checkbox as well, because Web API controllers will be leveraged in building the various AJAX endpoints. I have chosen No authentication because this example will be focusing on the CRUD of a shopping cart and not require authentication.
Once your new project is created, I would suggest that you immediately open the NuGet Package Manager and update all currently installed NuGet packages.
With the NuGet Package Manager still open, you need to install several new packages:
§ Knockout.js
§ Entity Framework
§ Automapper
jQuery UI will also be used to perform some basic animations when items are added and removed from the user’s shopping cart. Visit the jQuery UI website to download the latest version. Once downloaded, I added it to the Scripts folder of my project.
JavaScript Bundling and Minification
Before we get started with creating the shopping cart, I want to touch upon JavaScript bundling. You may have noticed that in the original layout, jQuery was slightly different from Knockout and other JavaScript ViewModels that were created.
jQuery was included with a bundle that was generated by C# when the project was compiled, thus it was included like this: @Scripts.Render("~/bundles/jquery"). Other scripts were included like this: @Scripts.Render("~/Scripts/knockout-3.2.0.js"). The latter contains a relative path to the full JavaScript filename. The former contains the name of the bundle.
Bundles are defined in the BundleConfig.cs file inside the App_Start folder. Example 13-1 contains the default config file that is created with the project.
Example 13-1. Default BundleConfig
using System.Web;
using System.Web.Optimization;
namespace ShoppingCart
{
public class BundleConfig
{
// For more information on bundling, visit http://go.microsoft.com/fwlink
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.validate*"));
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js",
"~/Scripts/respond.js"));
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css"));
// Set EnableOptimizations to false for debugging. For more information,
// visit http://go.microsoft.com/fwlink/?LinkId=301862
BundleTable.EnableOptimizations = true;
}
}
}
Creating a bundle requires adding a new ScriptBundle to the BundleCollection. The ScriptBundle requires two important things: a name and which files to include. The files to include can contain some logic to easily include more than one file. For example, the jqueryval bundle uses an asterisk (*) as a wildcard to include any file that contains the name jquery.validate.
My personal opinion is to create a single bundle with only the files required on most, if not all, pages. For this project, it will include jQuery, jQuery Validation, jQuery UI, Bootstrap, and Knockout. Example 13-2 contains an updated BundleConfig class that defines the single bundle to include in the shared layout view.
Example 13-2. Updated BundleConfig
using System.Web;
using System.Web.Optimization;
namespace ShoppingCart
{
public class BundleConfig
{
// For more information on bundling, visit http://go.microsoft.com/fwlink
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/shoppingCart").Include(
"~/Scripts/jquery-{version}.js", "~/Scripts/jquery.validate*",
"~/Scripts/jquery-ui.js", "~/Scripts/bootstrap.js",
"~/Scripts/respond.js", "~/Scripts/knockout-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css"));
// Set EnableOptimizations to false for debugging. For more information,
// visit http://go.microsoft.com/fwlink/?LinkId=301862
BundleTable.EnableOptimizations = true;
}
}
}
The bundle was renamed to be shoppingCart, and I’ve comma-separated the six different JavaScript libraries that I want to be included on every page.
To complete the update, in Views/Shared/_Layout.cshtml, replace the previously added jQuery bundle with the new shoppingCart bundle using @Scripts.Render("~/bundles/shoppingCart").
Summary
The new ShoppingCart project is now created and updated with the necessary NuGet packages. Our requirements have been defined and will be implemented over the next several chapters.