iT邦幫忙

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

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

要寫很多及BUTTON選取:出差申請單

16th鐵人賽
133 瀏覽

  • 分享至 

  • xImage
    •  

https://laihao2.com/Home/BUSINESS_TRIP2_Create

https://ithelp.ithome.com.tw/upload/images/20241001/20119035t3LcIsSn1A.png
ASP.NET開發操作流程:資料表設定好>再寫程式:加入資料庫>串聯資料庫>產生Models裡面類別檔dao>按:建置>Controllers裡面的Entities>產生畫面View

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

USE [ProductDB]
GO

/****** Object:  Table [dbo].[TRIP_APPLICATION]    Script Date: 2024/9/28 下午 06:26:17 ******/
SET ANSI_NULLS ON
GO

SET QUOTED_IDENTIFIER ON
GO

CREATE TABLE [dbo].[TRIP_APPLICATION](
	[DOCUMENT_ID] [nvarchar](200) NOT NULL,
	[FILLING_DAY] [datetime2](7) NULL,
	[DEPARTMENT_NAME] [nvarchar](200) NULL,
	[USER_NAME] [nvarchar](50) NULL,
	[OFFICE_AGENT] [nvarchar](50) NULL,
	[FROM_PERIOD] [datetime2](7) NULL,
	[UNTIL_PERIOD] [datetime2](7) NULL,
	[DAYS] [int] NULL,
	[TRIP_LOCATION] [nvarchar](200) NOT NULL,
	[CONTACT_NUMBER] [nvarchar](200) NULL,
	[APPLICATION_INFORMATION] [nvarchar](200) NULL,
	[REASON] [nvarchar](200) NULL,
	[VISIT_CONTENT] [nvarchar](2000) NULL,
	[data] [datetime2](7) NULL,
	[CreatedBy] [nvarchar](max) NULL,
 CONSTRAINT [PK_TRIP_APPLICATION] 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 腳本是在 Microsoft SQL Server 中創建一個名為 TRIP_APPLICATION 的表。該表用於存儲出差申請的信息。以下是對這段代碼的詳細解釋：

1. USE [ProductDB]

USE [ProductDB]
GO
  • 指定數據庫為 ProductDB，表示後續的 SQL 語句會在這個數據庫中執行。

2. 創建表 TRIP_APPLICATION

CREATE TABLE [dbo].[TRIP_APPLICATION](
  • 創建一個名為 TRIP_APPLICATION 的表，屬於數據庫的 dbo（數據庫所有者）架構。此表用於存儲出差申請的信息。

3. 字段定義

NOT NULL

  • DOCUMENT_ID：字符型字段，最大長度為 200，不能為空（NOT NULL）。這是出差申請的唯一標識符，用作主鍵。

NULL

  • FILLING_DAY：日期和時間字段，用於記錄申請填寫的日期和時間。可以為空（NULL）。

[DEPARTMENT_NAME] [nvarchar](200) NULL

  • DEPARTMENT_NAME：字符型字段，最大長度為 200，存儲申請人的部門名稱。可以為空。

NULL

  • USER_NAME：字符型字段，最大長度為 50，存儲申請人的姓名。可以為空。

NULL

  • OFFICE_AGENT：字符型字段，最大長度為 50，存儲申請人指定的代理人姓名。可以為空。

NULL

  • FROM_PERIOD：日期和時間字段，表示出差的開始日期和時間。可以為空。

NULL

  • UNTIL_PERIOD：日期和時間字段，表示出差的結束日期和時間。可以為空。

[DAYS] [int] NULL

  • DAYS：整型字段，記錄出差的天數。可以為空。

[TRIP_LOCATION] [nvarchar](200) NOT NULL

  • TRIP_LOCATION：字符型字段，最大長度為 200，記錄出差地點。不能為空。

[CONTACT_NUMBER] [nvarchar](200) NULL

  • CONTACT_NUMBER：字符型字段，最大長度為 200，記錄申請人的聯系電話。可以為空。

[APPLICATION_INFORMATION] [nvarchar](200) NULL

  • APPLICATION_INFORMATION：字符型字段，最大長度為 200，存儲申請的附加信息。可以為空。

NULL

  • REASON：字符型字段，最大長度為 200，記錄出差的理由。可以為空。

[VISIT_CONTENT] [nvarchar](2000) NULL

  • VISIT_CONTENT：字符型字段，最大長度為 2000，記錄出差訪問的詳細內容。可以為空。

NULL

  • data：日期和時間字段，記錄表單的提交時間。可以為空。

[CreatedBy] [nvarchar](max) NULL

  • CreatedBy：字符型字段，存儲創建記錄的用戶。nvarchar(max) 可以存儲較長的字符串，通常用於保存文本信息。可以為空。

4. 主鍵約束

CONSTRAINT [PK_TRIP_APPLICATION] PRIMARY KEY CLUSTERED 
(
	[DOCUMENT_ID] ASC
)
  • 這段代碼定義了表的主鍵（PRIMARY KEY），該主鍵基於 DOCUMENT_ID 字段，且是聚集索引（CLUSTERED）。這意味著數據庫會按照 DOCUMENT_ID 升序排列數據（ASC 表示升序）。

5. 表選項

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] TEXTIMAGE_ON [PRIMARY]
  • 這些選項用於控制索引和表的性能設置：
    • 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]：數據將存儲在數據庫的主文件組 PRIMARY 中。
    • TEXTIMAGE_ON [PRIMARY]：用於存儲大對象（如 nvarchar(max) 字段）的數據也存儲在主文件組中。

總結

這個 SQL 腳本創建了一個名為 TRIP_APPLICATION 的表，主要用於存儲出差申請的詳細信息。表的主鍵是 DOCUMENT_ID，並且包含多個字段來記錄申請人的部門、代理人、出差日期、地點和出差的理由等。

產生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;
    [Table("TRIP_APPLICATION")]
    public partial class TRIP_APPLICATION
    {

        //單據編號自動加入_年月日+流水號

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

        //填表日期:


        [Display(Name = "填表日期:")]
        [Column(TypeName = "datetime2")]
        public DateTime? FILLING_DAY { get; set; }
        public string FormattedFILLING_DAY
        {
            get
            {
                return FILLING_DAY?.ToString("yyyy-MM-dd");
            }
        }

        [Display(Name = "部門")]
        [StringLength(200)]
        public string DEPARTMENT_NAME { get; set; }
        [Display(Name = "姓名")]
        [StringLength(50)]
        public string USER_NAME { get; set; }

        [Display(Name = "職務代理人")]
        [StringLength(50)]
        public string OFFICE_AGENT { get; set; }

        [Display(Name = "出差日期起")]
        [Column(TypeName = "datetime2")]
        public DateTime? FROM_PERIOD { get; set; }
        public string FormattedFROM_PERIOD
        {
            get
            {
                return FROM_PERIOD?.ToString("yyyy-MM-dd");
            }
        }

        [Display(Name = "出差日期迄")]
        [Column(TypeName = "datetime2")]
        public DateTime? UNTIL_PERIOD { get; set; }
        public string FormattedUNTIL_PERIOD
        {
            get
            {
                return UNTIL_PERIOD?.ToString("yyyy-MM-dd");
            }
        }

        [Display(Name = "共幾天")]
        //public decimal? DAYS { get; set; }

        public int? DAYS { get; set; }

        [Display(Name = "出差地點")]
        [Required(ErrorMessage = "請選擇出差地點")]
        //[StringLength(200)]
        public string TRIP_LOCATION { get; set; }
        //20240401欄位目前為 string 類型。將其修改為布林值 (bool) 類型,以便使用框表示國內或國外       
        //public bool TRIP_LOCATION { get; set; }

        //[NotMapped] // 這個屬性不會對應到資料庫欄位
        //public string TRIP_LOCATION_STRING
        //{
        //get { return TRIP_LOCATION ? "國外" : "國內"; }
        //set { TRIP_LOCATION = value == "國外"; }
        //}



        [Display(Name = "聯絡電話")]
        [StringLength(200)]
        public string CONTACT_NUMBER { get; set; }

        [Display(Name = "申請資料及主要交通工具")]
        [StringLength(200)]
        public string APPLICATION_INFORMATION { get; set; }

        [Display(Name = "事由")]
        [StringLength(200)]
        public string REASON { get; set; }

        [Display(Name = "日期/地點/洽訪公司/洽訪對象/拜訪起訖時間:")]
        [StringLength(2000)]
        public string VISIT_CONTENT { get; set; }


        public DateTime? data { get; set; }
        [Display(Name = "建立者")]
        public string CreatedBy { get; set; }

    }

}

解釋程式碼
這段代碼定義了一個 C# 類 TRIP_APPLICATION，用於映射數據庫中的 TRIP_APPLICATION 表。該類是通過使用 Entity Framework 實現的，它表示出差申請的模型。每個屬性都對應數據庫表中的一個字段，並通過數據注釋來指定驗證規則和數據庫映射細節。

1. 命名空間和依賴引用

namespace WebApplication5.Models
{
    using System;
    using System.ComponentModel.DataAnnotations;
    using System.ComponentModel.DataAnnotations.Schema;
}
  • 命名空間 WebApplication5.Models 表示該類屬於 WebApplication5 項目的模型部分。
  • System 提供基礎類型（如 DateTime），ComponentModel.DataAnnotations 用於數據驗證，ComponentModel.DataAnnotations.Schema 用於數據庫映射。

2. 類定義

[Table("TRIP_APPLICATION")]
public partial class TRIP_APPLICATION
  • [Table("TRIP_APPLICATION")] 指定該類與數據庫中的 TRIP_APPLICATION 表映射。
  • partial 關鍵字允許類可以分布在多個文件中，便於擴展。

3. 屬性及其注釋

DOCUMENT_ID（單據號）

[Display(Name = "單據號碼")]
[Required(ErrorMessage = "必填")]
[Key]
[StringLength(200)]
public string DOCUMENT_ID { get; set; }
  • [Key]：標識為主鍵。
  • [Required]：標記為必填項。
  • [StringLength(200)]：字符長度限制為 200。
  • 該字段用於存儲出差申請的單據編號。

FILLING_DAY（填表日期）

[Display(Name = "填表日期:")]
[Column(TypeName = "datetime2")]
public DateTime? FILLING_DAY { get; set; }

public string FormattedFILLING_DAY
{
    get { return FILLING_DAY?.ToString("yyyy-MM-dd"); }
}
  • FILLING_DAY 用於記錄出差申請的填寫日期。
  • FormattedFILLING_DAY 是只讀屬性，用於將日期格式化為 "yyyy-MM-dd"。

DEPARTMENT_NAME（部門名稱）和 USER_NAME（姓名）

[Display(Name = "部門")]
[StringLength(200)]
public string DEPARTMENT_NAME { get; set; }

[Display(Name = "姓名")]
[StringLength(50)]
public string USER_NAME { get; set; }
  • DEPARTMENT_NAME 和 USER_NAME 分別記錄申請人的部門和姓名，字符長度分別為 200 和 50。

OFFICE_AGENT（職務代理人）

[Display(Name = "職務代理人")]
[StringLength(50)]
public string OFFICE_AGENT { get; set; }
  • OFFICE_AGENT 用於存儲職務代理人的名字，字符長度限制為 50。

FROM_PERIOD 和 UNTIL_PERIOD（出差日期起始和結束）

[Display(Name = "出差日期起")]
[Column(TypeName = "datetime2")]
public DateTime? FROM_PERIOD { get; set; }

public string FormattedFROM_PERIOD
{
    get { return FROM_PERIOD?.ToString("yyyy-MM-dd"); }
}

[Display(Name = "出差日期迄")]
[Column(TypeName = "datetime2")]
public DateTime? UNTIL_PERIOD { get; set; }

public string FormattedUNTIL_PERIOD
{
    get { return UNTIL_PERIOD?.ToString("yyyy-MM-dd"); }
}
  • FROM_PERIOD 和 UNTIL_PERIOD 分別表示出差的起始和結束日期，允許為空。
  • FormattedFROM_PERIOD 和 FormattedUNTIL_PERIOD 是用於格式化日期顯示的屬性。

DAYS（出差天數）

[Display(Name = "共幾天")]
public int? DAYS { get; set; }
  • DAYS 記錄出差的總天數，允許為空。

TRIP_LOCATION（出差地點）

[Display(Name = "出差地點")]
[Required(ErrorMessage = "請選擇出差地點")]
public string TRIP_LOCATION { get; set; }
  • TRIP_LOCATION 記錄出差的地點，是必填字段（Required 注解），其數據類型為 string。
  • 注釋中提到該字段可能會被修改為 bool 類型來表示“國內”或“國外”。

CONTACT_NUMBER（聯系電話）

[Display(Name = "聯絡電話")]
[StringLength(200)]
public string CONTACT_NUMBER { get; set; }
  • CONTACT_NUMBER 用於記錄申請人的聯系電話，字符長度限制為 200。

APPLICATION_INFORMATION（申請信息及交通工具）

[Display(Name = "申請資料及主要交通工具")]
[StringLength(200)]
public string APPLICATION_INFORMATION { get; set; }
  • APPLICATION_INFORMATION 存儲有關申請的附加信息和主要交通工具，字符長度限制為 200。

REASON（事由）

[Display(Name = "事由")]
[StringLength(200)]
public string REASON { get; set; }
  • REASON 存儲申請出差的理由，字符長度限制為 200。

VISIT_CONTENT（拜訪內容）

[Display(Name = "日期/地點/洽訪公司/洽訪對象/拜訪起訖時間:")]
[StringLength(2000)]
public string VISIT_CONTENT { get; set; }
  • VISIT_CONTENT 是一個較長的字段，最大字符長度為 2000，用於存儲訪問的詳細內容。

data 和 CreatedBy

public DateTime? data { get; set; }

[Display(Name = "建立者")]
public string CreatedBy { get; set; }
  • data 記錄創建申請的時間戳。
  • CreatedBy 用於存儲創建該申請的用戶。

總結

該類定義了出差申請的屬性，映射到數據庫表中的各個字段。數據注釋（Data Annotations）用於指定驗證規則和屬性的數據庫映射，並通過額外的屬性（如 FormattedFROM_PERIOD）提供了日期格式化功能。

ProductDBContext程式碼的內容參考前幾天~

Controllers裡面的Entities>

public ActionResult BUSINESS_TRIP2_Create()
        {
            ViewBag.Layout = "~/Views/Shared/_Layout.cshtml";

            return View();
        }
        //[AllowAnonymous]
        [HttpPost]
        public ActionResult BUSINESS_TRIP2_Create(TRIP_APPLICATION customer)
        {
            string custId = customer.DOCUMENT_ID;
            var temp = _db.TRIP_APPLICATION.FirstOrDefault(m => m.DOCUMENT_ID == custId);

            if (temp == null)
            { // 取得上一筆單據的單據編號
                var lastProduct = _db.TRIP_APPLICATION.OrderByDescending(p => p.data).FirstOrDefault();
                string lastNumber = lastProduct?.DOCUMENT_ID;

                // 產生新的單據編號
                string newNumber;
                if (string.IsNullOrEmpty(lastNumber))
                {
                    // 如果是第一筆資料, 單據編號為 "20230408001"
                    newNumber = $"{DateTime.Now.ToString("yyyyMMdd")}001";
                }
                else
                {
                    // 如果不是第一筆資料, 單據編號自動遞增
                    int lastNumberInt = int.Parse(lastNumber.Substring(8));
                    newNumber = $"{DateTime.Now.ToString("yyyyMMdd")}{(lastNumberInt + 1).ToString("D3")}";
                }
                // 20240408計算出差天數
                if (customer.UNTIL_PERIOD.HasValue && customer.FROM_PERIOD.HasValue)
                {
                    //customer.DAYS = (customer.UNTIL_PERIOD.Value.Date - customer.FROM_PERIOD.Value.Date).Days + 1;
                    //20240408計算出差天數，課長說不要加一
                    customer.DAYS = (customer.UNTIL_PERIOD.Value.Date - customer.FROM_PERIOD.Value.Date).Days;
                }
                else
                {
                    customer.DAYS = null;
                }

                customer.DOCUMENT_ID = newNumber; // 設置新的單據編號

                //customer.data = DateTime.Now;
               //var username = Session["Member"] as tMember;
                //customer.CreatedBy = username?.fUserId;

                _db.TRIP_APPLICATION.Add(customer);
                _db.SaveChanges();
                return RedirectToAction("BUSINESS_TRIP_List2");
            }
            ViewBag.Msg = "聯單編號重複";
            return View(customer);
        }

解釋程式碼
這段代碼是一個 ASP.NET MVC 控制器，用於創建新的出差申請（TRIP_APPLICATION）。它包含兩個方法：

  1. BUSINESS_TRIP2_Create()：這是一個 GET 請求的方法，用於呈現出差申請的創建頁面。它通過 ViewBag.Layout 指定使用共享布局 ~/Views/Shared/_Layout.cshtml，並返回一個視圖。

  2. BUSINESS_TRIP2_Create(TRIP_APPLICATION customer)：這是一個處理表單提交的 POST 方法，接收一個包含出差申請數據的 TRIP_APPLICATION 對象。

詳細解釋：

GET 方法：

public ActionResult BUSINESS_TRIP2_Create()
{
    ViewBag.Layout = "~/Views/Shared/_Layout.cshtml";
    return View();
}
  • 這個方法沒有任何參數，用於呈現出差申請表單頁面。
  • 它使用了 ViewBag.Layout 來設置視圖的布局文件，並返回視圖（View()），讓用戶可以看到表單頁面。

POST 方法：

[HttpPost]
public ActionResult BUSINESS_TRIP2_Create(TRIP_APPLICATION customer)
{
    string custId = customer.DOCUMENT_ID;
    var temp = _db.TRIP_APPLICATION.FirstOrDefault(m => m.DOCUMENT_ID == custId);

    if (temp == null)
    {
        // 取得上一筆單據的單據編號
        var lastProduct = _db.TRIP_APPLICATION.OrderByDescending(p => p.data).FirstOrDefault();
        string lastNumber = lastProduct?.DOCUMENT_ID;

        // 產生新的單據編號
        string newNumber;
        if (string.IsNullOrEmpty(lastNumber))
        {
            // 如果是第一筆資料, 單據編號為 "20230408001"
            newNumber = $"{DateTime.Now.ToString("yyyyMMdd")}001";
        }
        else
        {
            // 如果不是第一筆資料, 單據編號自動遞增
            int lastNumberInt = int.Parse(lastNumber.Substring(8));
            newNumber = $"{DateTime.Now.ToString("yyyyMMdd")}{(lastNumberInt + 1).ToString("D3")}";
        }

        // 20240408計算出差天數
        if (customer.UNTIL_PERIOD.HasValue && customer.FROM_PERIOD.HasValue)
        {
            // 課長說不要加一，所以計算天數不加 1
            customer.DAYS = (customer.UNTIL_PERIOD.Value.Date - customer.FROM_PERIOD.Value.Date).Days;
        }
        else
        {
            customer.DAYS = null;
        }

        customer.DOCUMENT_ID = newNumber; // 設置新的單據編號

        _db.TRIP_APPLICATION.Add(customer);
        _db.SaveChanges();
        return RedirectToAction("BUSINESS_TRIP_List2");
    }

    ViewBag.Msg = "聯單編號重複";
    return View(customer);
}

  1. 參數：

    • customer：這個對象是從前端表單提交的出差申請數據。

  2. 查詢是否已存在相同的 DOCUMENT_ID：

    • custId = customer.DOCUMENT_ID 獲取客戶提交的單據編號。
    • temp = _db.TRIP_APPLICATION.FirstOrDefault(m => m.DOCUMENT_ID == custId) 檢查數據庫中是否已存在該編號的記錄。

  3. 生成新的單據編號：

    • 如果 temp == null（數據庫中沒有該單據編號的記錄），則獲取數據庫中最後一條記錄的單據編號。
    • lastProduct 通過 OrderByDescending(p => p.data) 按時間倒序獲取最後一條記錄。
    • 如果存在最後一條記錄，通過 lastNumber?.DOCUMENT_ID 獲取它的編號，否則 lastNumber 為 null。
    • 根據當前日期生成新的單據編號：
      • 如果 lastNumber 為空（即沒有任何記錄），則新編號為 "yyyyMMdd001"。
      • 如果有上一條記錄，則通過 int.Parse(lastNumber.Substring(8)) 提取最後三位數字，並遞增生成新的編號。

  4. 計算出差天數：

    • 如果 UNTIL_PERIOD 和 FROM_PERIOD 都有值，則計算出差天數為兩個日期相減的天數。代碼中特別注明了“課長說不要加一”，所以不額外增加一天。

  5. 保存新記錄：

    • customer.DOCUMENT_ID = newNumber 將生成的新編號賦給當前出差申請對象。
    • customer.DAYS 保存出差天數。
    • SaveChanges() 保存記錄到數據庫。
    • 如果保存成功，重定向到 BUSINESS_TRIP_List2 頁面。

  6. 錯誤處理：

    • 如果數據庫中已經存在相同的 DOCUMENT_ID，則通過 ViewBag.Msg 返回錯誤消息 "聯單編號重覆"。

總結：

這段代碼主要是處理用戶提交的出差申請表單，生成唯一的單據編號，並計算出差的天數。

產生畫面View程式碼

@model WebApplication5.Models.TRIP_APPLICATION


@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@{
    ViewBag.Title = "BUSINESS_TRIP2_Create";
}


<h2>作品-出差申請單-新增</h2>
<h3>依照出差申請單-新增內容</h3>

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    @*
        <title>BUSINESS_TRIP2_Create</title>*@


</head>
<body>
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryval")


    @using (Html.BeginForm())
    {
        @Html.AntiForgeryToken()

        <div class="form-horizontal">
            @* <h4>TRIP_APPLICATION</h4>*@
        
            @*<h2 style="text-align: center;">出差申請單</h2>*@
            <h2 class="text-center mt-5">出差申請單:新增</h2>

            <h5 style="text-align:right;">表單編號：1-AC-2-F-003 Rev:2</h5>

            <hr />
            @Html.ValidationSummary(true, "", new { @class = "text-danger" })
            @*<div class="form-group">
                    @Html.LabelFor(model => model.FILLING_DAY, htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.EditorFor(model => model.FILLING_DAY, new { htmlAttributes = new { @class = "form-control", type = "date" } })
                        @Html.ValidationMessageFor(model => model.FILLING_DAY, "", new { @class = "text-danger" })
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(model => model.DEPARTMENT_NAME, htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.EditorFor(model => model.DEPARTMENT_NAME, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.DEPARTMENT_NAME, "", new { @class = "text-danger" })
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(model => model.USER_NAME, htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.EditorFor(model => model.USER_NAME, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.USER_NAME, "", new { @class = "text-danger" })
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(model => model.OFFICE_AGENT, htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.EditorFor(model => model.OFFICE_AGENT, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.OFFICE_AGENT, "", new { @class = "text-danger" })
                    </div>
                </div>*@
            <div class="form-group row">
                <div class="col-md-3">
                    @Html.LabelFor(model => model.FILLING_DAY, htmlAttributes: new { @class = "control-label" })
                    <div>
                        @Html.EditorFor(model => model.FILLING_DAY, new { htmlAttributes = new { @class = "form-control", type = "date" } })
                        @Html.ValidationMessageFor(model => model.FILLING_DAY, "", new { @class = "text-danger" })
                    </div>
                </div>
                <div class="col-md-3">
                    @Html.LabelFor(model => model.DEPARTMENT_NAME, htmlAttributes: new { @class = "control-label" })
                    <div>
                        @Html.EditorFor(model => model.DEPARTMENT_NAME, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.DEPARTMENT_NAME, "", new { @class = "text-danger" })
                    </div>
                </div>
                <div class="col-md-3">
                    @Html.LabelFor(model => model.USER_NAME, htmlAttributes: new { @class = "control-label" })
                    <div>
                        @Html.EditorFor(model => model.USER_NAME, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.USER_NAME, "", new { @class = "text-danger" })
                    </div>
                </div>
                <div class="col-md-3">
                    @Html.LabelFor(model => model.OFFICE_AGENT, htmlAttributes: new { @class = "control-label" })
                    <div>
                        @Html.EditorFor(model => model.OFFICE_AGENT, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.OFFICE_AGENT, "", new { @class = "text-danger" })
                    </div>
                </div>
            </div>

            @*<div class="form-group">
                    @Html.LabelFor(model => model.FROM_PERIOD, htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.EditorFor(model => model.FROM_PERIOD, new { htmlAttributes = new { @class = "form-control", type = "date" } })
                        @Html.ValidationMessageFor(model => model.FROM_PERIOD, "", new { @class = "text-danger" })
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(model => model.UNTIL_PERIOD, htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.EditorFor(model => model.UNTIL_PERIOD, new { htmlAttributes = new { @class = "form-control", type = "date" } })
                        @Html.ValidationMessageFor(model => model.UNTIL_PERIOD, "", new { @class = "text-danger" })
                    </div>
                </div>*@

            @*<div class="form-group">
                    @Html.LabelFor(model => model.DAYS, htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.EditorFor(model => model.DAYS, new { htmlAttributes = new { @class = "form-control", type = "date" } })
                        @Html.ValidationMessageFor(model => model.DAYS, "", new { @class = "text-danger" })
                    </div>
                </div>*@

            @*<div class="form-group">
                @Html.LabelFor(model => model.TRIP_LOCATION, htmlAttributes: new { @class = "control-label col-md-2" })*@
            @*<div class="col-md-10">
                    @Html.EditorFor(model => model.TRIP_LOCATION, new { htmlAttributes = new { @class = "form-control" } })

                    @Html.ValidationMessageFor(model => model.TRIP_LOCATION, "", new { @class = "text-danger" })
                </div>*@

            @*<div class="col-md-4">

                        <div class="col-md-4">
                            <div class="radio">
                                @Html.RadioButtonFor(model => model.TRIP_LOCATION, "國內", new { @id = "domestic" })
                                <label for="domestic">國內</label>
                            </div>
                            <div class="radio">
                                @Html.RadioButtonFor(model => model.TRIP_LOCATION, "國外", new { @id = "international" })
                                <label for="international">國外</label>
                            </div>
                            @Html.ValidationMessageFor(model => model.TRIP_LOCATION, "", new { @class = "text-danger" })
                        </div>
                    </div>

                </div>



                <div class="form-group">
                    @Html.LabelFor(model => model.CONTACT_NUMBER, htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.EditorFor(model => model.CONTACT_NUMBER, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.CONTACT_NUMBER, "", new { @class = "text-danger" })
                    </div>
                </div>*@
            <div class="form-group row">
                <div class="col-md-3">
                    @Html.LabelFor(model => model.FROM_PERIOD, htmlAttributes: new { @class = "control-label" })
                    <div>
                        @Html.EditorFor(model => model.FROM_PERIOD, new { htmlAttributes = new { @class = "form-control", type = "date" } })
                        @Html.ValidationMessageFor(model => model.FROM_PERIOD, "", new { @class = "text-danger" })
                    </div>
                </div>
                <div class="col-md-3">
                    @Html.LabelFor(model => model.UNTIL_PERIOD, htmlAttributes: new { @class = "control-label" })
                    <div>
                        @Html.EditorFor(model => model.UNTIL_PERIOD, new { htmlAttributes = new { @class = "form-control", type = "date" } })
                        @Html.ValidationMessageFor(model => model.UNTIL_PERIOD, "", new { @class = "text-danger" })
                    </div>
                </div>
                <div class="col-md-3">
                    @Html.LabelFor(model => model.TRIP_LOCATION, htmlAttributes: new { @class = "control-label" })
                    <div>
                        <div class="radio">
                            @Html.RadioButtonFor(model => model.TRIP_LOCATION, "國內", new { @id = "domestic" })
                            <label for="domestic">國內</label>
                        </div>
                        <div class="radio">
                            @Html.RadioButtonFor(model => model.TRIP_LOCATION, "國外", new { @id = "international" })
                            <label for="international">國外</label>
                        </div>
                        @Html.ValidationMessageFor(model => model.TRIP_LOCATION, "", new { @class = "text-danger" })
                    </div>
                </div>
                <div class="col-md-3">
                    @Html.LabelFor(model => model.CONTACT_NUMBER, htmlAttributes: new { @class = "control-label" })
                    <div>
                        @Html.EditorFor(model => model.CONTACT_NUMBER, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.CONTACT_NUMBER, "", new { @class = "text-danger" })
                    </div>
                </div>
            </div>
            <div class="form-group">
                @Html.LabelFor(model => model.APPLICATION_INFORMATION, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @*@Html.EditorFor(model => model.APPLICATION_INFORMATION, new { htmlAttributes = new { @class = "form-control" } })*@
                    @Html.TextAreaFor(model => model.APPLICATION_INFORMATION, new { @class = "form-control", rows = 5 })

                    @Html.ValidationMessageFor(model => model.APPLICATION_INFORMATION, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.REASON, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @*@Html.EditorFor(model => model.REASON, new { htmlAttributes = new { @class = "form-control" } })*@
                    @Html.TextAreaFor(model => model.REASON, new { @class = "form-control", rows = 5 })

                    @Html.ValidationMessageFor(model => model.REASON, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.VISIT_CONTENT, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @*@Html.EditorFor(model => model.VISIT_CONTENT, new { htmlAttributes = new { @class = "form-control", rows = 5 } })*@
                    @Html.TextAreaFor(model => model.VISIT_CONTENT, new { @class = "form-control", rows = 5 })
                    @Html.ValidationMessageFor(model => model.VISIT_CONTENT, "", new { @class = "text-danger" })
                </div>
            </div>

            @* <div class="form-group">
                    @Html.LabelFor(model => model.data, htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.EditorFor(model => model.data, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.data, "", new { @class = "text-danger" })
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(model => model.CreatedBy, htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.EditorFor(model => model.CreatedBy, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.CreatedBy, "", new { @class = "text-danger" })
                    </div>
                </div>*@

            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    @*<input type="submit" value="Create" class="btn btn-default" />*@
                    <input type="submit" value="存檔" class="btn btn-danger" />
                </div>
            </div>
        </div>
    }

    @*<div>
            @Html.ActionLink("Back to List", "Index")
        </div>*@
</body>
</html>

解釋程式碼
這段程式碼是一個用於 ASP.NET MVC 專案的 Razor 視圖頁面，目的是呈現一個「出差申請單」的新增表單。表單會讓使用者填寫出差相關資訊，並將這些資料提交到後端進行處理。以下是程式碼中的關鍵部分解釋：

  1. 頁面配置與佈局：

    • @model WebApplication5.Models.TRIP_APPLICATION：定義了頁面的模型類型，這裡是 TRIP_APPLICATION，表示該表單會綁定到這個模型類別中的屬性。
    • Layout = "~/Views/Shared/_Layout.cshtml";：設定了頁面使用的佈局檔案，_Layout.cshtml 是該應用程式的標準佈局。

  2. 表單標題與簡介：

    • 頁面使用 <h2> 和 <h3> 標籤來顯示表單的標題和簡介。標題為「作品-出差申請單-新增」，旨在告知使用者這是出差申請的新增表單。
    • 表單編號「1-AC-2-F-003 Rev:2」則是表單的標準樣式，通過 <h5> 標籤在右上方顯示。

  3. 使用表單：

    • @using (Html.BeginForm())：使用 Html.BeginForm() 創建一個 HTML 表單。這個表單會將資料以 POST 方式提交到控制器進行處理。
    • @Html.AntiForgeryToken()：生成一個防止跨站點請求偽造 (CSRF) 的隱藏欄位，以提高表單安全性。

  4. 表單欄位：

    • 主要使用 Html.EditorFor() 方法生成對應於 TRIP_APPLICATION 模型屬性的輸入欄位。
    • 例如，@Html.EditorFor(model => model.FILLING_DAY, new { htmlAttributes = new { @class = "form-control", type = "date" } }) 會生成一個日期選擇器，對應到 FILLING_DAY 屬性。
    • 表單中的每個輸入欄位都使用 Bootstrap 的 form-control 類別來美化樣式。
    • 透過 Html.ValidationMessageFor() 顯示每個欄位的錯誤訊息，並將錯誤訊息的樣式設為紅色 (text-danger)。

  5. 特殊處理 - TRIP_LOCATION：

    • @Html.RadioButtonFor() 被用來生成兩個單選按鈕，分別表示「國內」和「國外」。這與 TRIP_LOCATION 欄位相關，讓使用者選擇出差的地點。
    • 在表單提交後，會根據這個選擇將對應的值傳回控制器。

  6. 多行文字欄位：

    • 對於 APPLICATION_INFORMATION, REASON, 和 VISIT_CONTENT 這些文字描述較長的欄位，使用了 @Html.TextAreaFor() 來生成多行文本框，並設定了每個文本框的列數為 5。

  7. 表單提交按鈕：

    • 使用 <input type="submit" value="存檔" class="btn btn-danger" /> 生成了一個紅色的「存檔」按鈕，當使用者填寫完成後按下該按鈕，表單資料就會提交。

  8. 樣式和腳本：

    • 在頁面中使用了 @Scripts.Render("~/bundles/jquery") 和 @Scripts.Render("~/bundles/jqueryval")，這些是 ASP.NET MVC 中的 JavaScript 引用，用來提供 jQuery 和 jQuery 驗證的功能。

總結來說，這段程式碼是一個完整的表單頁面，使用者可以透過該表單提交有關出差申請的資訊。它運用了 ASP.NET MVC 中常見的表單元素生成方法、驗證以及樣式配置，使得頁面簡潔且易於使用。

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


上一篇
網頁裡面還可以顯示網頁:員工交通
下一篇
圖片輪播:極簡風/跳出視窗提示:現代風
系列文
asp.net可以變出那些功能 共 30 篇
  1. 26
    現在很流行的VUE
  2. 27
    簡約風
  3. 28
    簡約風首頁看留言的地方
  4. 29
    實用日語加入資料庫寫法:新增
  5. 30
    加上資料表後的: 實用日語 列表
完整目錄
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

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