【从实作学习ASP.NET Core】Day11 | 後台 | 详细资料与 ViewModel

今天要来实作 Details 详细资料页面

ViewModel

ViewModel 是拿来对 MVC 一个 View 只能对应一个 Model 的概念 所做出的因应对策，其实就是把需要用到的 Model 跟资料再用一个更大 Model 包起来，就成了所谓的 ViewModel。就如同名字 ViewModel 只应该拿来显示资料用，不要直接拿来对资料库操作。

建立 Details 的 ViewModel

在 Model 的资料夹新增一个 DetailViewModel.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace OnlineShopCMS.Models
{
    public class DetailViewModel
    {
        public Product product { get; set; }
        public string imgsrc { get; set; }
    }
}

简单的显示也可以直接用 ViewData ViewBag 来实现就好，ViewModel 通常是前端画面需要多个模型的时候使用。今天的例子主要是想要拿来示范，实际在操作的时候不见得需要用到 ViewModel。

Details 的 Action

ProductsController.cs

public async Task<IActionResult> Details(int? id)
{
    if (id == null)
    {
        return NotFound();
    }
    
    DetailViewModel dvm = new DetailViewModel();  //建立一个 ViewModel
    
    var product = await _context.Product
                .Include(p => p.Category)
                .FirstOrDefaultAsync(m => m.Id == id);
    if (product == null)
    {
        return NotFound();
    }
    else
    {
        dvm.product = product;
        if (product.Image != null)
        {
            dvm.imgsrc = ViewImage(product.Image);
        }
    }
    return View(dvm); //回传 ViewModel
}

private string ViewImage(byte[] arrayImage) 
{
    // 二进位图档转字串
    string base64String = Convert.ToBase64String(arrayImage, 0, arrayImage.Length);
    return "data:image/png;base64," + base64String;
}

Details 的 View 页面

前端 Details.cshtml 改为 @DetailViewModel 模型来接

@model OnlineShopCMS.Models.DetailViewModel

@{
    ViewData["Title"] = "Details";
}

<h1>Details</h1>

<div>
    <h4>Product</h4>
    <hr />
    <dl class="row">
        <dt class = "col-sm-2">
            @Html.DisplayNameFor(model => model.Image)
        </dt>
        <dd class = "col-sm-10">
            <img src="@Html.DisplayFor(model => model.imgsrc)" />    //图片
        </dd>
        <dt class = "col-sm-2">
            @Html.DisplayNameFor(model => model.product.Name)
        </dt>
        <dd class = "col-sm-10">
            @Html.DisplayFor(model => model.product.Name)            //名称
        </dd>
        <dt class = "col-sm-2">
            @Html.DisplayNameFor(model => model.product.Description)
        </dt>
        <dd class = "col-sm-10">
            @Html.DisplayFor(model => model.product.Description)      //简介
        </dd>
        <dt class = "col-sm-2">
            @Html.DisplayNameFor(model => model.product.Price)
        </dt>
        <dd class = "col-sm-10">
            @Html.DisplayFor(model => model.product.Price)            //价格
        </dd>
        <dt class = "col-sm-2">
            @Html.DisplayNameFor(model => model.product.Stock)
        </dt>
        <dd class = "col-sm-10">
            @Html.DisplayFor(model => model.product.Stock)            //库存
        </dd>
        <dt class = "col-sm-2">
            @Html.DisplayNameFor(model => model.product.Content)
        </dt>
        <dd class = "col-sm-10">
            @Html.Raw(Model.product.Content)                          //内容
        </dd>
    </dl>
</div>
<div>
    <a asp-action="Edit" asp-route-id="@Model.Id">Edit</a> |
    <a asp-action="Index">Back to List</a>
</div>

最後排版一下看看成果如何