iT邦幫忙

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

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

顯示圖片連結:滅火器

16th鐵人賽
140 瀏覽

  • 分享至 

  • xImage
    •  

https://laihao2.com/Home/FireExtin_List

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

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

USE [ProductDB]
GO

/****** Object:  Table [dbo].[FireExtin]    Script Date: 2024/9/21 下午 04:07:22 ******/
SET ANSI_NULLS ON
GO

SET QUOTED_IDENTIFIER ON
GO

CREATE TABLE [dbo].[FireExtin](
	[FE000] [decimal](18, 0) IDENTITY(1,1) NOT NULL,
	[FE001] [nvarchar](50) NULL,
	[FE002] [decimal](18, 2) NULL,
	[FE003] [nvarchar](10) NULL,
	[FE004] [nvarchar](50) NULL,
	[FE005] [nvarchar](50) NULL,
	[FE006] [decimal](18, 2) NULL,
	[FE007] [nvarchar](10) NULL,
	[FE008] [nvarchar](10) NULL,
	[FE009] [nvarchar](30) NULL,
 CONSTRAINT [PK_FireExtin] PRIMARY KEY CLUSTERED 
(
	[FE000] 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]
GO

https://ithelp.ithome.com.tw/upload/images/20240925/20119035REeZcJ9hDz.png
產生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("FireExtin")]
    public partial class FireExtin
    {
        [Display(Name = "滅火器名稱")]
        [StringLength(50)]
        public string FE001 { get; set; }


        [Display(Name = "數量")]
        [Column(TypeName = "numeric")]
        public decimal? FE002 { get; set; }

        [Display(Name = "位置")]
        [StringLength(10)]
        public string FE003 { get; set; }

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

        [Display(Name = "內含物")]
        [StringLength(50)]
        public string FE005 { get; set; }

        [Display(Name = "原始填充量(kg/瓶)")]
        [Column(TypeName = "numeric")]
        public decimal? FE006 { get; set; }

        [Display(Name = "管理部門")]
        [StringLength(10)]
        public string FE007 { get; set; }


        [StringLength(10)]
        public string FE008 { get; set; }

        [Display(Name = "相片連結")]
        [StringLength(30)]
        public string FE009 { get; set; }

        [Key]
        [Column(TypeName = "numeric")]
        [DatabaseGenerated(DatabaseGeneratedOption.Identity)]
        public decimal FE000 { get; set; }
    }
}

解釋程式碼
這段程式碼定義了一個名為 FireExtin 的 C# 類別，並使用了 Entity Framework 的資料註解屬性來映射到資料庫中的 FireExtin 表。這個類別代表了「滅火器」相關的資料，並且包含了多個屬性來對應不同的資料庫欄位。以下是每個屬性的解釋：

  • FE001:

    • 顯示名稱：滅火器名稱。
    • 類型：字串 (長度上限 50)。
    • 這個欄位用來存放滅火器的名稱，資料長度不超過 50 個字元。

  • FE002:

    • 顯示名稱：數量。
    • 類型：可為空的 decimal 類型 (數值)。
    • 使用 numeric 型別對應資料庫中的數字類型，表示滅火器的數量。

  • FE003:

    • 顯示名稱：位置。
    • 類型：字串 (長度上限 10)。
    • 用來存放滅火器的具體位置，字串長度最多 10 個字元。

  • FE004:

    • 顯示名稱：廠區。
    • 類型：字串 (長度上限 50)。
    • 這個欄位表示滅火器所在的廠區，長度限制為 50 個字元。

  • FE005:

    • 顯示名稱：內含物。
    • 類型：字串 (長度上限 50)。
    • 表示滅火器內含的物質，比如是乾粉還是二氧化碳等。

  • FE006:

    • 顯示名稱：原始填充量(kg/瓶)。
    • 類型：可為空的 decimal 類型。
    • 表示每個滅火器的原始填充量，單位為公斤。

  • FE007:

    • 顯示名稱：管理部門。
    • 類型：字串 (長度上限 10)。
    • 代表負責管理滅火器的部門，字串長度最多 10 個字元。

  • FE008:

    • 類型：字串 (長度上限 10)。
    • 沒有顯示名稱註解，應該是內部使用或次要欄位。

  • FE009:

    • 顯示名稱：相片連結。
    • 類型：字串 (長度上限 30)。
    • 這個欄位存放滅火器的相片連結，字串長度最多 30 個字元。

  • FE000:

    • 類型：decimal (數值)。
    • 此欄位是主鍵，用於唯一標識每個滅火器記錄。
    • 使用了 [Key] 屬性來指定它是主鍵，並且使用 [DatabaseGenerated(DatabaseGeneratedOption.Identity)] 來告訴資料庫此欄位是自動生成的。

這個類別中的屬性都被映射到資料庫中的欄位，並且使用了資料註解屬性來定義資料驗證規則及資料庫的對應。

ProductDBContext也是要做一樣的，參考前面

Controllers裡面的Entities>

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

            var fireExtins = _db.FireExtin.AsQueryable();

            if (!string.IsNullOrEmpty(searchString))
            {
                fireExtins = fireExtins.Where(fe => fe.FE001.Contains(searchString) ||
                                                    fe.FE002.ToString().Contains(searchString) ||
                                                    fe.FE003.Contains(searchString) ||
                                                    fe.FE004.Contains(searchString) ||
                                                    fe.FE005.Contains(searchString) ||
                                                    fe.FE006.ToString().Contains(searchString) ||
                                                    fe.FE007.Contains(searchString) ||
                                                    fe.FE008.Contains(searchString) ||
                                                    fe.FE009.Contains(searchString)
                                                    // 添加其他需要搜索的欄位
                                                    );
            }

            return View(fireExtins.ToList());
        }

解釋程式碼
這個代碼段是一個 ASP.NET MVC 的控制器方法，用於獲取並顯示一份滅火器列表（FireExtin_List），並根據用戶的搜索字符串進行篩選。以下是逐步解釋：

1. 方法簽名

public ActionResult FireExtin_List(string searchString)
  • FireExtin_List 是一個 ActionResult 類型的方法，返回一個視圖。這個方法接受一個可選的 searchString 參數，表示用戶輸入的搜索關鍵詞。
  • ActionResult 是 ASP.NET MVC 的標準返回類型，表示返回的動作結果，這里具體是返回一個視圖。

2. 設置 ViewBag 的 Layout

ViewBag.Layout = "~/Views/Shared/_Layout.cshtml";
  • ViewBag 是 ASP.NET MVC 中用於將數據傳遞給視圖的動態對象。在這里，它將視圖的布局文件設置為 ~/Views/Shared/_Layout.cshtml，也就是應用程序的共享布局文件。

3. 獲取滅火器數據集

var fireExtins = _db.FireExtin.AsQueryable();
  • 這里的 _db.FireExtin 表示從數據庫中獲取 FireExtin 表的數據。
  • AsQueryable() 方法將數據集轉換為可查詢的對象，以便後面可以通過 LINQ 進行篩選。

4. 根據搜索字符串篩選

if (!string.IsNullOrEmpty(searchString))
{
    fireExtins = fireExtins.Where(fe => fe.FE001.Contains(searchString) ||
                                        fe.FE002.ToString().Contains(searchString) ||
                                        fe.FE003.Contains(searchString) ||
                                        fe.FE004.Contains(searchString) ||
                                        fe.FE005.Contains(searchString) ||
                                        fe.FE006.ToString().Contains(searchString) ||
                                        fe.FE007.Contains(searchString) ||
                                        fe.FE008.Contains(searchString) ||
                                        fe.FE009.Contains(searchString)
                                        // 添加其他需要搜索的欄位
                                        );
}
  • 通過 if (!string.IsNullOrEmpty(searchString)) 判斷 searchString 是否為空或空字符串。如果不為空，則繼續進行搜索。
  • fireExtins.Where(...) 使用了 LINQ 查詢，對 FireExtin 表中的數據進行篩選。
  • fe => fe.FE001.Contains(searchString) 是 Lambda 表達式，它檢查 FireExtin 表的字段（例如 FE001, FE002 等）是否包含用戶輸入的 searchString。
  • Contains(searchString) 方法用於字符串匹配，它查找特定字段中是否包含搜索字符串。
  • 如果搜索字符串匹配任一字段的數據，記錄將包含在結果中。

5. 返回視圖

return View(fireExtins.ToList());
  • 將篩選後的數據轉為 List，並傳遞到視圖中，以便在前端展示。
  • ToList() 強制執行查詢並將結果轉為列表。

總結

這個方法的作用是從數據庫的 FireExtin 表中獲取滅火器的列表，並根據用戶輸入的搜索字符串在多個字段中篩選匹配的記錄，然後將結果以列表的形式返回並展示在視圖中。

產生畫面View程式碼

@model IEnumerable<WebApplication5.Models.FireExtin>

@{
    /*Layout = null;*/
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<h3>依照滅火器內容</h3>

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>FireExtin_List</title>
</head>
<body>
    @*<p>
        @Html.ActionLink("Create New", "Create")
    </p>*@
    <table class="table">
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.FE001)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.FE002)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.FE003)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.FE004)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.FE005)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.FE006)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.FE007)
            </th>
            @*
            <th>
                @Html.DisplayNameFor(model => model.FE008)
            </th>*@
            <th>
                @Html.DisplayNameFor(model => model.FE009)
            </th>
            <th></th>
        </tr>

        @foreach (var item in Model)
        {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.FE001)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.FE002)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.FE003)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.FE004)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.FE005)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.FE006)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.FE007)
        </td>
        @*
        <td>
            @Html.DisplayFor(modelItem => item.FE008)
        </td>*@
        <td>
            @Html.DisplayFor(modelItem => item.FE009)
        </td>

        <td>
            @{
                //var imagePath = "~/files/" + item.FE009;
                //var imagePath = "~/templates/ColdCoal.jpg" + item.FE009;
                var imagePath = "~/templates/FireExtin.jpg";
                var imageUrl = Url.Content(imagePath);
                var imageFileName = item.FE009; // 使用 FE009 欄位中的檔案名稱
            }
            <a href="@imageUrl" target="_blank" title="@imageFileName">@imageFileName</a>


        </td>

        @*
        <td>
            @Html.ActionLink("Edit", "Edit", new { id = item.FE000 }) |
            @Html.ActionLink("Details", "Details", new { id = item.FE000 }) |
            @Html.ActionLink("Delete", "Delete", new { id = item.FE000 })
        </td>*@
    </tr>
        }

    </table>
</body>
</html>

解釋程式碼
這段代碼是一個 ASP.NET MVC 視圖，用來顯示 "滅火器"（Fire Extinguisher）對象的列表。它采用 Razor 語法混合 HTML 和 C#，具體解釋如下：

上部結構

@model IEnumerable<WebApplication5.Models.FireExtin>

@{
    /*Layout = null;*/
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<h3>依照滅火器內容</h3>
  1. @model IEnumerable<WebApplication5.Models.FireExtin>：聲明了此視圖接收的模型類型是一個 FireExtin 對象的集合（IEnumerable 表示它是一個列表或集合）。FireExtin 是一個模型類，代表滅火器的相關數據。
  2. Layout = "~/Views/Shared/_Layout.cshtml";：這表示該視圖將使用共享布局 _Layout.cshtml，這是 ASP.NET MVC 中通常用於定義全局布局的文件，比如頁面的頭部、導航欄等。

表頭部分

<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.FE001)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.FE002)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.FE003)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.FE004)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.FE005)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.FE006)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.FE007)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.FE009)
        </th>
        <th></th>
    </tr>
  1. <table class="table">：使用了 table 標簽，表示這是一個 HTML 表格，用來顯示數據。
  2. @Html.DisplayNameFor(model => model.FE001)：這一行使用了 Razor 語法，調用 HtmlHelper 的 DisplayNameFor 方法。這個方法會自動獲取模型屬性的顯示名稱（通常用於表格標題）。這里用來生成表頭，分別顯示各個屬性（FE001 到 FE009）的名稱。

表格數據

@foreach (var item in Model)
{
<tr>
    <td>
        @Html.DisplayFor(modelItem => item.FE001)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.FE002)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.FE003)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.FE004)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.FE005)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.FE006)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.FE007)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.FE009)
    </td>

    <td>
        @{
            var imagePath = "~/templates/FireExtin.jpg";
            var imageUrl = Url.Content(imagePath);
            var imageFileName = item.FE009;
        }
        <a href="@imageUrl" target="_blank" title="@imageFileName">@imageFileName</a>
    </td>
</tr>
}
  1. @foreach (var item in Model)：遍歷傳遞給視圖的 FireExtin 對象集合 Model，對每個滅火器對象進行處理並顯示其屬性值。
  2. @Html.DisplayFor(modelItem => item.FE001)：這個方法根據每個對象的屬性（例如 FE001、FE002 等）在表格的每一行中顯示其值。DisplayFor 方法會格式化顯示數據並確保它是 HTML 安全的。
  3. 在 <td> 標簽中，有針對每個屬性的單元格顯示內容。

圖片鏈接部分

<td>
    @{
        var imagePath = "~/templates/FireExtin.jpg";
        var imageUrl = Url.Content(imagePath);
        var imageFileName = item.FE009;
    }
    <a href="@imageUrl" target="_blank" title="@imageFileName">@imageFileName</a>
</td>
  1. var imagePath = "~/templates/FireExtin.jpg";：這行定義了滅火器圖片的路徑。
  2. Url.Content(imagePath)：將相對路徑轉換為絕對路徑（應用程序的完整 URL），並賦值給 imageUrl。
  3. var imageFileName = item.FE009;：從數據庫字段 FE009 中獲取文件名並賦值給 imageFileName。
  4. <a href="@imageUrl" target="_blank" title="@imageFileName">@imageFileName</a>：生成一個鏈接，點擊後會在新窗口中打開圖片，鏈接文本是 imageFileName，即圖片的文件名。

注釋部分

@*<p>
    @Html.ActionLink("Create New", "Create")
</p>*@
  1. 這段代碼是被注釋掉的，表示創建新記錄的功能暫時沒有啟用。
  2. 類似的還有編輯、詳情、刪除操作的代碼部分也被注釋掉了，可能是因為這些功能目前未實現或未使用。

總結

這個視圖代碼用於展示滅火器（FireExtin）信息的列表，其中包含每個滅火器的多個屬性。表格列出了各個屬性的值，並為每個滅火器提供了一個指向圖片的鏈接。

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


上一篇
權限設定:登入
下一篇
畫面自動加總與日期查詢:車輛用油/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 組
累計文章數
22208 篇
完賽人數
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邦幫忙