product detail finished

Author: mehmetozkaya

AspnetRunBasics/Data/AspnetRunContextSeed.cs

@@ -79,7 +79,7 @@ private static IEnumerable<Product> GetPreconfiguredProducts()
                     Summary = "This phone is the company's biggest change to its flagship smartphone in years. It includes a borderless.",                    
                     Description = "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut, tenetur natus doloremque laborum quos iste ipsum rerum obcaecati impedit odit illo dolorum ab tempora nihil dicta earum fugiat. Temporibus, voluptatibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut, tenetur natus doloremque laborum quos iste ipsum rerum obcaecati impedit odit illo dolorum ab tempora nihil dicta earum fugiat. Temporibus, voluptatibus.",
                     ImageFile = "product-1.png",
-                    Price = 950.00,
+                    Price = 950.00M,
                     CategoryId = 1
                 },
                 new Product()
@@ -88,7 +88,7 @@ private static IEnumerable<Product> GetPreconfiguredProducts()
                     Summary = "This phone is the company's biggest change to its flagship smartphone in years. It includes a borderless.",
                     Description = "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut, tenetur natus doloremque laborum quos iste ipsum rerum obcaecati impedit odit illo dolorum ab tempora nihil dicta earum fugiat. Temporibus, voluptatibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut, tenetur natus doloremque laborum quos iste ipsum rerum obcaecati impedit odit illo dolorum ab tempora nihil dicta earum fugiat. Temporibus, voluptatibus.",
                     ImageFile = "product-2.png",
-                    Price = 840.00,
+                    Price = 840.00M,
                     CategoryId = 1
                 },
                 new Product()
@@ -97,7 +97,7 @@ private static IEnumerable<Product> GetPreconfiguredProducts()
                     Summary = "This phone is the company's biggest change to its flagship smartphone in years. It includes a borderless.",
                     Description = "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut, tenetur natus doloremque laborum quos iste ipsum rerum obcaecati impedit odit illo dolorum ab tempora nihil dicta earum fugiat. Temporibus, voluptatibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut, tenetur natus doloremque laborum quos iste ipsum rerum obcaecati impedit odit illo dolorum ab tempora nihil dicta earum fugiat. Temporibus, voluptatibus.",
                     ImageFile = "product-3.png",
-                    Price = 650.00,
+                    Price = 650.00M,
                     CategoryId = 2
                 },
                 new Product()
@@ -106,7 +106,7 @@ private static IEnumerable<Product> GetPreconfiguredProducts()
                     Summary = "This phone is the company's biggest change to its flagship smartphone in years. It includes a borderless.",
                     Description = "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut, tenetur natus doloremque laborum quos iste ipsum rerum obcaecati impedit odit illo dolorum ab tempora nihil dicta earum fugiat. Temporibus, voluptatibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut, tenetur natus doloremque laborum quos iste ipsum rerum obcaecati impedit odit illo dolorum ab tempora nihil dicta earum fugiat. Temporibus, voluptatibus.",
                     ImageFile = "product-4.png",
-                    Price = 470.00,
+                    Price = 470.00M,
                     CategoryId = 1
                 },
                 new Product()
@@ -115,7 +115,7 @@ private static IEnumerable<Product> GetPreconfiguredProducts()
                     Summary = "This phone is the company's biggest change to its flagship smartphone in years. It includes a borderless.",
                     Description = "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut, tenetur natus doloremque laborum quos iste ipsum rerum obcaecati impedit odit illo dolorum ab tempora nihil dicta earum fugiat. Temporibus, voluptatibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut, tenetur natus doloremque laborum quos iste ipsum rerum obcaecati impedit odit illo dolorum ab tempora nihil dicta earum fugiat. Temporibus, voluptatibus.",
                     ImageFile = "product-5.png",
-                    Price = 380.00,
+                    Price = 380.00M,
                     CategoryId = 1
                 },
                 new Product()
@@ -124,7 +124,7 @@ private static IEnumerable<Product> GetPreconfiguredProducts()
                     Summary = "This phone is the company's biggest change to its flagship smartphone in years. It includes a borderless.",
                     Description = "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut, tenetur natus doloremque laborum quos iste ipsum rerum obcaecati impedit odit illo dolorum ab tempora nihil dicta earum fugiat. Temporibus, voluptatibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut, tenetur natus doloremque laborum quos iste ipsum rerum obcaecati impedit odit illo dolorum ab tempora nihil dicta earum fugiat. Temporibus, voluptatibus.",
                     ImageFile = "product-6.png",
-                    Price = 240.00,
+                    Price = 240.00M,
                     CategoryId = 1
                 }
             };

AspnetRunBasics/Entities/Product.cs

@@ -12,7 +12,7 @@ public class Product
         public string Summary { get; set; }
         public string Description { get; set; }
         public string ImageFile { get; set; }
-        public double Price { get; set; }
+        public decimal Price { get; set; }
         public int CategoryId { get; set; }
         public Category Category { get; set; }
     }

AspnetRunBasics/Migrations/20200207114256_Initial.Designer.cs renamed to AspnetRunBasics/Migrations/20200217075909_Initial.Designer.cs

@@ -74,7 +74,7 @@ protected override void Up(MigrationBuilder migrationBuilder)
                     Summary = table.Column<string>(nullable: true),
                     Description = table.Column<string>(nullable: true),
                     ImageFile = table.Column<string>(nullable: true),
-                    Price = table.Column<double>(nullable: false),
+                    Price = table.Column<decimal>(nullable: false),
                     CategoryId = table.Column<int>(nullable: false)
                 },
                 constraints: table =>

AspnetRunBasics/Migrations/20200207114256_Initial.cs renamed to AspnetRunBasics/Migrations/20200217075909_Initial.cs

@@ -155,8 +155,8 @@ protected override void BuildModel(ModelBuilder modelBuilder)
                         .HasColumnType("nvarchar(80)")
                         .HasMaxLength(80);
 
-                    b.Property<double>("Price")
-                        .HasColumnType("float");
+                    b.Property<decimal>("Price")
+                        .HasColumnType("decimal(18,2)");
 
                     b.Property<string>("Summary")
                         .HasColumnType("nvarchar(max)");

AspnetRunBasics/Migrations/AspnetRunContextModelSnapshot.cs

@@ -1,37 +1,32 @@
-@page
+@page "/Product/{productId}"
 @model AspnetRunBasics.ProductDetailModel
 @{
     ViewData["Title"] = "ProductDetail";
 }
 
-<section class="jumbotron text-center">
-    <div class="container">
-        <h1 class="jumbotron-heading">E-COMMERCE PRODUCT</h1>
-        <p class="lead text-muted mb-0">Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500...</p>
-    </div>
-</section>
 <div class="container">
     <div class="row">
         <div class="col">
             <nav aria-label="breadcrumb">
                 <ol class="breadcrumb">
-                    <li class="breadcrumb-item"><a href="/">Home</a></li>
-                    <li class="breadcrumb-item"><a href="category.html">Category</a></li>
+                    <li class="breadcrumb-item"><a asp-page="Product">Home</a></li>
+                    <li class="breadcrumb-item"><a asp-page="Product">Category</a></li>
                     <li class="breadcrumb-item active" aria-current="page">Product</li>
                 </ol>
             </nav>
         </div>
     </div>
 </div>
+
 <div class="container">
     <div class="row">
         <!-- Image -->
         <div class="col-12 col-lg-6">
             <div class="card bg-light mb-3">
                 <div class="card-body">
                     <a href="" data-toggle="modal" data-target="#productModal">
-                        <img class="img-fluid" src="https://dummyimage.com/800x800/55595c/fff" />
-                        <p class="text-center">Zoom</p>
+                        <img class="img-fluid" src="~/images/product/@Model.Product.ImageFile.Replace('-','x')" />
+                        <p class="text-center">@Model.Product.Name</p>
                     </a>
                 </div>
             </div>
@@ -41,16 +36,16 @@
         <div class="col-12 col-lg-6 add_to_cart_block">
             <div class="card bg-light mb-3">
                 <div class="card-body">
-                    <p class="price">99.00 $</p>
-                    <p class="price_discounted">149.90 $</p>
-                    <form method="get" action="cart.html">
+                    <p class="price">@Model.Product.Price $</p>
+                    <p class="price_discounted">@(Model.Product.Price + 120) $</p>
+                    <form asp-page-handler="AddToCart" method="post" name="addToCartForm" id="add_cart_form">
                         <div class="form-group">
                             <label for="colors">Color</label>
-                            <select class="custom-select" id="colors">
-                                <option selected>Select</option>
-                                <option value="1">Blue</option>
-                                <option value="2">Red</option>
-                                <option value="3">Green</option>
+                            <select asp-for="Color" class="custom-select" id="colors">
+                                <option selected>Black</option>
+                                <option value="Blue">Blue</option>
+                                <option value="Red">Red</option>
+                                <option value="Green">Green</option>
                             </select>
                         </div>
                         <div class="form-group">
@@ -61,17 +56,18 @@
                                         <i class="fa fa-minus"></i>
                                     </button>
                                 </div>
-                                <input type="text" class="form-control" id="quantity" name="quantity" min="1" max="100" value="1">
+                                <input asp-for="Quantity" type="text" class="form-control" id="quantity" name="quantity" min="1" max="100" value="1">
                                 <div class="input-group-append">
                                     <button type="button" class="quantity-right-plus btn btn-success btn-number" data-type="plus" data-field="">
                                         <i class="fa fa-plus"></i>
                                     </button>
                                 </div>
                             </div>
                         </div>
-                        <a href="cart.html" class="btn btn-success btn-lg btn-block text-uppercase">
+                        <a href="javascript:;" onclick="parentNode.submit();" class="btn btn-success btn-lg btn-block text-uppercase">
                             <i class="fa fa-shopping-cart"></i> Add To Cart
                         </a>
+                        <input type="hidden" asp-for="@Model.Product.Id" name="productId" />
                     </form>
                     <div class="product_rassurance">
                         <ul class="list-inline">
@@ -105,55 +101,14 @@
                 <div class="card-header bg-primary text-white text-uppercase"><i class="fa fa-align-justify"></i> Description</div>
                 <div class="card-body">
                     <p class="card-text">
-                        Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.
+                        @Model.Product.Summary                        
                     </p>
                     <p class="card-text">
-                        Contrairement à une opinion répandue, le Lorem Ipsum n'est pas simplement du texte aléatoire. Il trouve ses racines dans une oeuvre de la littérature latine classique datant de 45 av. J.-C., le rendant vieux de 2000 ans. Un professeur du Hampden-Sydney College, en Virginie, s'est intéressé à un des mots latins les plus obscurs, consectetur, extrait d'un passage du Lorem Ipsum, et en étudiant tous les usages de ce mot dans la littérature classique, découvrit la source incontestable du Lorem Ipsum. Il provient en fait des sections 1.10.32 et 1.10.33 du "De Finibus Bonorum et Malorum" (Des Suprêmes Biens et des Suprêmes Maux) de Cicéron. Cet ouvrage, très populaire pendant la Renaissance, est un traité sur la théorie de l'éthique. Les premières lignes du Lorem Ipsum, "Lorem ipsum dolor sit amet...", proviennent de la section 1.10.32.
+                        @Model.Product.Description                        
                     </p>
                 </div>
             </div>
         </div>
 
-        <!-- Reviews -->
-        <div class="col-12" id="reviews">
-            <div class="card border-light mb-3">
-                <div class="card-header bg-primary text-white text-uppercase"><i class="fa fa-comment"></i> Reviews</div>
-                <div class="card-body">
-                    <div class="review">
-                        <span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>
-                        <meta itemprop="datePublished" content="01-01-2016">January 01, 2018
-
-                        <span class="fa fa-star"></span>
-                        <span class="fa fa-star"></span>
-                        <span class="fa fa-star"></span>
-                        <span class="fa fa-star"></span>
-                        <span class="fa fa-star"></span>
-                        by Paul Smith
-                        <p class="blockquote">
-                        <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
-                        </p>
-                        <hr>
-                    </div>
-                    <div class="review">
-                        <span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>
-                        <meta itemprop="datePublished" content="01-01-2016">January 01, 2018
-
-                        <span class="fa fa-star" aria-hidden="true"></span>
-                        <span class="fa fa-star" aria-hidden="true"></span>
-                        <span class="fa fa-star" aria-hidden="true"></span>
-                        <span class="fa fa-star" aria-hidden="true"></span>
-                        <span class="fa fa-star" aria-hidden="true"></span>
-                        by Paul Smith
-                        <p class="blockquote">
-                        <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
-                        </p>
-                        <hr>
-                    </div>
-                </div>
-            </div>
-        </div>
     </div>
 </div>
-
-
-

AspnetRunBasics/Pages/ProductDetail.cshtml

@@ -1,17 +1,52 @@
 using System;
-using System.Collections.Generic;
-using System.Linq;
 using System.Threading.Tasks;
+using AspnetRunBasics.Repositories;
 using Microsoft.AspNetCore.Mvc;
 using Microsoft.AspNetCore.Mvc.RazorPages;
 
 namespace AspnetRunBasics
 {
     public class ProductDetailModel : PageModel
     {
-        public void OnGet()
+        private readonly IProductRepository _productRepository;
+        private readonly ICartRepository _cartRepository;
+
+        public ProductDetailModel(IProductRepository productRepository, ICartRepository cartRepository)
+        {
+            _productRepository = productRepository ?? throw new ArgumentNullException(nameof(productRepository));
+            _cartRepository = cartRepository ?? throw new ArgumentNullException(nameof(cartRepository));
+        }
+
+        public Entities.Product Product { get; set; }
+
+        [BindProperty]
+        public string Color { get; set; }
+
+        [BindProperty]
+        public int Quantity { get; set; }
+
+        public async Task<IActionResult> OnGetAsync(int? productId)
+        {
+            if (productId == null)
+            {
+                return NotFound();
+            }
+
+            Product = await _productRepository.GetProductByIdAsync(productId.Value);
+            if (Product == null)
+            {
+                return NotFound();
+            }
+            return Page();
+        }
+
+        public async Task<IActionResult> OnPostAddToCartAsync(int productId)
         {
+            //if (!User.Identity.IsAuthenticated)
+            //    return RedirectToPage("./Account/Login", new { area = "Identity" });
 
+            await _cartRepository.AddItem("test", productId, Quantity, Color);
+            return RedirectToPage("Cart");
         }
     }
 }

AspnetRunBasics/Pages/ProductDetail.cshtml.cs

@@ -9,7 +9,7 @@
     <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" type="text/css">
     <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
     <link href="//fonts.googleapis.com/css?family=Open+Sans:400,300,600" rel="stylesheet" type="text/css">
-    <link href="css/style.css" rel="stylesheet" type="text/css">
+    <link href="~/css/style.css" rel="stylesheet" type="text/css">
 
 </head>
 <body>
@@ -130,7 +130,27 @@
     <script src="//code.jquery.com/jquery-3.2.1.slim.min.js" type="text/javascript"></script>
     <script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" type="text/javascript"></script>
     <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" type="text/javascript"></script>
-
+    <script type="text/javascript">
+        //Plus & Minus for Quantity product
+        $(document).ready(function () {
+            var quantity = 1;
+
+            $('.quantity-right-plus').click(function (e) {
+                e.preventDefault();
+                var quantity = parseInt($('#quantity').val());
+                $('#quantity').val(quantity + 1);
+            });
+
+            $('.quantity-left-minus').click(function (e) {
+                e.preventDefault();
+                var quantity = parseInt($('#quantity').val());
+                if (quantity > 1) {
+                    $('#quantity').val(quantity - 1);
+                }
+            });
+
+        });
+    </script>
 
     @RenderSection("Scripts", required: false)
 </body>