Online Restaurant Website Part 29 Product Details

    Online Restaurant Website Part 29 Product Details

Hi, Dear's here we learn how to implement "Pizza Restaurant Drink" Website in Visual Studio using C# ASP.NET MVC. Ilyasoft software company provide full project step by step training on our YouTube Channel ilyasoft software company so now subscribe, share and like for more project base tutorials



In this video we are going to implement Product Detail for more details click here: watch vedio

First we are going to create  ItemReviewMV  data model to show product reviews and then code add below:

ItemReviewMV  Model: 

public class ItemReviewMV
    {

        public int Review_Days { get; set; }
        public string ReviewBy_User { get; set; }
        public string UserPhotoPath { get; set; }
        public int Rating { get; set; }
        public string ReviewDetails { get; set; }
    }

Next we are going to create  ItemDetailMV data model to show product details 
code add below:

ItemDetailMV Model: 

 public class ItemDetailMV
    {
        public ItemDetailMV()
        {
            Ingredients = new List<StockItemIngredientMV>();
            Reviews = new List<ItemReviewMV>();
            Related_Items = new List<ItemMV>();
        }

        public ItemMV Item { get; set; }
        public List<StockItemIngredientMV> Ingredients { get; set; }
        public List<ItemReviewMV> Reviews { get; set; }
        public List<ItemMV> Related_Items { get; set; }
    }

Next Create ProductDetail Action in home controller 

ProductDetail Action Code : 

public ActionResult ProductDetail(int itemid)
        {
            var item_detail = new ItemDetailMV();

            // Getting Item Details
            var item = db.StockItemTables.Find(itemid);
            var visiblestatus = db.VisibleStatusTables.Find(item.VisibleStatusID).VisibleStatus;
            var createdby = db.UserTables.Find(item.CreatedBy_UserID).UserName;
            var replace = item.ItemPhotoPath.Split('/');
            string x_large_photopath = string.Empty;
            for (int i = 0; i < replace.Count(); i++)
            {
                if (replace[i].Contains(".jpg"))
                {
                    x_large_photopath = x_large_photopath + "x_" + replace[i];
                }
                else
                {
                    x_large_photopath = x_large_photopath + replace[i] + "/";
                }
            }

            item_detail.Item = new ItemMV()
            {
                StockItemID = item.StockItemID,
                StockItemCategory = item.StockItemCategoryTable.StockItemCategory,
                ItemPhotoPath = x_large_photopath,
                StockItemTitle = item.StockItemTitle,
                ItemSize = item.ItemSize,
                UnitPrice = item.UnitPrice,
                RegisterDate = item.RegisterDate,
                VisibleStatus = visiblestatus,
                CreatedBy = createdby,
                OrderType = item.OrderTypeTable.OrderType,

            };

            var reviews = db.OrderItemDetailTables.Where(i => i.StockItemID == itemid).ToList();
            int total_reviews = 0;
            int total_rating = 0;
            for (int i = 0; i < reviews.Count(); i++)
            {
                var getrating = db.OrderReviewTables.Where(r => r.OrderID == reviews[i].OrderID).FirstOrDefault();
                if (getrating != null)
                {
                    total_reviews = total_reviews + 1;
                    total_rating = total_rating + getrating.Rating;

                    var review_user = db.UserTables.Find(getrating.ReviewBy_UserID).UserName;
                    var userdetail = db.UserTables.Find(getrating.ReviewBy_UserID).UserDetailTable;
                    var user_photo_path = userdetail != null ? userdetail.PhotoPath : "~/Content/ProfilePhoto/user_default.png";
                    var review_days = (DateTime.Now - db.OrderTables.Find(getrating.OrderID).OrderDateTime).TotalDays;
                    item_detail.Reviews.Add(new ItemReviewMV()
                    {
                        Review_Days = (int)review_days,
                        Rating = getrating.Rating,
                        ReviewBy_User = review_user,
                        UserPhotoPath = user_photo_path,
                        ReviewDetails = getrating.ReviewDetails
                    });
                }
            }
            int total_reviews_score = total_reviews * 5;
            int item_rating = total_reviews_score > 0 ? (total_rating / total_reviews_score) * 5 : 0;
            item_detail.Item.Rating = item_rating;

            // getting ingredients 
            foreach (var ingredient in db.StockItemIngredientTables.Where(i => i.StockItemID == itemid).ToList())
            {
                var ingredient_createdby = db.UserTables.Find(ingredient.CreatedBy_UserID).UserName;
                item_detail.Ingredients.Add(
                    new StockItemIngredientMV()
                    {
                        StockItem = item.StockItemTitle,
                        StockItemIngredientID = ingredient.StockItemIngredientID,
                        StockItemIngredientTitle = ingredient.StockItemIngredientTitle,
                        StockItemIngredientPhotoPath = ingredient.StockItemIngredientPhotoPath,
                        StockItemID = ingredient.StockItemID,
                        CreatedBy = ingredient_createdby
                    });
            }

            // getting related items
            foreach (var related_item in db.StockItemTables.Where(c => c.StockItemCategoryID == item.StockItemCategoryID).ToList())
            {
                var related_visiblestatus = db.VisibleStatusTables.Find(related_item.VisibleStatusID).VisibleStatus;
                var related_createdby = db.UserTables.Find(related_item.CreatedBy_UserID).UserName;
                item_detail.Related_Items.Add(new ItemMV()
                {
                    StockItemID = related_item.StockItemID,
                    StockItemCategory = related_item.StockItemCategoryTable.StockItemCategory,
                    ItemPhotoPath = related_item.ItemPhotoPath,
                    StockItemTitle = related_item.StockItemTitle,
                    ItemSize = related_item.ItemSize,
                    UnitPrice = related_item.UnitPrice,
                    RegisterDate = related_item.RegisterDate,
                    VisibleStatus = related_visiblestatus,
                    CreatedBy = related_createdby,
                    OrderType = related_item.OrderTypeTable.OrderType,

                });
            }

            return View(item_detail);
        }

Next Create ProductDetail View for Product Detail Action in home controller 

ProductDetail View Code : 

  @model PizzaRestaurantDrink.Models.ItemDetailMV
@{
    ViewBag.Title = "Product Details";
}

<!-- Breadcrumb Start -->
<div class="bread-crumb">
    <div class="container">
        <div class="matter">
            <h2>Product Details</h2>
            <ul class="list-inline">
                <li class="list-inline-item"><a href="@Url.Content("~/Home/Index")">HOME</a></li>
                <li class="list-inline-item"><a href="@Url.Content("~/Home/ProductDetail?itemid="+Model.Item.StockItemID)">Product Details</a></li>
            </ul>
        </div>
    </div>
</div>
<!-- Breadcrumb End -->
<!-- Product Detail Start -->
<div class="shop">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="row shopdetail">
                    <div class="col-sm-5 col-12">
                        <div class="image">
                            <img src="@Url.Content(Model.Item.ItemPhotoPath)" title="@Model.Item.StockItemTitle" alt="@Model.Item.StockItemTitle" class="img-fluid" />
                        </div>
                    </div>
                    <div class="col-sm-7 col-12">
                        <h2>@Model.Item.StockItemTitle</h2>
                        @if (Model.Item.Rating > 0)
                        {
                            <div class="rating">
                                <i class="icofont icofont-star"></i>
                                <i class="icofont icofont-star"></i>
                                <i class="icofont icofont-star"></i>
                                <i class="icofont icofont-star"></i>
                                <i class="icofont icofont-star"></i>
                            </div>
                        }
                        <div class="price">@Model.Item.UnitPrice PKR</div>
                        <p class="des">Size : @Model.Item.ItemSize / Category : @Model.Item.StockItemCategory</p>
                        <div class="food">
                            <h3>Food For</h3>
                            @if (Model.Item.OrderType == "Delivery")
                            {
                                <ul class="list-inline">
                                    <li class="list-inline-item">
                                        <label class="check">
                                            <input type="radio" name="payment" class="checkclass" />
                                            Delivery
                                        </label>
                                    </li>
                                    <li class="list-inline-item">
                                        <label class="check">
                                            <input type="radio" name="payment" class="checkclass" checked="checked" />
                                            Pickup
                                        </label>
                                    </li>
                                </ul>
                            }
                            else
                            {
                                <ul class="list-inline">
                                    <li class="list-inline-item">
                                        <label class="check">
                                            <input type="radio" name="payment" class="checkclass" checked="checked" />
                                            Pickup
                                        </label>
                                    </li>
                                </ul>
                            }
                        </div>
                        <div class="common">
                            <p class="qtypara float-left">
                                <span id="minus1" class="minus"><i class="icofont icofont-minus"></i></span>
                                <input type="text" name="quantity" value="1" size="2" id="input-quantity1" class="form-control qty">
                                <span id="add1" class="add"><i class="icofont icofont-plus"></i></span>
                                <input type="hidden" name="product_id" value="1">
                            </p>
                            <div class="buttons">
                                <a href="#" class="btn btn-theme-alt btn-md">Order Now</a>
                                <a href="#" class="btn btn-theme-alt btn-md">Add to cart</a>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-12 col-12">
                        <ul class="nav nav-tabs">
                            <li class="nav-item"><a class="nav-link active" href="#tab-review" data-toggle="tab">Reviews (@Model.Reviews.Count())</a></li>
                            <li class="nav-item"><a class="nav-link" href="#tab-add" data-toggle="tab">add Review</a></li>
                        </ul>
                        <div class="tab-content">

                            <div class="tab-pane active" id="tab-review">
                                @foreach (var review in Model.Reviews)
                                {
                                    <div class="box">
                                        <img src="@Url.Content(review.UserPhotoPath)" alt="@review.ReviewBy_User" title="@review.ReviewBy_User" class="img-fluid" />
                                        <div class="detail">
                                            <h2>@review.ReviewBy_User</h2>
                                            <span>@review.Review_Days days ago</span>
                                            <div class="rating">
                                                <i class="icofont icofont-star"></i>
                                                <i class="icofont icofont-star"></i>
                                                <i class="icofont icofont-star"></i>
                                                <i class="icofont icofont-star"></i>
                                                <i class="icofont icofont-star"></i>
                                            </div>
                                            <p>@review.ReviewDetails.</p>
                                        </div>
                                    </div>
                                }
                            </div>
                            <div class="tab-pane" id="tab-add">
                                <form class="form-horizontal" id="form-review">
                                   Review Form will be design and implement in coming video. 
                                </form>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <!-- Title Content Start -->
                    <div class="col-sm-12 commontop text-center">
                        <h4>Related Food</h4>
                        <div class="divider style-1 center">
                            <span class="hr-simple left"></span>
                            <i class="icofont icofont-ui-press hr-icon"></i>
                            <span class="hr-simple right"></span>
                        </div>
                        <p>The purpose of a restaurant menu is to provide customers with a variety of options to choose from and to help them decide what they want to eat and drink while dining at the restaurant.</p>
                    </div>
                    <!-- Title Content End -->
                    <!-- Single Product Start -->
                    <div class="dish owl-carousel">
                        @foreach (var item in Model.Related_Items)
                        {
                            <div class="item">
                                <!-- Box Start -->

                                <div class="box">
                                    <a href="@Url.Content("~/Home/ProductDetail?itemid=" + item.StockItemID)"><img src="@Url.Content(item.ItemPhotoPath)" alt="@item.StockItemTitle" title="@item.StockItemTitle" class="img-fluid" /></a>
                                    <div class="caption">
                                        <h4>@item.StockItemTitle</h4>
                                        <span>
                                            @{ var value = Model.Item.OrderType == "Delivery" ? "Delivery | Pickup" : "Pickup"; }
                                            Order Type : @value
                                        </span>
                                        <p>@item.UnitPrice PKR</p>
                                    </div>
                                </div>

                                <!-- Box End -->
                            </div>
                        }
                    </div>
                    <!-- Single Product End -->
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Product Detail End -->

Note : get large image for product detail by using code, so now go to File Upload method in Helper folder and add this below code.

string path = string.Empty;
                string x_large = string.Empty;
                if (file != null)
                {
                    path = Path.Combine(HttpContext.Current.Server.MapPath(folder), name);
                    file.SaveAs(path);
                    
                    x_large = Path.Combine(HttpContext.Current.Server.MapPath(folder), "x_"+name);
                    using (Image img = Image.FromFile(path))
                    {
                        Image thumbNail = new Bitmap(270, 300, img.PixelFormat);
                        Graphics g = Graphics.FromImage(thumbNail);
                        g.CompositingQuality = CompositingQuality.HighQuality;
                        g.SmoothingMode = SmoothingMode.HighQuality;
                        g.InterpolationMode = InterpolationMode.HighQualityBicubic;
                        Rectangle rect = new Rectangle(0, 0, 270, 300);
                        g.DrawImage(img, rect);
                        thumbNail.Save(x_large, ImageFormat.Png);
                    }


                    using (MemoryStream ms = new MemoryStream())
                    {
                        file.InputStream.CopyTo(ms);
                        byte[] array = ms.GetBuffer();
                    }
                }

so once all above steps is done then run the application... 

Comments