iT邦幫忙

2024 iThome 鐵人賽
DAY 20
0
自我挑戰組

asp.net可以變出那些功能系列 第 20 篇

CRUD列表:水費

16th鐵人賽
65 瀏覽

  • 分享至 

  • xImage
    •  

https://laihao2.com/Home/WaterList
https://ithelp.ithome.com.tw/upload/images/20240927/20119035718UKOT1Sp.png

ASP.NET開發操作流程:資料表設定好>再寫程式:加入資料庫>串聯資料庫>產生Models裡面類別檔dao>按:建置>Controllers裡面的Entities>產生畫面View

資料表設定好>再寫程式:加入資料庫>串聯資料庫>

USE [ProductDB]
GO

/****** Object:  Table [dbo].[WATER_BILL]    Script Date: 2024/9/26 下午 11:59:03 ******/
SET ANSI_NULLS ON
GO

SET QUOTED_IDENTIFIER ON
GO

CREATE TABLE [dbo].[WATER_BILL](
	[DOCUMENT_ID] [nvarchar](200) NOT NULL,
	[FACTORY] [nvarchar](200) NULL,
	[WATER_SIGNAL] [nvarchar](200) NULL,
	[FROM_BILLING_PERIOD] [datetime2](7) NULL,
	[UNTIL_BILLING_PERIOD] [datetime2](7) NULL,
	[TYPE] [nvarchar](200) NULL,
	[METER_NUMBER] [nvarchar](200) NULL,
	[METER_DIAMETER] [int] NOT NULL,
	[NUMBER_POINTERS] [decimal](18, 2) NULL,
	[TOTAL_WATER] [decimal](18, 2) NULL,
	[TOTAL_BILL_TAX] [decimal](18, 2) NULL,
	[CARBON_PERIOD] [decimal](18, 2) NULL,
	[CARBON_EMISSION_FACTOR] [decimal](18, 2) NULL,
	[CARBON_DIOXIDE] [decimal](18, 2) NULL,
	[data] [datetime] NULL,
	[CreatedBy] [nvarchar](max) NULL,
	[PDF_FILE] [varbinary](max) NULL,
	[ImageMimeType] [nvarchar](max) NULL,
	[PDF_CONTENT] [varbinary](max) NULL,
	[VOUCHER_NUMBER] [nvarchar](200) NULL,
 CONSTRAINT [PK_WATER_BILL] PRIMARY KEY CLUSTERED 
(
	[DOCUMENT_ID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON, OPTIMIZE_FOR_SEQUENTIAL_KEY = OFF) ON [PRIMARY]
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]
GO

解釋程式碼
這段 SQL 腳本用於在資料庫 ProductDB 中創建名為 WATER_BILL 的表。該表的結構定義了與水費單相關的數據欄位，並指定了各欄位的數據類型、約束以及索引。以下是詳細解釋：

1. 設定 ANSI_NULLS 和 QUOTED_IDENTIFIER

SET ANSI_NULLS ON
SET QUOTED_IDENTIFIER ON
  • SET ANSI_NULLS ON：指定在比較 NULL 值時，NULL = NULL 會返回 FALSE，而 NULL <> NULL 也返回 FALSE。這是 SQL 標準的行為。
  • SET QUOTED_IDENTIFIER ON：允許在 SQL 語句中使用雙引號來引用標識符（如表名和欄位名），而不是單純用雙引號表示字串。

2. 創建 WATER_BILL 表

CREATE TABLE [dbo].[WATER_BILL](
      NOT NULL,
      NULL,
      NULL,
    [FROM_BILLING_PERIOD] [datetime2](7) NULL,
    [UNTIL_BILLING_PERIOD] [datetime2](7) NULL,
      NULL,
      NULL,
    [METER_DIAMETER] [int] NOT NULL,
    [NUMBER_POINTERS] [decimal](18, 2) NULL,
    [TOTAL_WATER] [decimal](18, 2) NULL,
    [TOTAL_BILL_TAX] [decimal](18, 2) NULL,
    [CARBON_PERIOD] [decimal](18, 2) NULL,
    [CARBON_EMISSION_FACTOR] [decimal](18, 2) NULL,
    [CARBON_DIOXIDE] [decimal](18, 2) NULL,
    [data] [datetime] NULL,
    [CreatedBy] [nvarchar](max) NULL,
    [PDF_FILE] [varbinary](max) NULL,
    [ImageMimeType] [nvarchar](max) NULL,
    [PDF_CONTENT] [varbinary](max) NULL,
    [VOUCHER_NUMBER] [nvarchar](200) NULL,

各欄位解釋：

  • [DOCUMENT_ID]：水費單的文件 ID，使用 nvarchar(200) 類型，最大長度為 200 個字元，且不允許為空。這個欄位被設置為主鍵。
  • [FACTORY]：廠區名稱，nvarchar(200)，允許為空。
  • [WATER_SIGNAL]：水號，nvarchar(200)，允許為空。
  • [FROM_BILLING_PERIOD] 和 [UNTIL_BILLING_PERIOD]：計費起始與結束期間，類型為 datetime2(7)，允許為空。datetime2(7) 可以精確到 7 個小數位（納秒級）。
  • [TYPE]：用水的種類，nvarchar(200)，允許為空。
  • [METER_NUMBER]：水表號，nvarchar(200)，允許為空。
  • [METER_DIAMETER]：水表口徑，int 類型，不允許為空。
  • [NUMBER_POINTERS]、[TOTAL_WATER]、[TOTAL_BILL_TAX]、[CARBON_PERIOD]、[CARBON_EMISSION_FACTOR] 和 [CARBON_DIOXIDE]：這些都是水表讀數、總用水量、總費用（含稅）、碳排放等數值，使用 decimal(18, 2) 類型，精度為 18 位數字，小數位數為 2。
  • [data]：創建水費單的時間，使用 datetime 類型，允許為空。
  • [CreatedBy]：創建者，nvarchar(max)，沒有長度限制，允許為空。
  • [PDF_FILE] 和 [PDF_CONTENT]：存儲上傳的水費通知單的二進制數據，varbinary(max)，允許為空，沒有大小限制。
  • [ImageMimeType]：文件的 MIME 類型，nvarchar(max)，允許為空。
  • [VOUCHER_NUMBER]：傳票號碼，nvarchar(200)，允許為空。

3. 主鍵約束

CONSTRAINT [PK_WATER_BILL] PRIMARY KEY CLUSTERED (
    [DOCUMENT_ID] ASC
)
  • 設置 DOCUMENT_ID 為表的主鍵，並使用聚簇索引（PRIMARY KEY CLUSTERED），表示資料會按 DOCUMENT_ID 的升序（ASC）排列。

4. 索引與鎖定設定

WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON, OPTIMIZE_FOR_SEQUENTIAL_KEY = OFF)
  • 這些設定影響索引和資料表的行為：
    • PAD_INDEX = OFF：禁用填充索引頁的功能。
    • STATISTICS_NORECOMPUTE = OFF：允許自動重新計算統計資料。
    • IGNORE_DUP_KEY = OFF：如果插入重複鍵值，會引發錯誤。
    • ALLOW_ROW_LOCKS = ON 和 ALLOW_PAGE_LOCKS = ON：允許行和頁的鎖定。
    • OPTIMIZE_FOR_SEQUENTIAL_KEY = OFF：禁用優化連續鍵插入。

5. TEXTIMAGE_ON

TEXTIMAGE_ON [PRIMARY]
  • 此設定將 varbinary(max) 和 nvarchar(max) 等大型資料類型存儲在主檔案組中。

總結：

這段 SQL 創建了一個名為 WATER_BILL 的表，包含與水費單相關的欄位，定義了欄位的類型、大小和約束。主鍵設置在 DOCUMENT_ID 欄位上，並且允許存儲二進制文件（如 PDF 文件）和其他詳細的水費數據。

產生Models裡面類別檔dao>按:建置>

namespace WebApplication5.Models
{
    using System;
    using System.Collections.Generic;
    using System.ComponentModel.DataAnnotations;
    using System.ComponentModel.DataAnnotations.Schema;
    using System.Data.Entity.Spatial;
   
    using System.Linq;
    using System.Web;
    using System.Web.Mvc;

    [Table("WATER_BILL")]
    public partial class WATER_BILL
    {
        [Display(Name = "單據號碼")]
        [Required(ErrorMessage = "必填")]
        [Key]
        [StringLength(200)]
        public string DOCUMENT_ID { get; set; }

        [Display(Name = "廠區")]
        [StringLength(200)]
        public string FACTORY { get; set; }
        [Display(Name = "水號")]
        [StringLength(200)]
        public string WATER_SIGNAL { get; set; }

        [Display(Name = "計費期間起")]
        [Column(TypeName = "datetime2")]
        public DateTime? FROM_BILLING_PERIOD { get; set; }
        public string FormattedFROM_BILLING_PERIOD
        {
            get
            {
                return FROM_BILLING_PERIOD?.ToString("yyyy-MM-dd");
            }
        }

        [Display(Name = "計費期間迄")]
        [Column(TypeName = "datetime2")]
        public DateTime? UNTIL_BILLING_PERIOD { get; set; }
        public string FormattedUNTIL_BILLING_PERIOD
        {
            get
            {
                return UNTIL_BILLING_PERIOD?.ToString("yyyy-MM-dd");
            }
        }

        [Display(Name = "用水種別")]
        [StringLength(200)]
        public string TYPE { get; set; }

        [Display(Name = "水表表號")]
        [StringLength(200)]
        public string METER_NUMBER { get; set; }


        [Display(Name = "水表口徑")]
        public int METER_DIAMETER { get; set; }


        [Display(Name = "本期指針數")]
        public decimal? NUMBER_POINTERS { get; set; }

        public string FormattedNUMBER_POINTERS
        {
            get
            {
                return NUMBER_POINTERS?.ToString("#,##0");
                //return NUMBER_POINTERS?.ToString("0");
            }
        }

        [Display(Name = "總用度數")]
        public decimal? TOTAL_WATER { get; set; }
        public string FormattedTOTAL_WATER
        {
            get
            {
                return TOTAL_WATER?.ToString("#,##0");
                //return TOTAL_WATER?.ToString("0");
            }
        }

        [Display(Name = "總水費(含稅)")]
        public decimal? TOTAL_BILL_TAX { get; set; }

        public string FormattedTOTAL_BILL_TAX
        {
            get
            {
                return TOTAL_BILL_TAX?.ToString("C0");
                //顯示成金額格式
            }
        }

        [Display(Name = "本期碳排量")]
        public decimal? CARBON_PERIOD { get; set; }

        public string FormattedCARBON_PERIOD
        {
            get
            {
                return CARBON_PERIOD?.ToString("#,##0");
                //return CARBON_PERIOD?.ToString("0");
            }
        }

        [Display(Name = "碳排係數")]
        public decimal? CARBON_EMISSION_FACTOR { get; set; }
        [Display(Name = "二氧化碳當量")]
        public decimal? CARBON_DIOXIDE { get; set; }
        [Display(Name = "建立時間")]
        public DateTime? data { get; set; }
        [Display(Name = "建立者")]
        public string CreatedBy { get; set; }

        [Display(Name = "水費電子通知單:上傳(最大2MB)")]
        [MaxLength]
        public byte[] PDF_FILE { get; set; }

        [HiddenInput(DisplayValue = false)]
        public string ImageMimeType { get; set; }

        [Display(Name = "水費電子通知單:上傳(最大2MB)")]
        public byte[] PDF_CONTENT { get; set; }

        [Display(Name = "傳票號碼")]
        [StringLength(200)]
        public string VOUCHER_NUMBER { get; set; }
    }

}

ProductDBContext程式碼參考前面幾天~

解釋程式碼
這段程式碼定義了一個名為 WATER_BILL 的實體類，它表示一個水費單的資料結構，並且使用了 ASP.NET MVC 和 Entity Framework 來與資料庫進行互動。以下是對程式碼的詳細解釋：

1. 命名空間與引用

namespace WebApplication5.Models
{
    using System;
    using System.Collections.Generic;
    using System.ComponentModel.DataAnnotations;
    using System.ComponentModel.DataAnnotations.Schema;
    using System.Data.Entity.Spatial;
    using System.Linq;
    using System.Web;
    using System.Web.Mvc;
  • namespace WebApplication5.Models：定義了這個類所屬的命名空間。
  • 引用的命名空間包括：
    • System：提供基本的類型定義和功能，如 DateTime。
    • System.ComponentModel.DataAnnotations：提供資料驗證和顯示屬性。
    • System.ComponentModel.DataAnnotations.Schema：提供映射屬性（如表名和欄位類型）。
    • System.Web.Mvc：提供 MVC 框架相關的功能，如隱藏輸入字段。

2. 類定義與屬性

[Table("WATER_BILL")]
public partial class WATER_BILL
{
    [Display(Name = "單據號碼")]
    [Required(ErrorMessage = "必填")]
    [Key]
    [StringLength(200)]
    public string DOCUMENT_ID { get; set; }
  • public partial class WATER_BILL：定義了一個名為 WATER_BILL 的部分類，這意味著它可以分佈在多個檔案中，便於進行模組化開發。
  • [Table("WATER_BILL")]：這個類對應的資料庫表名為 WATER_BILL。
  • DOCUMENT_ID：單據號碼欄位，設定了多個屬性：
    • [Display(Name = "單據號碼")]：顯示名稱為 "單據號碼"。
    • [Required(ErrorMessage = "必填")]：表示此欄位是必填的，錯誤訊息為 "必填"。
    • [Key]：設定為主鍵。
    • [StringLength(200)]：欄位的最大長度為 200 個字元。

3. 其他欄位

[Display(Name = "廠區")]
[StringLength(200)]
public string FACTORY { get; set; }

[Display(Name = "水號")]
[StringLength(200)]
public string WATER_SIGNAL { get; set; }
  • FACTORY 和 WATER_SIGNAL 分別代表廠區和水號欄位，均設有顯示名稱和字串長度限制。

4. 計費期間與格式化

[Display(Name = "計費期間起")]
[Column(TypeName = "datetime2")]
public DateTime? FROM_BILLING_PERIOD { get; set; }

public string FormattedFROM_BILLING_PERIOD
{
    get
    {
        return FROM_BILLING_PERIOD?.ToString("yyyy-MM-dd");
    }
}
  • FROM_BILLING_PERIOD 是計費期間的開始日期，使用 DateTime? 來允許這個欄位為空。
  • [Column(TypeName = "datetime2")]：指定資料庫中的欄位類型為 datetime2。
  • FormattedFROM_BILLING_PERIOD 是計費期間起的格式化屬性，用來顯示為 yyyy-MM-dd 格式的日期。

相似的格式化方式也應用於 UNTIL_BILLING_PERIOD，代表計費期間的結束日期。

5. 用水種別與水表資訊

[Display(Name = "用水種別")]
[StringLength(200)]
public string TYPE { get; set; }

[Display(Name = "水表表號")]
[StringLength(200)]
public string METER_NUMBER { get; set; }

[Display(Name = "水表口徑")]
public int METER_DIAMETER { get; set; }
  • TYPE 代表用水的種類，如工業用水或生活用水。
  • METER_NUMBER 是水表的編號，METER_DIAMETER 代表水表口徑，數據型別為 int。

6. 指針數、總用度數與格式化

[Display(Name = "本期指針數")]
public decimal? NUMBER_POINTERS { get; set; }

public string FormattedNUMBER_POINTERS
{
    get
    {
        return NUMBER_POINTERS?.ToString("#,##0");
    }
}

[Display(Name = "總用度數")]
public decimal? TOTAL_WATER { get; set; }

public string FormattedTOTAL_WATER
{
    get
    {
        return TOTAL_WATER?.ToString("#,##0");
    }
}
  • NUMBER_POINTERS 和 TOTAL_WATER 是水表的本期指針數和總用度數，型別為 decimal?，可以為空。
  • 格式化後的欄位分別以千分位格式顯示。

7. 總水費與碳排量

[Display(Name = "總水費(含稅)")]
public decimal? TOTAL_BILL_TAX { get; set; }

public string FormattedTOTAL_BILL_TAX
{
    get
    {
        return TOTAL_BILL_TAX?.ToString("C0");
    }
}

[Display(Name = "本期碳排量")]
public decimal? CARBON_PERIOD { get; set; }

public string FormattedCARBON_PERIOD
{
    get
    {
        return CARBON_PERIOD?.ToString("#,##0");
    }
}
  • TOTAL_BILL_TAX 代表總水費，包括稅金。FormattedTOTAL_BILL_TAX 使用了金額格式 (C0) 來顯示水費。
  • CARBON_PERIOD 表示本期碳排量，同樣以千分位格式顯示。

8. 建立時間與上傳文件

[Display(Name = "建立時間")]
public DateTime? data { get; set; }

[Display(Name = "水費電子通知單:上傳(最大2MB)")]
[MaxLength]
public byte[] PDF_FILE { get; set; }

[HiddenInput(DisplayValue = false)]
public string ImageMimeType { get; set; }

[Display(Name = "水費電子通知單:上傳(最大2MB)")]
public byte[] PDF_CONTENT { get; set; }
  • data 是水費單的建立時間。
  • PDF_FILE 和 PDF_CONTENT 都是用來存儲上傳的水費電子通知單，型別為 byte[]，用於存放二進制數據。
  • ImageMimeType 隱藏在表單中，用於儲存文件的 MIME 類型。

9. 傳票號碼

[Display(Name = "傳票號碼")]
[StringLength(200)]
public string VOUCHER_NUMBER { get; set; }
  • VOUCHER_NUMBER 是水費單的傳票號碼，長度限制為 200 字元。

總結

這個類 WATER_BILL 定義了水費單的所有欄位和一些格式化屬性。每個屬性都有其對應的資料庫欄位、顯示名稱以及必要的驗證。格式化屬性使得日期、數字、金額等資料能夠以易於閱讀的形式顯示給使用者。
ProductDBContext程式碼也是同前幾天~

Controllers裡面的Entities>

public ActionResult WaterList(string factory = "")
        {
            ViewBag.Layout = "~/Views/Shared/_Layout.cshtml";
            var customers = _db.WATER_BILL.ToList();
            DateTime startDate;
            DateTime endDate;

            if (!String.IsNullOrEmpty(Request.QueryString["startDate"]))
            {
                startDate = DateTime.Parse(Request.QueryString["startDate"]);
            }
            else
            {
                startDate = DateTime.MinValue;
            }

            if (!String.IsNullOrEmpty(Request.QueryString["endDate"]))
            {
                endDate = DateTime.Parse(Request.QueryString["endDate"]);
            }
            else
            {
                endDate = DateTime.MaxValue;
            }


            var ESGs = _db.WATER_BILL
            .OrderByDescending(x => x.FROM_BILLING_PERIOD)
            .Where(x => x.FROM_BILLING_PERIOD >= startDate &&
            x.FROM_BILLING_PERIOD <= endDate)
            .ToList();
            if (!string.IsNullOrEmpty(factory))
            {
                ESGs = ESGs.Where(x => x.FACTORY == factory).ToList();
            }
            // 20240325將 PDF 檔案內容傳遞給視圖
            foreach (var item in customers)
            {
                item.ImageMimeType = "application/pdf";
            }

            return View(ESGs);

        }

解釋程式碼
這段 C# 代碼是一個 ASP.NET MVC 控制器中的 WaterList 方法，用於處理水費賬單的查詢和篩選操作。下面是對代碼的詳細解釋：

方法簽名

public ActionResult WaterList(string factory = "")
  • 該方法返回一個 ActionResult，表示它是一個控制器方法，用於生成視圖或執行其他控制器動作。
  • factory 是一個可選參數，默認值為空字符串，用於篩選特定工廠的水費賬單。

設置視圖布局

ViewBag.Layout = "~/Views/Shared/_Layout.cshtml";
  • 這里通過 ViewBag 動態對象設置視圖的布局文件，指定了視圖的布局為共享的 _Layout.cshtml 文件。

獲取所有水費賬單

var customers = _db.WATER_BILL.ToList();
  • 從數據庫中獲取所有 WATER_BILL（水費賬單）記錄，並將結果存儲在 customers 列表中。

處理查詢字符串參數 startDate 和 endDate

DateTime startDate;
DateTime endDate;

if (!String.IsNullOrEmpty(Request.QueryString["startDate"]))
{
    startDate = DateTime.Parse(Request.QueryString["startDate"]);
}
else
{
    startDate = DateTime.MinValue;
}

if (!String.IsNullOrEmpty(Request.QueryString["endDate"]))
{
    endDate = DateTime.Parse(Request.QueryString["endDate"]);
}
else
{
    endDate = DateTime.MaxValue;
}
  • 這段代碼從 URL 查詢字符串中讀取 startDate 和 endDate 參數。
  • 如果查詢字符串中有 startDate，則將其解析為 DateTime 類型；否則，將 startDate 設置為 DateTime.MinValue（最早日期）。
  • 同樣，如果查詢字符串中有 endDate，則解析為日期；否則，將 endDate 設置為 DateTime.MaxValue（最晚日期）。

按日期範圍和工廠篩選賬單

var ESGs = _db.WATER_BILL
    .OrderByDescending(x => x.FROM_BILLING_PERIOD)
    .Where(x => x.FROM_BILLING_PERIOD >= startDate && x.FROM_BILLING_PERIOD <= endDate)
    .ToList();
  • 從 WATER_BILL 表中根據賬單日期範圍（FROM_BILLING_PERIOD）查詢賬單。
  • 查詢結果按賬單日期降序排列（最近的賬單排在前面）。
  • 僅返回賬單日期在 startDate 和 endDate 範圍內的記錄。
if (!string.IsNullOrEmpty(factory))
{
    ESGs = ESGs.Where(x => x.FACTORY == factory).ToList();
}
  • 如果傳遞了 factory 參數，則進一步篩選結果，僅返回符合指定工廠（FACTORY）的記錄。

設置賬單的 PDF MIME 類型

foreach (var item in customers)
{
    item.ImageMimeType = "application/pdf";
}
  • 遍歷所有賬單（customers），並將其 ImageMimeType 屬性設置為 "application/pdf"，表明這些賬單的內容是 PDF 文件。

返回視圖

return View(ESGs);
  • 將篩選後的賬單列表 ESGs 傳遞給視圖進行顯示。

總結

該方法實現了對水費賬單的篩選功能，允許用戶通過 URL 中的 startDate、endDate 和 factory 參數來篩選賬單數據。最終篩選的賬單列表會傳遞到視圖中進行展示，且每個賬單被標記為 PDF 類型。

產生畫面View程式碼

@model IEnumerable<WebApplication5.Models.WATER_BILL>
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@{
    ViewBag.Title = "WaterList";
}


<h2>作品-水費</h2>
<h3>依照水費內容</h3>

<style>
    .align-right {
        text-align: right;
    }
</style>
<div style="margin-top: 50px;">
    <h2>水費:列表</h2>
    <p>
        @Html.ActionLink("水費:新增", "WaterCreate", null, new { @class = "btn btn-danger" })
        @*@Html.ActionLink("水費:新增", "WaterCreate")*@
    </p>
    <form method="get" action="@Url.Action("WaterList", "Home")">


        <label for="startDate">開始日期：</label>
        <input type="date" name="startDate">

        <label for="endDate">結束日期：</label>
        <input type="date" name="endDate">

        <button type="submit">搜索</button>
    </form>
</div>
@using (Html.BeginForm())
{
    <label>廠區:</label>

    @Html.DropDownList("factory", new List<SelectListItem>
{
  @*new SelectListItem { Value = "樹谷一期", Text = "樹谷一期/水號:63-43233502-2" },*@
  new SelectListItem { Value = "永康廠", Text = "永康廠/水號:12-34567890-1" },
  new SelectListItem { Value = "永科廠", Text = "永科廠/水號:23-45678901-2" }

})

    <input type="submit" value="搜索" />
}

<table class="table" style="margin-top: 20px;">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.DOCUMENT_ID)
            </th>

            @*<th>
                    @Html.DisplayNameFor(model => model.FACTORY)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.WATER_SIGNAL)
                </th>*@
            <th>
                @Html.DisplayNameFor(model => model.FROM_BILLING_PERIOD)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.UNTIL_BILLING_PERIOD)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.TYPE)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.METER_NUMBER)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.METER_DIAMETER)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.NUMBER_POINTERS)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.TOTAL_WATER)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.TOTAL_BILL_TAX)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.CARBON_PERIOD)
            </th>
            <!-- **** 20240327加入輸入傳票號碼**** -->
            <th>
                @Html.DisplayNameFor(model => model.VOUCHER_NUMBER)
            </th>
            <th>
                水費電子通知單:上傳(最大2MB)
            </th>


            <th></th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.DOCUMENT_ID)
                </td>

                <td>

                    @*@Html.DisplayFor(modelItem => item.FROM_BILLING_PERIOD)*@
                    @Html.DisplayFor(modelItem => item.FormattedFROM_BILLING_PERIOD)
                </td>
                <td>
                    @*@Html.DisplayFor(modelItem => item.UNTIL_BILLING_PERIOD)*@
                    @Html.DisplayFor(modelItem => item.FormattedUNTIL_BILLING_PERIOD)

                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.TYPE)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.METER_NUMBER)
                </td>
                <td class="align-right">
                    @Html.DisplayFor(modelItem => item.METER_DIAMETER)
                </td>
                <td class="align-right">
                    @*@Html.DisplayFor(modelItem => item.NUMBER_POINTERS)*@
                    @Html.DisplayFor(modelItem => item.FormattedNUMBER_POINTERS)
                </td>
                <td class="align-right">
                    @*@Html.DisplayFor(modelItem => item.TOTAL_WATER)*@
                    @Html.DisplayFor(modelItem => item.FormattedTOTAL_WATER)
                </td>
                <td class="align-right">
                    @*@Html.DisplayFor(modelItem => item.TOTAL_BILL_TAX)*@
                    @Html.DisplayFor(modelItem => item.FormattedTOTAL_BILL_TAX)
                </td>
                <td class="align-right">
                    @*@Html.DisplayFor(modelItem => item.CARBON_PERIOD)*@
                    @Html.DisplayFor(modelItem => item.FormattedCARBON_PERIOD)
                </td>

                <!-- **** 20240327加入輸入傳票號碼**** -->

                <td class="align-right">
                    @Html.DisplayFor(modelItem => item.VOUCHER_NUMBER)
                </td>


                <td>
                    @if (item.PDF_CONTENT != null && item.PDF_CONTENT.Length > 0)
                    {
                        <a href="@Url.Action("GetPdfFile", "Home", new { id = item.DOCUMENT_ID })" target="_blank">檢視 PDF 檔案</a>
                    }
                    else
                    {
                        <span>沒有上傳 PDF 檔案</span>
                    }
                </td>

                <td>
                    @Html.ActionLink("修改", "WaterEdit", new { id = item.DOCUMENT_ID })
                    @*@Html.ActionLink("Details", "Details", new { id = item.DOCUMENT_ID }) | *@
                    @*@Html.ActionLink("Delete", "Delete", new { id = item.DOCUMENT_ID }) *@
                </td>
            </tr>
        }
    </tbody>
</table>
    </body>
    </html>

解釋程式碼

這段程式碼是一個 ASP.NET MVC 視圖，用於顯示一個水費記錄的列表。以下是對這段程式碼的詳細解釋：

1. Model & Layout

@model IEnumerable<WebApplication5.Models.WATER_BILL>
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
  • @model 定義了這個視圖的模型類型，它是 IEnumerable<WATER_BILL>，也就是一個 WATER_BILL 模型的集合，代表多個水費記錄。
  • Layout 指定了此頁面使用的佈局頁面是 ~/Views/Shared/_Layout.cshtml。

2. ViewBag & 標題

@{
    ViewBag.Title = "WaterList";
}
  • ViewBag.Title 用來設定頁面的標題，這裡設置為 "WaterList"。

3. 標題與樣式

<h2>作品-水費</h2>
<h3>依照水費內容</h3>
<style>
    .align-right {
        text-align: right;
    }
</style>
  • 這裡是頁面的標題和一個簡單的樣式設定，.align-right 是一個 CSS 類，用來將某些表格內容靠右對齊。

4. 水費新增按鈕與搜尋表單

<p>
    @Html.ActionLink("水費:新增", "WaterCreate", null, new { @class = "btn btn-danger" })
</p>
<form method="get" action="@Url.Action("WaterList", "Home")">
    <label for="startDate">開始日期：</label>
    <input type="date" name="startDate">
    <label for="endDate">結束日期：</label>
    <input type="date" name="endDate">
    <button type="submit">搜索</button>
</form>
  • 使用 Html.ActionLink 生成一個按鈕，當點擊後會導向 WaterCreate 動作，用於新增水費資料。
  • 下面的 <form> 創建了一個搜尋表單，允許用戶根據水費的開始和結束日期進行篩選。表單使用 GET 請求提交至 WaterList 動作。

5. 廠區選擇與表單

@using (Html.BeginForm())
{
    <label>廠區:</label>
    @Html.DropDownList("factory", new List<SelectListItem>
    {
        new SelectListItem { Value = "永康廠", Text = "永康廠/水號:12-34567890-1" },
        new SelectListItem { Value = "永科廠", Text = "永科廠/水號:23-45678901-2" }
    })
    <input type="submit" value="搜索" />
}
  • 使用 Html.DropDownList 生成一個下拉列表，供用戶選擇廠區篩選條件。這裡有兩個廠區：永康廠和永科廠。
  • 用戶選擇廠區後，表單會提交篩選條件。

6. 水費資料表格

<table class="table" style="margin-top: 20px;">
    <thead>
        <tr>
            <th>@Html.DisplayNameFor(model => model.DOCUMENT_ID)</th>
            <!-- 其他表頭... -->
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>@Html.DisplayFor(modelItem => item.DOCUMENT_ID)</td>
                <td>@Html.DisplayFor(modelItem => item.FormattedFROM_BILLING_PERIOD)</td>
                <td>@Html.DisplayFor(modelItem => item.FormattedUNTIL_BILLING_PERIOD)</td>
                <!-- 其他資料欄位... -->
                <td>
                    @if (item.PDF_CONTENT != null && item.PDF_CONTENT.Length > 0)
                    {
                        <a href="@Url.Action("GetPdfFile", "Home", new { id = item.DOCUMENT_ID })" target="_blank">檢視 PDF 檔案</a>
                    }
                    else
                    {
                        <span>沒有上傳 PDF 檔案</span>
                    }
                </td>
                <td>@Html.ActionLink("修改", "WaterEdit", new { id = item.DOCUMENT_ID })</td>
            </tr>
        }
    </tbody>
</table>
  • 這裡是一個水費資料的表格，使用 @foreach 循環來遍歷模型集合中的每個水費記錄。
  • 每一列顯示了水費的不同屬性，如 DOCUMENT_ID, FROM_BILLING_PERIOD, UNTIL_BILLING_PERIOD 等。
  • FormattedFROM_BILLING_PERIOD 和 FormattedUNTIL_BILLING_PERIOD 是經過格式化的日期顯示方式。
  • 若有 PDF 附件，會顯示一個鏈接，否則顯示 "沒有上傳 PDF 檔案"。
  • 最後一列有一個修改的按鈕，點擊後可跳轉至修改頁面。

7. 格式化字段

@Html.DisplayFor(modelItem => item.FormattedNUMBER_POINTERS)
@Html.DisplayFor(modelItem => item.FormattedTOTAL_WATER)
@Html.DisplayFor(modelItem => item.FormattedTOTAL_BILL_TAX)
@Html.DisplayFor(modelItem => item.FormattedCARBON_PERIOD)
  • 這些字段使用了 Formatted 前綴，表示它們經過了格式化處理，可能是數字的格式化或單位的處理等。

8. 結尾

這段程式碼結束於 </tbody> 和 </table>，結束了表格的定義。

總結來說，這是一個顯示水費資料的網頁，允許用戶篩選、檢視、修改資料，並上傳或檢視 PDF 檔案。

大家明天見~/images/emoticon/emoticon01.gif


上一篇
畫面自動加總與日期查詢:車輛用油/CRUD列表:水費
下一篇
CRUD新增:水費
系列文
asp.net可以變出那些功能 共 30 篇
  1. 26
    現在很流行的VUE
  2. 27
    簡約風
  3. 28
    簡約風首頁看留言的地方
  4. 29
    實用日語加入資料庫寫法:新增
  5. 30
    加上資料表後的: 實用日語 列表
完整目錄
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22088 篇
完賽人數
594 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙