【从实作学习ASP.NET Core】Day20 | 前台 | 建立前台页面

今天要完成商店的主要页面，基本上都是前端的工作，就是让网页看起来比较像样啦
但因为这方面我自己也不是专业，所以简单带过就好xD

导览列

Logo

要开商店总要有个能让人印象深刻的Logo，不过这只是拿来练习的就随便画一下吧

Font Awesome

bootstrap5 没有自带的 icon library ，我这边用的是 Font Awesome
使用方法很简单只要从官网下载档案，解压缩放到专案的 /wwwroot/css 资料夹，之後前端引入

<link rel="stylesheet" href="~/css/fontawesome-free-5.15.4-web/css/all.css" />

想要用的时候，只要在官网选择你要的图示复制 Url 贴到你要的位置就可以了，例如：购物车的图示

<i class="fas fa-shopping-cart"></i>

Navbar

那既然有了图示有了 Logo
我们就可以自由调整 /View/Shared/_Layout.cshtml 里面的 Navbar 配置，让导览列看起来像样点

店舖资讯

店铺资讯的页面就在 HomeController 新加入一个 About() 来用

嵌入 Google 地图

到 Google 地图找那要的位置 [分享 -> 嵌入地图 -> 复制 Html] ，整串贴到你的前端页面就完成罗


看一下效果如何

商品列表

商品的部分我们就修改用 Scaffold 建出来的页面，可以参照之前显示ViewModel的做法，把想要呈现的内容用 ViewModel 传给前端显示，而前端的部分可以用 Bootstrap 的 Card 呈现，让他有网路商店的感觉

public IActionResult Index(int? cId)
{
    List<DetailViewModel> dvm = new List<DetailViewModel>();
    List<Product> products = new List<Product>();
    
    //判断如果有传入类别编号，就筛选那个类别的商品出来
    if (cId != null)  
    {
        var result = _context.Category.Single(x => x.Id.Equals(cId));
        products = _context.Entry(result).Collection(x => x.Products).Query().ToList();
    }
    else
    {
        products = _context.Product.Include(p => p.Category).ToList();
    }
         
    //把取出来的资料加入ViewModel  
    foreach(var product in products) 
    {
        DetailViewModel item = new DetailViewModel
        {
            product = product,
            imgsrc = ViewImage(product.Image)
        };
        dvm.Add(item);
    }
    ViewBag.count = dvm.Count;
    
    return View(dvm);
}