Implemented gallery

MyWebsite/MyWebsite/Controllers/GalleryController.cs

@@ -1,13 +1,28 @@
 using Microsoft.AspNetCore.Mvc;
+using MyWebsite.Models;
+using Newtonsoft.Json;
+using System.Net.Http;
+using System.Linq;
+using System.Threading.Tasks;
 
 namespace MyWebsite.Controllers
 {
     public class GalleryController : Controller
     {
-        public IActionResult Index() =>
-            View();
 
-        public IActionResult Details(string id) =>
+        public async Task<IActionResult> Index()
-            View(model: id);
+        {
+            ViewData["Images"] = JsonConvert.DeserializeObject<Image[]>(await new HttpClient().GetStringAsync($"https://{Request.Host}/Gallery.json"));
+
+            return View();
+        }
+
+        public async Task<IActionResult> Details(string id)
+        {
+            ViewData["CurrentImage"] = JsonConvert.DeserializeObject<Image[]>(await new HttpClient().GetStringAsync($"https://{Request.Host}/Gallery.json")).First(i => i.FileName == id);
+
+            return View();
+        }
+            
     }
 }

MyWebsite/MyWebsite/Models/Image.cs

@@ -0,0 +1,13 @@
+using System;
+using System.Globalization;
+
+namespace MyWebsite.Models
+{
+    public class Image
+    {
+        public string Title { get; set; }
+        public string Description { get; set; }
+        public DateTime CreationDate { get; set; }
+        public string FileName { get; set; }
+    }
+}

MyWebsite/MyWebsite/Views/Gallery/Details.cshtml

@@ -1,6 +1,6 @@
 
 @{
-    ViewData["Title"] = "Image overview";
+    ViewData["Title"] = (ViewData["CurrentImage"] as Image).Title;
 }
 
 <header>
@@ -8,11 +8,11 @@
 </header>
 
 <article class="image-overview-block">
-    <img src="~/images/Gallery/VectorAvatar.svg" onclick="ToggleImageSize();" id="image" />
+    <img src="~/images/Gallery/@((ViewData["CurrentImage"] as Image).FileName)" onclick="ToggleImageSize();" id="image" />
 
     <div>
-        <h1>Image name</h1>
+        <h1>@((ViewData["CurrentImage"] as Image).Title)</h1>
-        <p class="date">Creation date: <a>15-Aug-2019</a></p>
+        <p class="date">Creation date: <a>@((ViewData["CurrentImage"] as Image).CreationDate.ToShortDateString())</a></p>
-        <p>Description</p>
+        <p>@((ViewData["CurrentImage"] as Image).Description)</p>
     </div>
 </article>

MyWebsite/MyWebsite/Views/Gallery/Index.cshtml

@@ -7,6 +7,9 @@
     <h1>My arts</h1>
 </header>
 
-<article>
+<article class="gallery">
-
+    @foreach (Image image in ViewData["Images"] as Image[])
+    {
+        <a asp-action="Details" asp-route-id="@image.FileName"><img title="@image.Title" src="~/images/Gallery/@image.FileName"/></a>
+    }
 </article>

MyWebsite/MyWebsite/Views/Shared/_Layout.cshtml

@@ -42,7 +42,7 @@
         </main>
 
         <footer>
-            <p>Copyright ©2019 <b>Michael "XFox" Gordeev</b></p>
+            <p>Copyright &copy;2019 <b>Michael "XFox" Gordeev</b></p>
         </footer>
     </body>
 </html>

MyWebsite/MyWebsite/wwwroot/Gallery.json

@@ -0,0 +1,14 @@
+[
+  {
+    "FileName": "FirstAvatar.png",
+    "Title": "First avatar I ever made",
+    "CreationDate": "2016-07-31T00:00:00",
+    "Description": ""
+  },
+  {
+    "FileName": "VectorAvatar.svg",
+    "Title": "First avatar I made in vector",
+    "CreationDate": "2019-08-15T00:00:00",
+    "Description": ""
+  }
+]

MyWebsite/MyWebsite/wwwroot/css/Style.css

@@ -102,4 +102,19 @@ header a:hover {
 
 article a:visited {
     color: blue;
+}
+
+.gallery {
+    margin: 50px;
+}
+.gallery img {
+    transition: .25s;
+    object-fit: cover;
+    max-width: 300px;
+    height: 200px;
+    margin: 2px;
+}
+.gallery img:hover {
+    filter: brightness(125%);
+    transform: scale(1.25);
 }