iT邦幫忙

2024 iThome 鐵人賽

DAY 25
0
Modern Web

從零開始教你做AspNet7.0購物網站系列 第 25

Day-25 實做新增商品和查看商品

  • 分享至 

  • xImage
  •  

這邊就是把前面說過的,整合到一起,做出前台的商品列表,和後台能新增商品
商品列表就是把資料庫中的數據查出來,然後放到前端,這部分就不特別寫了

先新增一個商品的Model
Product.cs

using System;
using TextContext;
using Microsoft.EntityFrameworkCore;
namespace Models
{
    public partial class Product
    {
        public int Id { get; set; }

        public string? name { get; set; }

        public int price { get; set; }

        public string? imager { get; set; }

        public string? remarks { get; set; }

        public int number { get; set; }

    }
}

在資料庫上下文中註冊
Context.cs

public virtual DbSet<Product> Product { get; set; }

新增商品的前端表單
AddProduct.cshtml

<form action="/Admin/PostProduct" method="post" enctype="multipart/form-data">

    <div class="row mb-3">
        <label for="colFormLabel" class="col-sm-2 col-form-label">商品名稱:</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="name" name="name" placeholder="請輸入名稱">
        </div>
    </div>
    <div class="row mb-3">
        <label for="colFormLabel" class="col-sm-2 col-form-label">商品價格:</label>
        <div class="col-sm-10">
            <input type="number" class="form-control" id="price" name="price" placeholder="請輸入價格">
        </div>
    </div>
    <div class="row mb-3">
        <label for="colFormLabel" class="col-sm-2 col-form-label">商品說明:</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="remarks" name="remarks" placeholder="請輸入說明">
        </div>
    </div>
    <div class="row mb-3">
        <label for="colFormLabel" class="col-sm-2 col-form-label">分類名稱:</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="product_class" name="product_class" placeholder="請輸入分類">
        </div>
    </div>
    <div class="row mb-3">
        <label for="colFormLabel" class="col-sm-2 col-form-label">圖片:</label>
        <div class="col-sm-10">
            <input type="file" class="form-control custom-file-input" id="imager" name="imager" accept="image/*">
        </div>
    </div>

輸入表單後要執行的邏輯
AdminController.cs

[HttpPost]
public async Task<IActionResult> PostProduct(IFormCollection form)
{

    string cookieValue = Request.Cookies["AdminVerify"];
    string name = form["name"];
    string remarks = form["remarks"];
    int price = int.Parse(form["price"]);
    string product_class_name = form["product_class"];
    string image = "data:image/jpeg;base64,";

    int product_class_id = 1;
    var product_class = _db.ProductClass.FirstOrDefault(u => u.class_name == product_class_name);
    if (product_class == null)
    {
        var ProductClass = new ProductClass
        {
            class_name = product_class_name,
        };

        _db.ProductClass.Add(ProductClass);
        _db.SaveChanges();
        product_class_id = ProductClass.Id;
    }
    else
    {
        product_class_id = product_class.Id;
    }
    // 從表單中獲取圖片文件
    var imageFile = form.Files["imager"];

    if (imageFile != null && imageFile.Length > 0)
    {
        // 將圖片文件轉換為 base64 字符串
        using (var memoryStream = new MemoryStream())
        {
            await imageFile.CopyToAsync(memoryStream);
            var imageDataBytes = memoryStream.ToArray();
            image += Convert.ToBase64String(imageDataBytes);
        }
    }
    var product = new Product
    {
        name = name,
        price = price,
        imager = image,
        remarks = remarks,
        product_class_id = product_class_id,
        manufacturer_id = int.Parse(Request.Cookies["AdminVerify"])

    };

    _db.Product.Add(product);
    _db.SaveChanges();

    return RedirectToAction("succ", "Admin");
}

1.標記和方法聲明:

[HttpPost]
public async Task<IActionResult> PostProduct(IFormCollection form)

[HttpPost] 表示這是一個 POST 方法。
PostProduct 方法接受一個 IFormCollection 類型的 form 作為參數,該參數包含表單提交的所有數據。
該方法是異步的(使用 async 關鍵字)並返回 IActionResult。

2.從 Cookies 獲取管理員驗證信息:

string cookieValue = Request.Cookies["AdminVerify"];

獲取名為 AdminVerify 的 cookie 值。

3.從表單中提取數據:

string name = form["name"];
string remarks = form["remarks"];
int price = int.Parse(form["price"]);
string product_class_name = form["product_class"];
string image = "data:image/jpeg;base64,";

提取產品名稱、備註、價格、產品分類名稱以及初始化圖片字符串。

4.處理產品分類:

int product_class_id = 1;
var product_class = _db.ProductClass.FirstOrDefault(u => u.class_name == product_class_name);
if (product_class == null)
{
    var ProductClass = new ProductClass
    {
        class_name = product_class_name,
    };

    _db.ProductClass.Add(ProductClass);
    _db.SaveChanges();
    product_class_id = ProductClass.Id;
}
else
{
    product_class_id = product_class.Id;
}

根據產品分類名稱查找對應的分類,如果找不到則創建新分類並保存到資料庫,否則直接使用已有分類的 ID。

5.處理圖片文件:

var imageFile = form.Files["imager"];

if (imageFile != null && imageFile.Length > 0)
{
    using (var memoryStream = new MemoryStream())
    {
        await imageFile.CopyToAsync(memoryStream);
        var imageDataBytes = memoryStream.ToArray();
        image += Convert.ToBase64String(imageDataBytes);
    }
}

從表單中提取名為 imager 的圖片文件,並將其轉換為 base64 編碼的字符串以便存儲。

6.創建並保存產品實體:

var product = new Product
{
    name = name,
    price = price,
    imager = image,
    remarks = remarks,
    product_class_id = product_class_id,
    manufacturer_id = int.Parse(Request.Cookies["AdminVerify"])
};

_db.Product.Add(product);
_db.SaveChanges();

創建 Product 實體,設置屬性並保存到資料庫。

6.重定向到成功頁面:

return RedirectToAction("succ", "Admin");

操作完成後,重定向到名為 succ 的操作方法,屬於 Admin 控制器。


上一篇
Day-24 實作上傳圖片和Base64
下一篇
Day-26 綠界全方位金流串接(1)介紹
系列文
從零開始教你做AspNet7.0購物網站30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言