Integration with Catalog api, filter and pagination.

src/Services/Catalog/Catalog.API/Infrastructure/CatalogContextSeed.cs

@@ -15,8 +15,6 @@
 
             using (context)
             {
-                context.Database.EnsureDeleted();
-
                 context.Database.EnsureCreated();
 
                 if (!context.CatalogBrands.Any())

src/Services/Catalog/Catalog.API/Startup.cs

@@ -21,7 +21,7 @@ namespace Microsoft.eShopOnContainers.Services.Catalog.API
         {
             var builder = new ConfigurationBuilder()
                 .SetBasePath(env.ContentRootPath)
-                .AddJsonFile($"settings.{env.EnvironmentName}.json",optional:false)
+                .AddJsonFile($"settings.json",optional:false)
                 .AddEnvironmentVariables();
 
 

src/Services/Catalog/Catalog.API/project.json

@@ -43,7 +43,7 @@
       "wwwroot",
       "Views",
       "Areas/**/Views",
-      "settings.Production.json",
+      "settings.json",
       "web.config",
       "project.json",
       "Dockerfile"

src/Services/Catalog/Catalog.API/settings.production.json

@@ -1,11 +0,0 @@
-{
-  "ConnectionString": "Server=127.0.0.1;Port=5432;Database=CatalogDB;username=postgres;password=postgres",
-  "Logging": {
-    "IncludeScopes": false,
-    "LogLevel": {
-      "Default": "Debug",
-      "System": "Information",
-      "Microsoft": "Information"
-    }
-  }
-}

src/Web/WebMVC/Controllers/CartController.cs

@@ -58,7 +58,7 @@ namespace Microsoft.eShopOnContainers.WebMVC.Controllers
                 Id = Guid.NewGuid().ToString(),
                 Quantity = 1,
                 ProductName = productDetails.Name,
-                PictureUrl = productDetails.PictureUrl,
+                PictureUrl = productDetails.PictureUri,
                 UnitPrice = productDetails.Price, 
                 ProductId = productId
             };

src/Web/WebMVC/Controllers/CatalogController.cs

@@ -24,19 +24,21 @@ namespace Microsoft.eShopOnContainers.WebMVC.Controllers
 
         public async Task<IActionResult> Index(int? BrandFilterApplied, int? TypesFilterApplied, int? page)
         {
+            var itemsPage = 10;
+            var catalog = await _catalogSvc.GetCatalogItems(page ?? 0, itemsPage, BrandFilterApplied, TypesFilterApplied);
             var vm = new IndexViewModel()
             {
-                CatalogItems = await _catalogSvc.GetCatalogItems(6 * (page ?? 0), 6),
-                Brands = _catalogSvc.GetBrands(),
-                Types = _catalogSvc.GetTypes(),
+                CatalogItems = catalog.Data,
+                Brands = await _catalogSvc.GetBrands(),
+                Types = await _catalogSvc.GetTypes(),
                 BrandFilterApplied = BrandFilterApplied ?? 0,
                 TypesFilterApplied = TypesFilterApplied ?? 0,
                 PaginationInfo = new PaginationInfo()
                 {
                     ActualPage = page ?? 0,
-                    ItemsPerPage = 6,
+                    ItemsPerPage = (_catalogSvc.TotalItems < itemsPage) ? _catalogSvc.TotalItems : itemsPage,
                     TotalItems = _catalogSvc.TotalItems, 
-                    TotalPages = int.Parse(Math.Round(((decimal)_catalogSvc.TotalItems / 6), MidpointRounding.AwayFromZero).ToString())
+                    TotalPages = int.Parse(Math.Ceiling(((decimal)_catalogSvc.TotalItems / itemsPage)).ToString())
                 }
             };
 

src/Web/WebMVC/Models/Catalog.cs

@@ -0,0 +1,15 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+
+namespace Microsoft.eShopOnContainers.WebMVC.Models
+{
+    public class Catalog
+    {
+        public int PageIndex { get; set; }
+        public int PageSize { get; set; }
+        public int Count { get; set; }
+        public List<CatalogItem> Data { get; set; }
+    }
+}

src/Web/WebMVC/Models/CatalogItem.cs

@@ -8,6 +8,11 @@ namespace Microsoft.eShopOnContainers.WebMVC.Models
         public string Name { get; set; }
         public string Description { get; set; }
         public decimal Price { get; set; }
-        public string PictureUrl { get; set; }
+        public string PictureUri { get; set; }
+        public int CatalogBrandId { get; set; }
+        public string CatalogBrand { get; set; }
+        public int CatalogTypeId { get; set; }
+        public string CatalogType { get; set; }
+
     }
 }

src/Web/WebMVC/Services/CatalogService.cs

@@ -7,6 +7,8 @@ using Microsoft.CodeAnalysis.Options;
 using Microsoft.Extensions.Options;
 using System.Net.Http;
 using Microsoft.AspNetCore.Mvc.Rendering;
+using Newtonsoft.Json;
+using Newtonsoft.Json.Linq;
 
 namespace Microsoft.eShopOnContainers.WebMVC.Services
 {
@@ -28,38 +30,39 @@ namespace Microsoft.eShopOnContainers.WebMVC.Services
 
         public CatalogService(IOptions<AppSettings> settings) {
             _settings = settings;
+            _remoteServiceBaseUrl = $"{_settings.Value.CatalogUrl}api/v1/catalog/";
 
             #region fake data
             _items = new List<CatalogItem>()
             {
-                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = "Roslyn Red T-Shirt", Name = "Roslyn Red T-Shirt", Price = 12, PictureUrl = "https://fakeimg.pl/370x240/EEEEEE/000/?text=RoslynRedT-Shirt"  },
-                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = "Cupt Black & White Mug", Name = "Cupt Black & White Mug", Price= 17, PictureUrl = "https://fakeimg.pl/370x240/EEEEEE/000/?text=CuptBlack&WhiteMug" },
-                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = "Prism White T-Shirt", Name = "Prism White T-Shirt", Price = 12, PictureUrl = "http://fakeimg.pl/370x240/EEEEEE/000/?text=.PrismWhiteT-Shirt" },
-                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = ".NET Bot Black Sweatshirt", Name = ".NET Bot Black Sweatshirt", Price = decimal.Parse("19.5"), PictureUrl = "http://fakeimg.pl/370x240/EEEEEE/000/?text=.NETBotBlack" },
-                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = "Roslyn Red T-Shirt", Name = "Roslyn Red T-Shirt", Price = 12, PictureUrl = "http://fakeimg.pl/370x240/EEEEEE/000/?text=RoslynRedT-Shirt"  },
-                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = "Cupt Black & White Mug", Name = "Cupt Black & White Mug", Price= 17, PictureUrl = "https://fakeimg.pl/370x240/EEEEEE/000/?text=CuptBlack&WhiteMug" },
-                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = "Prism White T-Shirt", Name = "Prism White T-Shirt", Price = 12, PictureUrl = "http://fakeimg.pl/370x240/EEEEEE/000/?text=.PrismWhiteT-Shirt" },
-                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = ".NET Bot Black Sweatshirt", Name = ".NET Bot Black Sweatshirt", Price = decimal.Parse("19.5"), PictureUrl = "http://fakeimg.pl/370x240/EEEEEE/000/?text=.NETBotBlack" },
-                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = "Roslyn Red T-Shirt", Name = "Roslyn Red T-Shirt", Price = 12, PictureUrl = "http://fakeimg.pl/370x240/EEEEEE/000/?text=RoslynRedT-Shirt"  },
-                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = "Cupt Black & White Mug", Name = "Cupt Black & White Mug", Price= 17, PictureUrl = "https://fakeimg.pl/370x240/EEEEEE/000/?text=CuptBlack&WhiteMug" },
-                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = "Prism White T-Shirt", Name = "Prism White T-Shirt", Price = 12, PictureUrl = "http://fakeimg.pl/370x240/EEEEEE/000/?text=.PrismWhiteT-Shirt" },
-                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = ".NET Bot Black Sweatshirt", Name = ".NET Bot Black Sweatshirt", Price = decimal.Parse("19.5"), PictureUrl = "http://fakeimg.pl/370x240/EEEEEE/000/?text=.NETBotBlack" },
-                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = "Roslyn Red T-Shirt", Name = "Roslyn Red T-Shirt", Price = 12, PictureUrl = "http://fakeimg.pl/370x240/EEEEEE/000/?text=RoslynRedT-Shirt"  },
-                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = "Cupt Black & White Mug", Name = "Cupt Black & White Mug", Price= 17, PictureUrl = "https://fakeimg.pl/370x240/EEEEEE/000/?text=CuptBlack&WhiteMug" },
-                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = "Prism White T-Shirt", Name = "Prism White T-Shirt", Price = 12, PictureUrl = "http://fakeimg.pl/370x240/EEEEEE/000/?text=.PrismWhiteT-Shirt" },
-                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = ".NET Bot Black Sweatshirt", Name = ".NET Bot Black Sweatshirt", Price = decimal.Parse("19.5"), PictureUrl = "http://fakeimg.pl/370x240/EEEEEE/000/?text=.NETBotBlack" },
-                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = "Roslyn Red T-Shirt", Name = "Roslyn Red T-Shirt", Price = 12, PictureUrl = "http://fakeimg.pl/370x240/EEEEEE/000/?text=RoslynRedT-Shirt"  },
-                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = "Cupt Black & White Mug", Name = "Cupt Black & White Mug", Price= 17, PictureUrl = "https://fakeimg.pl/370x240/EEEEEE/000/?text=CuptBlack&WhiteMug" },
-                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = "Prism White T-Shirt", Name = "Prism White T-Shirt", Price = 12, PictureUrl = "http://fakeimg.pl/370x240/EEEEEE/000/?text=.PrismWhiteT-Shirt" },
-                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = ".NET Bot Black Sweatshirt", Name = ".NET Bot Black Sweatshirt", Price = decimal.Parse("19.5"), PictureUrl = "http://fakeimg.pl/370x240/EEEEEE/000/?text=.NETBotBlack" },
-                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = "Roslyn Red T-Shirt", Name = "Roslyn Red T-Shirt", Price = 12, PictureUrl = "http://fakeimg.pl/370x240/EEEEEE/000/?text=RoslynRedT-Shirt"  },
-                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = "Cupt Black & White Mug", Name = "Cupt Black & White Mug", Price= 17, PictureUrl = "https://fakeimg.pl/370x240/EEEEEE/000/?text=CuptBlack&WhiteMug" },
-                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = "Prism White T-Shirt", Name = "Prism White T-Shirt", Price = 12, PictureUrl = "http://fakeimg.pl/370x240/EEEEEE/000/?text=.PrismWhiteT-Shirt" },
-                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = ".NET Bot Black Sweatshirt", Name = ".NET Bot Black Sweatshirt", Price = decimal.Parse("19.5"), PictureUrl = "http://fakeimg.pl/370x240/EEEEEE/000/?text=.NETBotBlack" },
-                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = "Roslyn Red T-Shirt", Name = "Roslyn Red T-Shirt", Price = 12, PictureUrl = "http://fakeimg.pl/370x240/EEEEEE/000/?text=RoslynRedT-Shirt"  },
-                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = "Cupt Black & White Mug", Name = "Cupt Black & White Mug", Price= 17, PictureUrl = "https://fakeimg.pl/370x240/EEEEEE/000/?text=CuptBlack&WhiteMug" },
-                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = "Prism White T-Shirt", Name = "Prism White T-Shirt", Price = 12, PictureUrl = "http://fakeimg.pl/370x240/EEEEEE/000/?text=.PrismWhiteT-Shirt" },
-                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = ".NET Bot Black Sweatshirt", Name = ".NET Bot Black Sweatshirt", Price = decimal.Parse("19.5"), PictureUrl = "http://fakeimg.pl/370x240/EEEEEE/000/?text=.NETBotBlack" }
+                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = "Roslyn Red T-Shirt", Name = "Roslyn Red T-Shirt", Price = 12, PictureUri = "https://fakeimg.pl/370x240/EEEEEE/000/?text=RoslynRedT-Shirt"  },
+                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = "Cupt Black & White Mug", Name = "Cupt Black & White Mug", Price= 17, PictureUri = "https://fakeimg.pl/370x240/EEEEEE/000/?text=CuptBlack&WhiteMug" },
+                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = "Prism White T-Shirt", Name = "Prism White T-Shirt", Price = 12, PictureUri = "http://fakeimg.pl/370x240/EEEEEE/000/?text=.PrismWhiteT-Shirt" },
+                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = ".NET Bot Black Sweatshirt", Name = ".NET Bot Black Sweatshirt", Price = decimal.Parse("19.5"), PictureUri = "http://fakeimg.pl/370x240/EEEEEE/000/?text=.NETBotBlack" },
+                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = "Roslyn Red T-Shirt", Name = "Roslyn Red T-Shirt", Price = 12, PictureUri = "http://fakeimg.pl/370x240/EEEEEE/000/?text=RoslynRedT-Shirt"  },
+                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = "Cupt Black & White Mug", Name = "Cupt Black & White Mug", Price= 17, PictureUri = "https://fakeimg.pl/370x240/EEEEEE/000/?text=CuptBlack&WhiteMug" },
+                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = "Prism White T-Shirt", Name = "Prism White T-Shirt", Price = 12, PictureUri = "http://fakeimg.pl/370x240/EEEEEE/000/?text=.PrismWhiteT-Shirt" },
+                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = ".NET Bot Black Sweatshirt", Name = ".NET Bot Black Sweatshirt", Price = decimal.Parse("19.5"), PictureUri = "http://fakeimg.pl/370x240/EEEEEE/000/?text=.NETBotBlack" },
+                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = "Roslyn Red T-Shirt", Name = "Roslyn Red T-Shirt", Price = 12, PictureUri = "http://fakeimg.pl/370x240/EEEEEE/000/?text=RoslynRedT-Shirt"  },
+                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = "Cupt Black & White Mug", Name = "Cupt Black & White Mug", Price= 17, PictureUri = "https://fakeimg.pl/370x240/EEEEEE/000/?text=CuptBlack&WhiteMug" },
+                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = "Prism White T-Shirt", Name = "Prism White T-Shirt", Price = 12, PictureUri = "http://fakeimg.pl/370x240/EEEEEE/000/?text=.PrismWhiteT-Shirt" },
+                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = ".NET Bot Black Sweatshirt", Name = ".NET Bot Black Sweatshirt", Price = decimal.Parse("19.5"), PictureUri = "http://fakeimg.pl/370x240/EEEEEE/000/?text=.NETBotBlack" },
+                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = "Roslyn Red T-Shirt", Name = "Roslyn Red T-Shirt", Price = 12, PictureUri = "http://fakeimg.pl/370x240/EEEEEE/000/?text=RoslynRedT-Shirt"  },
+                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = "Cupt Black & White Mug", Name = "Cupt Black & White Mug", Price= 17, PictureUri = "https://fakeimg.pl/370x240/EEEEEE/000/?text=CuptBlack&WhiteMug" },
+                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = "Prism White T-Shirt", Name = "Prism White T-Shirt", Price = 12, PictureUri = "http://fakeimg.pl/370x240/EEEEEE/000/?text=.PrismWhiteT-Shirt" },
+                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = ".NET Bot Black Sweatshirt", Name = ".NET Bot Black Sweatshirt", Price = decimal.Parse("19.5"), PictureUri = "http://fakeimg.pl/370x240/EEEEEE/000/?text=.NETBotBlack" },
+                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = "Roslyn Red T-Shirt", Name = "Roslyn Red T-Shirt", Price = 12, PictureUri = "http://fakeimg.pl/370x240/EEEEEE/000/?text=RoslynRedT-Shirt"  },
+                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = "Cupt Black & White Mug", Name = "Cupt Black & White Mug", Price= 17, PictureUri = "https://fakeimg.pl/370x240/EEEEEE/000/?text=CuptBlack&WhiteMug" },
+                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = "Prism White T-Shirt", Name = "Prism White T-Shirt", Price = 12, PictureUri = "http://fakeimg.pl/370x240/EEEEEE/000/?text=.PrismWhiteT-Shirt" },
+                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = ".NET Bot Black Sweatshirt", Name = ".NET Bot Black Sweatshirt", Price = decimal.Parse("19.5"), PictureUri = "http://fakeimg.pl/370x240/EEEEEE/000/?text=.NETBotBlack" },
+                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = "Roslyn Red T-Shirt", Name = "Roslyn Red T-Shirt", Price = 12, PictureUri = "http://fakeimg.pl/370x240/EEEEEE/000/?text=RoslynRedT-Shirt"  },
+                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = "Cupt Black & White Mug", Name = "Cupt Black & White Mug", Price= 17, PictureUri = "https://fakeimg.pl/370x240/EEEEEE/000/?text=CuptBlack&WhiteMug" },
+                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = "Prism White T-Shirt", Name = "Prism White T-Shirt", Price = 12, PictureUri = "http://fakeimg.pl/370x240/EEEEEE/000/?text=.PrismWhiteT-Shirt" },
+                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = ".NET Bot Black Sweatshirt", Name = ".NET Bot Black Sweatshirt", Price = decimal.Parse("19.5"), PictureUri = "http://fakeimg.pl/370x240/EEEEEE/000/?text=.NETBotBlack" },
+                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = "Roslyn Red T-Shirt", Name = "Roslyn Red T-Shirt", Price = 12, PictureUri = "http://fakeimg.pl/370x240/EEEEEE/000/?text=RoslynRedT-Shirt"  },
+                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = "Cupt Black & White Mug", Name = "Cupt Black & White Mug", Price= 17, PictureUri = "https://fakeimg.pl/370x240/EEEEEE/000/?text=CuptBlack&WhiteMug" },
+                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = "Prism White T-Shirt", Name = "Prism White T-Shirt", Price = 12, PictureUri = "http://fakeimg.pl/370x240/EEEEEE/000/?text=.PrismWhiteT-Shirt" },
+                new CatalogItem() { Id = Guid.NewGuid().ToString(), Description = ".NET Bot Black Sweatshirt", Name = ".NET Bot Black Sweatshirt", Price = decimal.Parse("19.5"), PictureUri = "http://fakeimg.pl/370x240/EEEEEE/000/?text=.NETBotBlack" }
             };
             #endregion
         }
@@ -69,35 +72,59 @@ namespace Microsoft.eShopOnContainers.WebMVC.Services
             return _items.Where(x => x.Id.Equals(Id)).FirstOrDefault();
         }
 
-        public Task<List<CatalogItem>> GetCatalogItems(int? skip,int? take)
+        public async Task<Catalog> GetCatalogItems(int page,int take, int? brand, int? type)
         {
+            _apiClient = new HttpClient();
+            var itemsQs = $"items?pageIndex={page}&pageSize={take}";
+            var filterQs = "";
+
+            if (brand.HasValue || type.HasValue)
+                filterQs = $"/type/{type ?? null}/brand/{brand ?? null}";
+
+            var catalogUrl = $"{_remoteServiceBaseUrl}items{filterQs}?pageIndex={page}&pageSize={take}";
+            var dataString = await _apiClient.GetStringAsync(catalogUrl);
+            var response = JsonConvert.DeserializeObject<Catalog>(dataString);
+
             var res = _items;
+            _totalItems = response.Count;
 
-            _totalItems = _items.Count();
-
-            if (skip.HasValue)
-                return Task.Run(() => { return _items.Skip(skip.Value).Take(take.Value).ToList(); });
-            else
-                return Task.Run(() => { return _items; });
+            return response;
         }
 
-        public IEnumerable<SelectListItem> GetBrands()
+        public async Task<IEnumerable<SelectListItem>> GetBrands()
         {
+            _apiClient = new HttpClient();
+            var url = $"{_remoteServiceBaseUrl}catalogBrands";
+            var dataString = await _apiClient.GetStringAsync(url);
+
             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" });
+
+            JArray brands = JArray.Parse(dataString);
+            foreach (JObject brand in brands.Children<JObject>())
+            {
+                dynamic item = brand;
+                items.Add(new SelectListItem() { Value = item.id, Text = item.brand });
+            }
 
             return items;
         }
 
-        public IEnumerable<SelectListItem> GetTypes()
+        public async Task<IEnumerable<SelectListItem>> GetTypes()
         {
+            _apiClient = new HttpClient();
+            var url = $"{_remoteServiceBaseUrl}catalogTypes";
+            var dataString = await _apiClient.GetStringAsync(url);
+
             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" });
-            
+
+            JArray brands = JArray.Parse(dataString);
+            foreach (JObject brand in brands.Children<JObject>())
+            {
+                dynamic item = brand;
+                items.Add(new SelectListItem() { Value = item.id, Text = item.type });
+            }
 
             return items;
         }

src/Web/WebMVC/Services/ICatalogService.cs

@@ -11,9 +11,9 @@ namespace Microsoft.eShopOnContainers.WebMVC.Services
     {
         int TotalItems { get; }
 
-        Task<List<CatalogItem>> GetCatalogItems(int? skip, int? take);
+        Task<Catalog> GetCatalogItems(int page, int take, int? brand, int? type);
         CatalogItem GetCatalogItem(string Id);
-        IEnumerable<SelectListItem> GetBrands();
-        IEnumerable<SelectListItem> GetTypes();
+        Task<IEnumerable<SelectListItem>> GetBrands();
+        Task<IEnumerable<SelectListItem>> GetTypes();
     }
 }

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

@@ -63,7 +63,7 @@
             <div class="col-sm-4 home-catalog-item">
                 <form asp-controller="Cart" asp-action="AddToCart" asp-route-productId="@catalogItem.Id">
                     <div class="home-catalog-item-image">
-                        <img src="@catalogItem.PictureUrl" />
+                        <img src="@catalogItem.PictureUri" />
                         <input type="submit" value="[ ADD TO CART ]" class="btn-brand home-catalog-item-image-addCart" />
                     </div>
                     <div class="home-catalog-item-title">

src/Web/WebMVC/appsettings.json

@@ -3,7 +3,7 @@
     //"DefaultConnection": "Server=(localdb)\\mssqllocaldb;Database=aspnet-Microsoft.eShopOnContainers.WebMVC-946ae052-8305-4a99-965b-ec8636ddbae3;Trusted_Connection=True;MultipleActiveResultSets=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/",
+  "CatalogUrl": "http://localhost:5000/",
   "OrderingUrl": "http://localhost:2446/",
   "Logging": {
     "IncludeScopes": false,

src/Web/WebMVC/docker-compose.yml

@@ -10,14 +10,14 @@ services:
       - CatalogUrl=http://catalog.api
       - OrderingUrl=http://ordering.api
     ports:
-      - "80:80"
+      - "800:80"
     depends_on:
       - catalog.api
 
   catalog.api:
     image: eshop/catalog.api
     environment:
-      - ConnectionString=Server=catalogdata;Port=5432;Database=postgres;username=postgres
+      - ConnectionString=Server=catalogdata;Port=5432;Database=CatalogDB;username=postgres;password=postgres
     expose:
       - "80"
     depends_on:
@@ -44,4 +44,4 @@ services:
   ordering.data:
     image: eshop/ordering.data.sqlserver.linux
     ports:
-      - "1433:1433"
+      - "5432:1433"

src/Web/WebMVC/project.json

@@ -42,7 +42,8 @@
     "Microsoft.VisualStudio.Web.CodeGenerators.Mvc": {
       "version": "1.0.0-preview2-final",
       "type": "build"
-    }
+    },
+    "Newtonsoft.Json": "9.0.1"
   },
   "tools": {
     "BundlerMinifier.Core": "2.0.238",