DROPDOWN LIST
The user can filter the list of books via the author's name. It is a form which posts the AuthorID back to the server.
BOOK LIST
The page displays a list of the books in the database.
CART LIST
The page displays a list of the books in the cart which can be updated and is a partial page.
TOTAL COST
The page displays the total cost of the items in the cart. It is a partial page.
There are six tables.
(N) means navigation property.
There are five "One to Many" relationships and one "Many to Many".
BookGenre is a bridge-entity, used for the "Many to Many" relationship between "Book" and "Genre".
This _Cart action method retrieves the full list of cart objects from the repository, loads it to the variable "books" and then sends this object to the partial view.
Initially I used ViewBag to hold the calculated "total price" value and send it to the view.
I replaced this with a ViewModel which only has one property and a constructor.
It inherits from the Base ViewModel however this is not necessary as it doesn't need any of the properties or methods defined in the base ViewModel.
var book, holds the data for a specific book object with the id that was passed into the Add() method.
var cart, holds the data for a specifc cart object with the id that was passed into the Add() method.
var cartList, holds a list of all of the cart objects in the cart.
If "var cart" is null then it could not find the item in the cart table so a new cart object is constructed and added to the cart table.
I enabled ef migrations and then added an "initial" migration.
When the database is upgraded, the database is created, empty.
When the database is downgraded, the database is dropped.
The seed method in the configuration puts test data into the database that I'm using locally.
Whenever I deploy this webapp, I comment out the "seed data" in the seed method show below.
This ensures that the test data doesn't interfere with the data in the server database.
I also created a .bak file for the server database in case I need to restore the server database.
When adding a book to the cart, all that needs to be updated is the partial view, "_Cart" however currently the whole page is rendered.
On ".../Books/Products" page, the selected dropdown value resets when an item is added to the cart.
Currently there isn't a controller for Authors.
For the CRUD page (.../Books/Index) client and server validation needs to be implemented.
To solve the problems described I created a new contoller called "test" and reorgansied the code.
".../Test/Products" - The book table is now a "partial page".
When the add and remove butoons are clicked, Ajax calls reload the "_Cart" parital page.
Also the dropdown filter buttons are also using Ajax calls to reload the "_Book" partial page.
NOTE - The older version of the "Products" page, that doesn't use Ajax to do the post-backs to the server, can be accessed using this URL: .../Main/Products
All of the buttons belong to the class "btnAdd".
When one of them is clicked, the "_TotalCost" parital page is set to hidden and the id of the book of the corresponding button, is sent to "/Cart/AddToCart".
Once this is completed the "_Cart" partial page is reloaded and the "TotalCost" method is called.
Once the new total cost is calculated, the "_TotalCost" partial page is reloaded.
The remove from cart follows a similar procedure.
When an author is seleced and the "Filter Books" button is clicked, the id of the selected author is loaded to the variable x1.
Then an Ajax call is made and the id is posted to "/Test/_Book".
Once this function has executed, the "_Book" parital page is reloaded and the filtered list appears.
When the "Reset Filter" button is clicked another Ajax call is made (GET) to "/Test/_Book".
Once this function has executed, the "_Book" parital page is reloaded and the full list of books reloads.
I also implemented a search textbox which allows the user to filter the list of books by -
"Book Title"
"Author Name"
"Genre"
This page can be accessed using this URL - .../Test/ProductsTest
The books controller handles all of the requests for the book CRUD operations.
The cart controller handles all of the requests for the cart. Some of these methods are called by jQuery Ajax.
The main controller handles all of the requests for the main site. None of these action-methods are called by Ajax.
The test controller, contains some action-methods which are accessed via Ajax calls.