學習ASP.NET Core Razor 編程系列七——修改列表頁面

来源:https://www.cnblogs.com/chillsrc/archive/2018/04/28/8968398.html
-Advertisement-
Play Games

通過前面的學習,我們的書籍應用程式已經能正常運行了,但現在的呈現效果不是很理想,主要標題顯示的是英文。我們不想看到的時間(如下圖所示0:00:00),並且希望把“ReleaseDate”修改成“出版日期”。現在的程式運行效果如下圖。 ...


 學習ASP.NET Core Razor 編程系列目錄

學習ASP.NET Core Razor 編程系列一

學習ASP.NET Core Razor 編程系列二——添加一個實體

 學習ASP.NET Core Razor 編程系列三——創建數據表及創建項目基本頁面

學習ASP.NET Core Razor 編程系列四——Asp.Net Core Razor列表模板頁面

學習ASP.NET Core Razor 編程系列五——Asp.Net Core Razor新建模板頁面

學習ASP.NET Core Razor 編程系列六——資料庫初始化

 

      通過前面的學習,我們的書籍應用程式已經能正常運行了,但現在的呈現效果不是很理想,主要標題顯示的是英文。我們不想看到的時間(如下圖所示0:00:00),並且希望把“ReleaseDate”修改成“出版日期”。現在的程式運行效果如下圖。

          

更新實體類代碼

       我們在Visual Studio 2017中打開Models/Book.cs文件並添加下麵代碼,註意代碼中的紅色顯示的行:

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

namespace RazorMvcBooks.Models
{
    public class Book
    {

        public int ID { get; set; }
        public string Name { get; set; }
        [Display(Name = "出版日期")]
        [DataType(DataType.Date)]
        public DateTime ReleaseDate { get; set; }
        public string Author { get; set; }
        public decimal Price { get; set; } 

    }

}

 

        此時Visual Studio 會在你剛纔添加的代碼下麵顯示波浪線,我們使用滑鼠右鍵單擊紅色波浪線,然後在彈出菜單中選擇“快速操作和重構”。如下圖。

 

         選擇 using System.ComponentModel.DataAnnotations;

 

            Visual studio 將會把 “using System.ComponentModel.DataAnnotations;”這一行代碼添加到文件頭.

            Display 特性指定一個欄位的要在界面中顯示的名稱(在本示例中,“ReleaseDate”將修改成“出版日期”做為顯示值)。DataType特性指定欄位顯示的數據類型(日期),使欄位所存儲的數據顯示時不在顯示時間信息。如下圖所示。

 

         在瀏覽器打開書籍信息管理列表頁面,並懸停在“Edit”鏈接上以查看,鏈接背後的URL值。如下圖。

 

        書籍信息管理列表頁面中的“Edit”、“Details”和“Delete”鏈接的代碼都在 Pages/Books/Index.cshtml 文件中,這些具體的URL由定位標記輔助助手生成。

 

<tbody>
@foreach (var item in Model.Book) {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Name)

            </td>
            <td>
                @Html.DisplayFor(modelItem => item.ReleaseDate)

            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Author)

            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Price)

            </td>
            <td>
                <a asp-page="./Edit" asp-route-id="@item.ID">Edit</a> |
                <a asp-page="./Details" asp-route-id="@item.ID">Details</a> |

                <a asp-page="./Delete" asp-route-id="@item.ID">Delete</a>
            </td>
        </tr>
}
</tbody>

        標簽輔助助手使伺服器端代碼可以在 Razor 文件中參與創建和呈現 HTML 元素。 在上面的代碼中,定位標簽輔助助手在 Razor 頁面(路由是相對的)通過asp-page 和路由 ID (asp-route-id) 兩個標簽動態生成 HTML href 屬性值。

          在瀏覽器中打開書籍信息列表頁面,然後在頁面中使用滑鼠右鍵,在彈出菜單中使用“查看源”或類似的菜單來查看生成的標記。 如下圖。

 

          在頁面源代碼頁面,你會看到由系統生成的 HTML 代碼,如下圖所示:

 

         動態生成的鏈接通過URL把書籍ID傳遞給“Edit”、“Details”和“Delete”頁面(例如,http://localhost:53416/Books/Details?id=6)。

         修改Edit.cshtml、Details.cshtml和Delete.cshtml文件,讓這些頁面使用“{id:int?}”做為路由模板。將這些頁面中第一行頁面指令從@page改為@page "{id:int}"。如下圖。

 

         然後在visual studio 2017中按F5運行應用程式,然後瀏覽器中瀏覽書籍信息列表頁面,使用右鍵菜單查看頁面的源代碼。你將會看到新生成的相關的HTML url 鏈接將id的值做為URL的一部分,添加到url最後,如下圖。

 

        當頁面中使用了“{id: int}” 路由模板,在瀏覽器中進行頁面請求時,如果請求中不包含整數,則將返回 HTTP 404錯誤或是空白頁面,如下圖。 例如,http://localhost:53416/Books/Details 將返回空白頁面。如下圖。。 若要使 ID 可選,請使用“{id: int?}” 做為路由模板:

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 已知,1900年1月1日是星期1,用戶隨機輸入年月日,計算星期幾 代碼如下(未改進),歡迎批評指正 year=int(input('year')) month=int(input('month')) day=int(input('day')) if year >=1900:#大於等於1900 rye ...
  • 一、大型網站架構演化 1、大型網站特點 高併發,大流量 高可用 海量數據 用戶分佈廣泛,網路情況複雜 安全環境惡劣 需求快速變更,發佈頻繁 漸進式發展 2、大型網站架構發展歷程 文件伺服器,資料庫伺服器,應用伺服器分離 應用伺服器增加本地緩存,本地緩存優先,增加分散式緩存伺服器 使用應用程式伺服器集 ...
  • 實現過程: 終端的字元顏色是用轉義序列控制的,是文本模式下的系統顯示功能,和具體的語言無關。 轉義序列是以ESC開頭,即用\033來完成(ESC的ASCII碼用十進位表示是27,用八進位表示就是033)。 格式: 開頭部分:\033[顯示方式;前景色;背景色m + 結尾部分:\033[0m 註意:開 ...
  • 一、AMQP 概述 AMQP(Advanced Message Queuing Protocol),高級消息隊列協議。 簡單回憶一下JMS的消息模型,可能會有助於理解AMQP的消息模型。在JMS中,有三個主要的參與者:消息的生產者、消息的消費者以及在生產者和消費者之間傳遞消息的通道(隊列或主題)。在 ...
  • 程式:購物車程式 需求: 程式如下: 註:程式參照老男孩Alex,附博客地址:http://www.cnblogs.com/alex3714/articles/5717620.html ...
  • 一、異常概述 異常是程式中的一些錯誤,但並不是所有的錯誤都是異常,並且錯誤有時候是可以避免的。比如說,你的代碼少了一個分號,那麼運行出來結果是提示是錯誤 java.lang.Error;如果你用System.out.println(11/0),那麼你是因為你用0做了除數,會拋出 java.lang. ...
  • asp.net-core選項模塊是全新,可拓展的框架,其作用在整個.net-core框架中,就像依賴註入一樣無處不在,是一個很重要的組件。 其實配置模塊與選項模塊是緊密相連的,我們可以使用ConfigureBuilder類來使用配置,但是在Startup類中,我們使用了依賴註入來實現IConfigu ...
  • 怎麼用NuGet和怎麼配置log4net就不介紹了,直接上代碼(Visual Studio 2015 下的項目,用的.NET Framework 4.5.2)。 其中QRDecodeConsoleApp.exe.config文件里配置圖片路勁(預設為D:\我的文檔\Pictures\二維碼)、圖片類 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...