Filter in product list and pagination

src/Web/WebMVC/Controllers/AccountController.cs

@@ -151,7 +151,7 @@ namespace Microsoft.eShopOnContainers.WebMVC.Controllers
         {
             await _signInManager.SignOutAsync();
             _logger.LogInformation(4, "User logged out.");
-            return RedirectToAction(nameof(HomeController.Index), "Home");
+            return RedirectToAction(nameof(CatalogController.Index), "Catalog");
         }
 
         //
@@ -476,7 +476,7 @@ namespace Microsoft.eShopOnContainers.WebMVC.Controllers
             }
             else
             {
-                return RedirectToAction(nameof(HomeController.Index), "Home");
+                return RedirectToAction(nameof(CatalogController.Index), "Catalog");
             }
         }
 

src/Web/WebMVC/Controllers/CatalogController.cs

@@ -0,0 +1,55 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+using System.Net.Http;
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.eShopOnContainers.WebMVC.Models;
+using Microsoft.Extensions.Options;
+using Newtonsoft.Json;
+using Microsoft.eShopOnContainers.WebMVC.Services;
+using Microsoft.eShopOnContainers.WebMVC.Models.CatalogViewModels;
+using BikeSharing_Private_Web_Site.Services.Pagination;
+
+namespace Microsoft.eShopOnContainers.WebMVC.Controllers
+{
+    public class CatalogController : Controller
+    {
+        private ICatalogService _catalogSvc;
+
+        public CatalogController(ICatalogService catalogSvc)
+        {
+            _catalogSvc = catalogSvc;
+        }
+
+        public async Task<IActionResult> Index(int? BrandFilterApplied, int? TypesFilterApplied, int? page)
+        {
+            var vm = new IndexViewModel()
+            {
+                CatalogItems = await _catalogSvc.GetCatalogItems(8 * (page ?? 0), 8),
+                Brands = _catalogSvc.GetTypes(),
+                Types = _catalogSvc.GetBrands(),
+                BrandFilterApplied = BrandFilterApplied ?? 0,
+                TypesFilterApplied = TypesFilterApplied ?? 0,
+                PaginationInfo = new PaginationInfo()
+                {
+                    ActualPage = page ?? 0,
+                    ItemsPerPage = 8,
+                    TotalItems = _catalogSvc.TotalItems, 
+                    TotalPages = int.Parse(Math.Round(((decimal)_catalogSvc.TotalItems / 8), MidpointRounding.AwayFromZero).ToString())
+                }
+            };
+
+            vm.PaginationInfo.Next = (vm.PaginationInfo.ActualPage == vm.PaginationInfo.TotalPages - 1) ? "is-disabled" : "";
+            vm.PaginationInfo.Previous = (vm.PaginationInfo.ActualPage == 0) ? "is-disabled" : "";
+
+            return View(vm);
+        }
+
+        public IActionResult Error()
+        {
+            return View();
+        }
+    }
+}
+

src/Web/WebMVC/Controllers/HomeController.cs

@@ -1,55 +0,0 @@
-using System;
-using System.Collections.Generic;
-using System.Linq;
-using System.Threading.Tasks;
-using System.Net.Http;
-using Microsoft.AspNetCore.Mvc;
-using Microsoft.eShopOnContainers.WebMVC.Models;
-using Microsoft.Extensions.Options;
-using Newtonsoft.Json;
-using Microsoft.eShopOnContainers.WebMVC.Services;
-using Microsoft.eShopOnContainers.WebMVC.Models.HomeViewModels;
-
-namespace Microsoft.eShopOnContainers.WebMVC.Controllers
-{
-    public class HomeController : Controller
-    {
-        private HttpClient _http;
-        private AppSettings _settings;
-        private ICatalogService _catalogSvc;
-
-        public HomeController(IOptions<AppSettings> options, ICatalogService catalogSvc)
-        {
-            _http = new HttpClient();
-            _settings = options.Value;
-            _catalogSvc = catalogSvc;
-        }
-        public async Task<IActionResult> Index()
-        {
-            //var dataString = await _http.GetStringAsync(_settings.CatalogUrl);
-            //var items = JsonConvert.DeserializeObject<List<CatalogItem>>(dataString);
-            //items.AddRange(items);
-            var items = await _catalogSvc.GetCatalogItems();
-            var vm = new IndexViewModel()
-            {
-                CatalogItems = items
-            };
-            return View(vm);
-        }
-
-        public async Task<IActionResult> Orders()
-        {
-            ViewData["Message"] = "Orders page.";
-
-            var ordersUrl = _settings.OrderingUrl + "/api/ordering/orders";
-            var dataString = await _http.GetStringAsync(ordersUrl);
-            var items = JsonConvert.DeserializeObject<List<Order>>(dataString);
-            return View(items);
-        }
-
-        public IActionResult Error()
-        {
-            return View();
-        }
-    }
-}

src/Web/WebMVC/Controllers/OrderController.cs

@@ -16,6 +16,11 @@ namespace Microsoft.eShopOnContainers.WebMVC.Controllers
             _orderSvc = orderSvc;
         }
 
+        public IActionResult AddToCart()
+        {
+            return View();
+        }
+
         public IActionResult Cart()
         {
             return View();

src/Web/WebMVC/Models/CatalogItem.cs

@@ -8,5 +8,6 @@ namespace Microsoft.eShopOnContainers.WebMVC.Models
         public string Name { get; set; }
         public string Description { get; set; }
         public decimal Price { get; set; }
+        public string PicsUrl { get; set; }
     }
 }

src/Web/WebMVC/Models/CatalogViewModels/IndexViewModel.cs

@@ -1,10 +1,11 @@
-using Microsoft.AspNetCore.Mvc.Rendering;
+using BikeSharing_Private_Web_Site.Services.Pagination;
+using Microsoft.AspNetCore.Mvc.Rendering;
 using System;
 using System.Collections.Generic;
 using System.Linq;
 using System.Threading.Tasks;
 
-namespace Microsoft.eShopOnContainers.WebMVC.Models.HomeViewModels
+namespace Microsoft.eShopOnContainers.WebMVC.Models.CatalogViewModels
 {
     public class IndexViewModel
     {
@@ -13,5 +14,6 @@ namespace Microsoft.eShopOnContainers.WebMVC.Models.HomeViewModels
         public IEnumerable<SelectListItem> Types { get; set; }
         public int BrandFilterApplied { get; set; }
         public int TypesFilterApplied { get; set; }
+        public PaginationInfo PaginationInfo { get; set; }
     }
 }

src/Web/WebMVC/Models/Pagination/PaginationInfo.cs

@@ -0,0 +1,17 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+
+namespace BikeSharing_Private_Web_Site.Services.Pagination
+{
+    public class PaginationInfo
+    {
+        public int TotalItems { get; set; }
+        public int ItemsPerPage { get; set; }
+        public int ActualPage { get; set; }
+        public int TotalPages { get; set; }
+        public string Previous { get; set; }
+        public string Next { get; set; }
+    }
+}

src/Web/WebMVC/Services/CartService.cs

@@ -28,7 +28,7 @@ namespace Microsoft.eShopOnContainers.WebMVC.Services
             throw new NotImplementedException();
         }
 
-        public Task<Order> GetOrderInProgress()
+        public Task<Order> GetActiveOrder()
         {
             return Task.Run(() => { return _order; });
         }

src/Web/WebMVC/Services/CatalogService.cs

@@ -3,21 +3,65 @@ using System.Collections.Generic;
 using System.Linq;
 using System.Threading.Tasks;
 using Microsoft.eShopOnContainers.WebMVC.Models;
+using Microsoft.CodeAnalysis.Options;
+using Microsoft.Extensions.Options;
+using System.Net.Http;
+using Microsoft.AspNetCore.Mvc.Rendering;
 
 namespace Microsoft.eShopOnContainers.WebMVC.Services
 {
     public class CatalogService : ICatalogService
     {
-        List<CatalogItem> _items;
+        private readonly List<CatalogItem> _items;          //Fake data while services are ready. 
+        private readonly IOptions<AppSettings> _settings;
+        private HttpClient _apiClient;
+        private readonly string _remoteServiceBaseUrl;
+        private int _totalItems;
 
-        public CatalogService() {
+        public int TotalItems 
+        {
+            get
+            {
+                return _totalItems;
+            }
+        }
+
+        public CatalogService(IOptions<AppSettings> settings) {
+            _settings = settings;
+
+            #region fake data
             _items = new List<CatalogItem>()
             {
-                new CatalogItem() { Id = Guid.NewGuid(), Description = "Roslyn Red T-Shirt", Name = "Roslyn Red T-Shirt", Price = 12 },
+                new CatalogItem() { Id = Guid.NewGuid(), Description = "Roslyn Red T-Shirt", Name = "Roslyn Red T-Shirt", Price = 12, PicsUrl = "https://fakeimg.pl/370x240/EEEEEE/000/?text=RoslynRedT-Shirt"  },
-                new CatalogItem() { Id = Guid.NewGuid(), Description = "Cupt Black & White Mug", Name = "Cupt Black & White Mug", Price= 17 },
+                new CatalogItem() { Id = Guid.NewGuid(), Description = "Cupt Black & White Mug", Name = "Cupt Black & White Mug", Price= 17, PicsUrl = "https://fakeimg.pl/370x240/EEEEEE/000/?text=CuptBlack&WhiteMug" },
-                new CatalogItem() { Id = Guid.NewGuid(), Description = "Prism White T-Shirt", Name = "Prism White T-Shirt", Price = 12 },
+                new CatalogItem() { Id = Guid.NewGuid(), Description = "Prism White T-Shirt", Name = "Prism White T-Shirt", Price = 12, PicsUrl = "http://fakeimg.pl/370x240/EEEEEE/000/?text=.PrismWhiteT-Shirt" },
-                new CatalogItem() { Id = Guid.NewGuid(), Description = ".NET Bot Black Sweatshirt", Name = ".NET Bot Black Sweatshirt", Price = decimal.Parse("19.5") }
+                new CatalogItem() { Id = Guid.NewGuid(), Description = ".NET Bot Black Sweatshirt", Name = ".NET Bot Black Sweatshirt", Price = decimal.Parse("19.5"), PicsUrl = "http://fakeimg.pl/370x240/EEEEEE/000/?text=.NETBotBlack" },
+                new CatalogItem() { Id = Guid.NewGuid(), Description = "Roslyn Red T-Shirt", Name = "Roslyn Red T-Shirt", Price = 12, PicsUrl = "http://fakeimg.pl/370x240/EEEEEE/000/?text=RoslynRedT-Shirt"  },
+                new CatalogItem() { Id = Guid.NewGuid(), Description = "Cupt Black & White Mug", Name = "Cupt Black & White Mug", Price= 17, PicsUrl = "https://fakeimg.pl/370x240/EEEEEE/000/?text=CuptBlack&WhiteMug" },
+                new CatalogItem() { Id = Guid.NewGuid(), Description = "Prism White T-Shirt", Name = "Prism White T-Shirt", Price = 12, PicsUrl = "http://fakeimg.pl/370x240/EEEEEE/000/?text=.PrismWhiteT-Shirt" },
+                new CatalogItem() { Id = Guid.NewGuid(), Description = ".NET Bot Black Sweatshirt", Name = ".NET Bot Black Sweatshirt", Price = decimal.Parse("19.5"), PicsUrl = "http://fakeimg.pl/370x240/EEEEEE/000/?text=.NETBotBlack" },
+                new CatalogItem() { Id = Guid.NewGuid(), Description = "Roslyn Red T-Shirt", Name = "Roslyn Red T-Shirt", Price = 12, PicsUrl = "http://fakeimg.pl/370x240/EEEEEE/000/?text=RoslynRedT-Shirt"  },
+                new CatalogItem() { Id = Guid.NewGuid(), Description = "Cupt Black & White Mug", Name = "Cupt Black & White Mug", Price= 17, PicsUrl = "https://fakeimg.pl/370x240/EEEEEE/000/?text=CuptBlack&WhiteMug" },
+                new CatalogItem() { Id = Guid.NewGuid(), Description = "Prism White T-Shirt", Name = "Prism White T-Shirt", Price = 12, PicsUrl = "http://fakeimg.pl/370x240/EEEEEE/000/?text=.PrismWhiteT-Shirt" },
+                new CatalogItem() { Id = Guid.NewGuid(), Description = ".NET Bot Black Sweatshirt", Name = ".NET Bot Black Sweatshirt", Price = decimal.Parse("19.5"), PicsUrl = "http://fakeimg.pl/370x240/EEEEEE/000/?text=.NETBotBlack" },
+                new CatalogItem() { Id = Guid.NewGuid(), Description = "Roslyn Red T-Shirt", Name = "Roslyn Red T-Shirt", Price = 12, PicsUrl = "http://fakeimg.pl/370x240/EEEEEE/000/?text=RoslynRedT-Shirt"  },
+                new CatalogItem() { Id = Guid.NewGuid(), Description = "Cupt Black & White Mug", Name = "Cupt Black & White Mug", Price= 17, PicsUrl = "https://fakeimg.pl/370x240/EEEEEE/000/?text=CuptBlack&WhiteMug" },
+                new CatalogItem() { Id = Guid.NewGuid(), Description = "Prism White T-Shirt", Name = "Prism White T-Shirt", Price = 12, PicsUrl = "http://fakeimg.pl/370x240/EEEEEE/000/?text=.PrismWhiteT-Shirt" },
+                new CatalogItem() { Id = Guid.NewGuid(), Description = ".NET Bot Black Sweatshirt", Name = ".NET Bot Black Sweatshirt", Price = decimal.Parse("19.5"), PicsUrl = "http://fakeimg.pl/370x240/EEEEEE/000/?text=.NETBotBlack" },
+                new CatalogItem() { Id = Guid.NewGuid(), Description = "Roslyn Red T-Shirt", Name = "Roslyn Red T-Shirt", Price = 12, PicsUrl = "http://fakeimg.pl/370x240/EEEEEE/000/?text=RoslynRedT-Shirt"  },
+                new CatalogItem() { Id = Guid.NewGuid(), Description = "Cupt Black & White Mug", Name = "Cupt Black & White Mug", Price= 17, PicsUrl = "https://fakeimg.pl/370x240/EEEEEE/000/?text=CuptBlack&WhiteMug" },
+                new CatalogItem() { Id = Guid.NewGuid(), Description = "Prism White T-Shirt", Name = "Prism White T-Shirt", Price = 12, PicsUrl = "http://fakeimg.pl/370x240/EEEEEE/000/?text=.PrismWhiteT-Shirt" },
+                new CatalogItem() { Id = Guid.NewGuid(), Description = ".NET Bot Black Sweatshirt", Name = ".NET Bot Black Sweatshirt", Price = decimal.Parse("19.5"), PicsUrl = "http://fakeimg.pl/370x240/EEEEEE/000/?text=.NETBotBlack" },
+                new CatalogItem() { Id = Guid.NewGuid(), Description = "Roslyn Red T-Shirt", Name = "Roslyn Red T-Shirt", Price = 12, PicsUrl = "http://fakeimg.pl/370x240/EEEEEE/000/?text=RoslynRedT-Shirt"  },
+                new CatalogItem() { Id = Guid.NewGuid(), Description = "Cupt Black & White Mug", Name = "Cupt Black & White Mug", Price= 17, PicsUrl = "https://fakeimg.pl/370x240/EEEEEE/000/?text=CuptBlack&WhiteMug" },
+                new CatalogItem() { Id = Guid.NewGuid(), Description = "Prism White T-Shirt", Name = "Prism White T-Shirt", Price = 12, PicsUrl = "http://fakeimg.pl/370x240/EEEEEE/000/?text=.PrismWhiteT-Shirt" },
+                new CatalogItem() { Id = Guid.NewGuid(), Description = ".NET Bot Black Sweatshirt", Name = ".NET Bot Black Sweatshirt", Price = decimal.Parse("19.5"), PicsUrl = "http://fakeimg.pl/370x240/EEEEEE/000/?text=.NETBotBlack" },
+                new CatalogItem() { Id = Guid.NewGuid(), Description = "Roslyn Red T-Shirt", Name = "Roslyn Red T-Shirt", Price = 12, PicsUrl = "http://fakeimg.pl/370x240/EEEEEE/000/?text=RoslynRedT-Shirt"  },
+                new CatalogItem() { Id = Guid.NewGuid(), Description = "Cupt Black & White Mug", Name = "Cupt Black & White Mug", Price= 17, PicsUrl = "https://fakeimg.pl/370x240/EEEEEE/000/?text=CuptBlack&WhiteMug" },
+                new CatalogItem() { Id = Guid.NewGuid(), Description = "Prism White T-Shirt", Name = "Prism White T-Shirt", Price = 12, PicsUrl = "http://fakeimg.pl/370x240/EEEEEE/000/?text=.PrismWhiteT-Shirt" },
+                new CatalogItem() { Id = Guid.NewGuid(), Description = ".NET Bot Black Sweatshirt", Name = ".NET Bot Black Sweatshirt", Price = decimal.Parse("19.5"), PicsUrl = "http://fakeimg.pl/370x240/EEEEEE/000/?text=.NETBotBlack" }
             };
+            #endregion
         }
          
         public CatalogItem GetCatalogItem(Guid Id)
@@ -25,9 +69,37 @@ namespace Microsoft.eShopOnContainers.WebMVC.Services
             return _items.Where(x => x.Id == Id).FirstOrDefault();
         }
 
-        public Task<List<CatalogItem>> GetCatalogItems()
+        public Task<List<CatalogItem>> GetCatalogItems(int? skip,int? take)
         {
+            var res = _items;
+
+            _totalItems = _items.Count();
+
+            if (skip.HasValue)
+                return Task.Run(() => { return _items.Skip(skip.Value).Take(take.Value).ToList(); });
+            else
                 return Task.Run(() => { return _items; });
         }
+
+        public IEnumerable<SelectListItem> GetBrands()
+        {
+            var items = new List<SelectListItem>();
+            items.Add(new SelectListItem() { Value = "0", Text = "All", Selected = true });
+            items.Add(new SelectListItem() { Value = "1", Text = "Visual Studio" });
+            items.Add(new SelectListItem() { Value = "2", Text = "Azure" });
+
+            return items;
+        }
+
+        public IEnumerable<SelectListItem> GetTypes()
+        {
+            var items = new List<SelectListItem>();
+            items.Add(new SelectListItem() { Value = "0", Text = "All", Selected = true });
+            items.Add(new SelectListItem() { Value = "1", Text = "Mug" });
+            items.Add(new SelectListItem() { Value = "2", Text = "T-Shirt" });
+            
+
+            return items;
+        }
     }
 }

src/Web/WebMVC/Services/ICartService.cs

@@ -11,6 +11,6 @@ namespace Microsoft.eShopOnContainers.WebMVC.Services
         void AddItemToOrder(CatalogItem item);
         void RemoveItemFromOrder(Guid itemIdentifier);
         int GetItemCountFromOrderInProgress();
-        Task<Order> GetOrderInProgress();
+        Task<Order> GetActiveOrder();
     }
 }

src/Web/WebMVC/Services/ICatalogService.cs

@@ -1,4 +1,5 @@
-using Microsoft.eShopOnContainers.WebMVC.Models;
+using Microsoft.AspNetCore.Mvc.Rendering;
+using Microsoft.eShopOnContainers.WebMVC.Models;
 using System;
 using System.Collections.Generic;
 using System.Linq;
@@ -8,7 +9,11 @@ namespace Microsoft.eShopOnContainers.WebMVC.Services
 {
     public interface ICatalogService
     {
-        Task<List<CatalogItem>> GetCatalogItems();
+        int TotalItems { get; }
+
+        Task<List<CatalogItem>> GetCatalogItems(int? skip, int? take);
         CatalogItem GetCatalogItem(Guid Id);
+        IEnumerable<SelectListItem> GetBrands();
+        IEnumerable<SelectListItem> GetTypes();
     }
 }

src/Web/WebMVC/Services/OrderingService.cs

@@ -9,6 +9,9 @@ namespace Microsoft.eShopOnContainers.WebMVC.Services
     public class OrderingService : IOrderingService
     {
         private List<Order> _orders;
+        //var ordersUrl = _settings.OrderingUrl + "/api/ordering/orders";
+        //var dataString = await _http.GetStringAsync(ordersUrl);
+        //var items = JsonConvert.DeserializeObject<List<Order>>(dataString);
 
         public OrderingService()
         {

src/Web/WebMVC/Startup.cs

@@ -22,7 +22,8 @@ namespace Microsoft.eShopOnContainers.WebMVC
             var builder = new ConfigurationBuilder()
                 .SetBasePath(env.ContentRootPath)
                 .AddJsonFile("appsettings.json", optional: true, reloadOnChange: true)
-                .AddJsonFile($"appsettings.{env.EnvironmentName}.json", optional: true);
+                .AddJsonFile($"appsettings.{env.EnvironmentName}.json", optional: true)
+                .AddEnvironmentVariables();            
 
             if (env.IsDevelopment())
             {
@@ -73,7 +74,7 @@ namespace Microsoft.eShopOnContainers.WebMVC
             }
             else
             {
-                app.UseExceptionHandler("/Home/Error");
+                app.UseExceptionHandler("/Catalog/Error");
             }
 
             app.UseStaticFiles();
@@ -86,7 +87,7 @@ namespace Microsoft.eShopOnContainers.WebMVC
             {
                 routes.MapRoute(
                     name: "default",
-                    template: "{controller=Home}/{action=Index}/{id?}");
+                    template: "{controller=Catalog}/{action=Index}/{id?}");
             });
         }
     }

src/Web/WebMVC/ViewComponents/CartList.cs

@@ -8,11 +8,11 @@ using System.Threading.Tasks;
 
 namespace Microsoft.eShopOnContainers.WebMVC.ViewComponents
 {
-    public class Cart : ViewComponent
+    public class CartList : ViewComponent
     {
         private readonly ICartService _cartSvc;
 
-        public Cart(ICartService cartSvc)
+        public CartList(ICartService cartSvc)
         {
             _cartSvc = cartSvc;
         }
@@ -24,7 +24,7 @@ namespace Microsoft.eShopOnContainers.WebMVC.ViewComponents
         }
         private Task<Order> GetItemsAsync()
         {
-            return _cartSvc.GetOrderInProgress();
+            return _cartSvc.GetActiveOrder();
         }
     }
 }

src/Web/WebMVC/Views/Catalog/Index.cshtml

@@ -0,0 +1,110 @@
+@{
+    ViewData["Title"] = "Catalog";
+    @model Microsoft.eShopOnContainers.WebMVC.Models.CatalogViewModels.IndexViewModel
+}
+
+<div class="container-fluid">
+    <div class="row home-banner">
+        <div class="container home-banner-text"><img src="~/images/main_banner_text.png" /></div>
+    </div>
+
+    <div class="home-catalog-filter-container">
+        <div class="container">
+            <form asp-action="Index" asp-controller="Catalog" method="post">
+                <div data-name="brand" class="select-filter-wrapper">
+                    <img src="~/images/arrow-down.png" class="select-filter-arrow" />
+                    <select asp-for="@Model.BrandFilterApplied" asp-items="@Model.Brands" class="select-filter"></select>
+                </div>
+                <div data-name="type" class="select-filter-wrapper">
+                    <img src="~/images/arrow-down.png" class="select-filter-arrow" />
+                    <select asp-for="@Model.TypesFilterApplied" asp-items="@Model.Types" class="select-filter"></select>
+                </div>
+                <input type="submit" class="btn-brand btn-brand-small btn-brand-small-filter btn-catalog-apply" value="APPLY" />
+            </form>
+        </div>
+    </div>
+</div>
+
+<div class="container home-catalog-container">
+    <div class="container es-pager-top">
+        <div class="row">
+            <div class="col-xs-4">
+                <nav>
+                    <ul>
+                        <li class="page-item">
+                           <a class="text previous @Model.PaginationInfo.Previous" id="Previous"
+                               href="@Url.Action("Index","Catalog", new { page = Model.PaginationInfo.ActualPage -1 })"
+                               aria-label="Previous">
+                                <span>Previous</span>
+                            </a>
+                        </li>
+                    </ul>
+                </nav>
+            </div>
+            <div class="col-xs-4 u-align-center"><span>Showing @Html.DisplayFor(modelItem => modelItem.PaginationInfo.ItemsPerPage) of @Html.DisplayFor(modelItem => modelItem.PaginationInfo.TotalItems) products - Page @(Model.PaginationInfo.ActualPage + 1) of @Html.DisplayFor(x => x.PaginationInfo.TotalPages)</span></div>
+            <div class="col-xs-4">
+                <nav>
+                    <ul>
+                        <li class="page-item">
+                            <a class="text next @Model.PaginationInfo.Next" id="Next"
+                               href="@Url.Action("Index","Catalog", new { page = Model.PaginationInfo.ActualPage + 1 })"
+                               aria-label="Next">
+                                <span>Next</span>
+                            </a>
+                        </li>
+                    </ul>
+                </nav>
+            </div>
+        </div>
+    </div>
+    <div class="row">
+        @foreach (var catalogItem in Model.CatalogItems)
+        {
+            <div class="col-sm-4 home-catalog-item">
+                <div class="home-catalog-item-image" >
+                    <img src="@catalogItem.PicsUrl" />
+                    <a asp-area="" asp-controller="Home" asp-action="About" class="btn-brand home-catalog-item-image-addCart">
+                        ADD TO CART
+                    </a>
+                </div>
+                <div class="home-catalog-item-title">
+                    <span>@catalogItem.Name</span>
+                </div>
+                <div class="home-catalog-item-price">
+                    <span>@catalogItem.Price.ToString("N2")</span>
+                </div>
+            </div>
+        }
+    </div>
+    <div class="container es-pager-bottom">
+        <div class="row">
+            <div class="col-xs-4">
+                <nav>
+                    <ul>
+                        <li class="page-item">
+                            <a class="text previous @Model.PaginationInfo.Previous" id="Previous"
+                               href="@Url.Action("Index","Catalog", new { page = Model.PaginationInfo.ActualPage + -1 })"
+                               aria-label="Previous">
+                                <span>Previous</span>
+                            </a>
+                        </li>
+                    </ul>
+                </nav>
+            </div>
+            <div class="col-xs-4 u-align-center"><span>Showing @Html.DisplayFor(modelItem => modelItem.PaginationInfo.ItemsPerPage) of @Html.DisplayFor(modelItem => modelItem.PaginationInfo.TotalItems) products - Page @(Model.PaginationInfo.ActualPage + 1) of @Html.DisplayFor(x => x.PaginationInfo.TotalPages)</span></div>
+            <div class="col-xs-4">
+                <nav>
+                    <ul>
+                        <li class="page-item">
+                            <a class="text next @Model.PaginationInfo.Next" id="Next"
+                               href="@Url.Action("Index","Catalog", new { page = Model.PaginationInfo.ActualPage + 1 })"
+                               aria-label="Next">
+                                <span>Next</span>
+                            </a>
+                        </li>
+                    </ul>
+                </nav>
+            </div>
+        </div>
+    </div>
+</div>

src/Web/WebMVC/Views/Home/Index.cshtml

@@ -1,67 +0,0 @@
-@{
-    ViewData["Title"] = "Home Page";
-    @model Microsoft.eShopOnContainers.WebMVC.Models.HomeViewModels.IndexViewModel
-}
-
-<div class="container-fluid">
-    <div class="row home-banner">
-        <div class="container home-banner-text"><img src="~/images/main_banner_text.png" /></div>
-    </div>
-
-    <div class="home-catalog-filter-container">
-        <div class="container">
-            @*<ul class="nav navbar-nav col-sm-6 home-catalog-filter-brands">
-                <li><a asp-area="" asp-controller="Home" asp-action="Index" class="btn-bracketed">ALL</a></li>
-                <li><a asp-area="" asp-controller="Home" asp-action="About" class="btn-bracketed">AZURE</a></li>
-                <li><a asp-area="" asp-controller="Home" asp-action="Contact" class="btn-bracketed">.NET</a></li>
-                <li><a asp-area="" asp-controller="Home" asp-action="Orders" class="btn-bracketed">LOREM</a></li>
-                <li><a asp-area="" asp-controller="Home" asp-action="Orders" class="btn-bracketed">IPSUM</a></li>
-            </ul>
-            <ul class="nav navbar-nav col-sm-6 home-catalog-filter-types">
-                <li><a asp-area="" asp-controller="Home" asp-action="Index" class="btn-bracketed">ALL</a></li>
-                <li><a asp-area="" asp-controller="Home" asp-action="About" class="btn-bracketed">T-SHIRT</a></li>
-                <li><a asp-area="" asp-controller="Home" asp-action="Contact" class="btn-bracketed">STICKER</a></li>
-                <li><a asp-area="" asp-controller="Home" asp-action="Orders" class="btn-bracketed">MUGS</a></li>
-                <li><a asp-area="" asp-controller="Home" asp-action="Orders" class="btn-bracketed">SWEATSHIRT</a></li>
-            </ul>*@
-            <div data-name="brand" class="select-filter-wrapper">
-                <img src="~/images/arrow-down.png" class="select-filter-arrow" />
-                <select asp-for="BrandFilterApplied" asp-items="Model.Brands" class="select-filter" >
-                    <option>ALL</option>
-                </select>
-            </div>
-            <div data-name="type" class="select-filter-wrapper">
-                <img src="~/images/arrow-down.png" class="select-filter-arrow" />
-                <select asp-for="TypesFilterApplied" asp-items="Model.Types" class="select-filter">
-                    <option>ALL</option>
-                </select>
-            </div>
-            <a asp-area="" asp-controller="Home" asp-action="About" class="btn-brand btn-brand-small btn-brand-small-filter">
-                APPLY
-            </a>
-        </div>
-    </div>
-</div>
-
-<div class="container home-catalog-container">
-    <div class="row">
-        @foreach (var catalogItem in Model.CatalogItems)
-        {
-            <div class="col-sm-4 home-catalog-item">
-                <div class="home-catalog-item-image" >
-                    <img src="~/images/product_temp.PNG" />
-                    <a asp-area="" asp-controller="Home" asp-action="About" class="btn-brand home-catalog-item-image-addCart">
-                        ADD TO CART
-                    </a>
-                </div>
-                <div class="home-catalog-item-title">
-                    <span>@catalogItem.Name</span>
-                </div>
-                <div class="home-catalog-item-price">
-                    <span>@catalogItem.Price.ToString("N2")</span>
-                </div>
-            </div>
-        }
-    </div>
-</div>
-

src/Web/WebMVC/Views/Order/Cart.cshtml

@@ -6,14 +6,11 @@
 
 <div class="brand-header-block">
     <ul class="container">
-        <li class="brand-header-back"><a asp-area="" asp-controller="Home" asp-action="Index">Back to list</a></li>
+        <li class="brand-header-back"><a asp-area="" asp-controller="Catalog" asp-action="Index">Back to list</a></li>
     </ul>
 </div>
 <div class="container cart-index-container">
     <div class="row">
-        <div class="col-md-offset-8 col-md-4">
-            <a asp-controller="Home" asp-action="Index" class="btn btn-default btn-brand btn-brand-dark btn-cart">&nbsp;Continue Shopping&nbsp;</a>
-        </div>
         <br /><br /><br /><br />
         <div class="col-md-12">
             <section>
@@ -41,7 +38,7 @@
                         </tr>
                     </thead>
                     <tbody>
-                        @await Component.InvokeAsync("Cart")
+                        @await Component.InvokeAsync("CartList")
                     </tbody>
                 </table>
             </section>

src/Web/WebMVC/Views/Shared/Components/Cart/Default.cshtml

@@ -4,17 +4,7 @@
     ViewData["Title"] = "My Cart";
 }
 
-@foreach (var item in Model.OrderItems)
+<a asp-area="" asp-controller="Order" asp-action="Cart"><img src="~/images/cart.PNG" class="layout-cart-image hidden-xs"></a>
-{
-    <tr>
-        <td>@*image*@</td>
-        <td>@item.ProductName</td>
-        <td>ROSLYN</td>
-        <td>$&nbsp;@item.UnitPrice</td>
-        <td>@item.Quantity</td>
-        <td>$&nbsp;@item.Quantity * @item.UnitPrice</td>
-    </tr>
-}
 
 
 

src/Web/WebMVC/Views/Shared/Components/CartList/Default.cshtml

@@ -0,0 +1,20 @@
+@model Microsoft.eShopOnContainers.WebMVC.Models.Order
+
+@{
+    ViewData["Title"] = "My Cart";
+}
+
+@foreach (var item in Model.OrderItems)
+{
+    <tr>
+        <td>@*image*@</td>
+        <td>@item.ProductName</td>
+        <td>ROSLYN</td>
+        <td>$&nbsp;@item.UnitPrice</td>
+        <td>@item.Quantity</td>
+        <td>$&nbsp;@item.Quantity * @item.UnitPrice</td>
+    </tr>
+}
+
+
+

src/Web/WebMVC/Views/Shared/_Layout.cshtml

@@ -17,17 +17,11 @@
     </environment>
 </head>
 <body>
-    <div class="navbar navbar-inverse navbar-fixed-top">
+    <div class="navbar navbar-inverse navbar-fixed-top es-header">
         <div class="container">
             <div class="row">
                 <div class="navbar-header col-sm-8 col-xs-8">
-                    @*<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
+                   <a asp-area="" asp-controller="Catalog" asp-action="Index">
-                            <span class="sr-only">Toggle navigation</span>
-                            <span class="icon-bar"></span>
-                            <span class="icon-bar"></span>
-                            <span class="icon-bar"></span>
-                        </button>*@
-                    <a asp-area="" asp-controller="Home" asp-action="Index">
                         <div class="navbar-brand">
                         </div>
                     </a>

src/Web/WebMVC/Views/Shared/_LoginPartial.cshtml

@@ -9,15 +9,20 @@
     <form asp-area="" asp-controller="Account" asp-action="LogOff" method="post" id="logoutForm" class="navbar-right">
         <ul class="nav navbar-nav navbar-right">
             <li style="float:right"><a asp-area="" asp-controller="Order" asp-action="Cart"><img src="~/images/cart.PNG" class="layout-cart-image hidden-xs"></a></li>
-            <li class="fr"><a href="javascript:document.getElementById('logoutForm').submit()" class="btn-login">&nbsp;Log Out&nbsp;</a></li>
+            <li class="fr login-user"><a asp-area="" asp-controller="Manage" asp-action="Index" title="Manage">@UserManager.GetUserName(User)</a></li>
-            @*<li class="fr login-user"><a asp-area="" asp-controller="Manage" asp-action="Index" title="Manage">@UserManager.GetUserName(User)</a></li>*@
+            @*<li class="fr"><a href="javascript:document.getElementById('logoutForm').submit()" class="btn-login">&nbsp;Log Out&nbsp;</a></li>*@
         </ul>
+        <div class=".login-user-dropdown-content">
+            <a href="#">Link 1</a>
+            <a href="#">Link 2</a>
+            <a href="#">Link 3</a>
+        </div>
     </form>
 }
 else
 {
     <ul class="nav navbar-nav navbar-right">
         <li><a asp-area="" asp-controller="Account" class="btn-login" asp-action="Login">&nbsp;Log In&nbsp;</a></li>
-        <li><a asp-area="" asp-controller="Order" asp-action="Cart"><img src="~/images/cart.PNG" class="layout-cart-image hidden-xs"></a></li>
+        @*<li><a asp-area="" asp-controller="Order" asp-action="Cart"><img src="~/images/cart.PNG" class="layout-cart-image hidden-xs"></a></li>*@
     </ul>
 }

src/Web/WebMVC/appsettings.json

@@ -1,7 +1,7 @@
 {
   "ConnectionStrings": {
     //"DefaultConnection": "Server=(localdb)\\mssqllocaldb;Database=aspnet-Microsoft.eShopOnContainers.WebMVC-946ae052-8305-4a99-965b-ec8636ddbae3;Trusted_Connection=True;MultipleActiveResultSets=true;"
-    "DefaultConnection": "Server=(localdb)\\MSSQLLocalDB;Database=aspnet-Microsoft.eShopOnContainers.WebMVC;Initial Catalog=master;Integrated Security=True;Connect Timeout=30;Encrypt=False;TrustServerCertificate=True;ApplicationIntent=ReadWrite;MultiSubnetFailover=False;Trusted_Connection=True;"
+    "DefaultConnection": "Server=.;Database=aspnet-Microsoft.eShopOnContainers.WebMVC;Integrated Security=True;Connect Timeout=30;Encrypt=False;TrustServerCertificate=True;ApplicationIntent=ReadWrite;MultiSubnetFailover=False;Trusted_Connection=True;"
   },
   "CatalogUrl": "http://localhost:56986/",
   "OrderingUrl": "http://localhost:2446/",
@@ -14,5 +14,3 @@
     }
   }
 }
-
-Data Source=tcp:eshoponcontainerswebmvc2016dbserver.database.windows.net,1433;Initial Catalog=eShopOnContainersWebMVC2016_db;User Id=eshoponcontainerswebmvc2016dbserver@eshoponcontainerswebmvc2016dbserver;Password=Patata.123

src/Web/WebMVC/wwwroot/css/site.css

@@ -37,13 +37,17 @@ textarea {
     margin-right: 20px;
     color: white;
     padding-top: 20px;
-    padding-bottom: 5px;
+    padding-bottom: 3px;
-    min-width: 120px;
+    min-width: 140px;
     border-color: #37c7ca;
     max-height: 43px;
     -webkit-appearance: none;
 }
 
+    .select-filter option {
+        background-color: #00a69c;
+    }
+
 select::-ms-expand {
     display: none;
 }
@@ -62,13 +66,13 @@ select::-ms-expand {
     position: absolute;
     font-size: 10px;
     margin-top: 15px;
-    margin-left: 25px;
+    margin-left: 21px;
     color: white;
 }
 
 .select-filter-arrow {
     position: absolute;
-    margin-left: 110px;
+    margin-left: 130px;
     margin-top: 40px;
 }
 
@@ -181,6 +185,11 @@ select::-ms-expand {
     float: right;
 }
 
+.btn-catalog-apply {
+    padding-left: 10px;
+    padding-top: 13px;
+}
+
 .form-label {
     text-transform: uppercase;
     font-weight: normal!important;
@@ -299,6 +308,7 @@ select::-ms-expand {
 
 .home-catalog-container {
     min-height: 400px;
+    margin-bottom: 20px;
 }
 
 .home-catalog-filter-container {
@@ -409,7 +419,11 @@ footer {
         margin-top: 10px;
     }
 
-form .text {
+.text {
+    color: #83D01B;
+}
+
+.text:hover {
     color: #83D01B;
 }
 
@@ -517,10 +531,74 @@ form .col-md-4 {
 
 .login-user {
     position: absolute!important;
-    top: 40px;
+    top: 15px;
     right: 65px;
 }
 
+.login-user-dropdown {
+    position: relative;
+    display: inline-block;
+}
+
+.login-user-dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: #f9f9f9;
+    min-width: 160px;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+}
+
+.login-user-dropdown-content a {
+    color: black;
+    padding: 12px 16px;
+    text-decoration: none;
+    display: block;
+}
+
+.es-header {
+    min-height: 80px!important;
+}
+
+.es-pager-bottom {
+    margin-top: 40px;
+}
+
+.es-pager-top {
+    margin-bottom: 20px;
+    margin-top: 20px;
+}
+
+.es-pager-top ul {
+    list-style: none;
+}
+
+.es-pager-bottom ul {
+    list-style: none;
+}
+
+.page-item {
+    cursor: pointer;
+}
+
+.next {
+    position: absolute;
+    right: 0;
+    top: 0;
+}
+
+.previous {
+    position: absolute;
+    left: 0;
+    top: 0;
+}
+
+.is-disabled{
+    cursor: not-allowed;
+    opacity: .5;
+    pointer-events: none;
+}
+
+
 /* Hide/rearrange for smaller screens */
 @media screen and (max-width: 767px) {
     /* Hide captions */