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

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

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

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

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

 

本篇文章介紹上一篇文章中創建的書籍信息管理系統中增刪改查的四個Razor模板頁面。

一、列表頁面。

       我們首先來了解一下書籍列表頁面，這個頁面位置在 Pages/Books/Index.cshtml.cs :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.EntityFrameworkCore;
using RazorMvcBooks.Models; 

namespace RazorMvcBooks.Pages.Books
{
    public class IndexModel : PageModel
    {
        private readonly RazorMvcBooks.Models.BookContext _context;

         public IndexModel(RazorMvcBooks.Models.BookContext context)
        {
            _context = context;
        }
        public IList<Book> Book { get;set; } 

        public async Task OnGetAsync()
        {
            Book = await _context.Book.ToListAsync();
        }
    }
}

 

        列表頁面IndexModel派生自 PageModel。 按照命名規則PageModel 的派生類一般命名為 <PageName>Model。 構造函數使用依賴關系注入的方式將 BookContext 添加到頁面。 所有通過上一文章中的方法創建的模板頁面都是如此。

         當Index頁面發出請求時，OnGetAsync 方法向 Razor 頁面返回一個書籍列表。 在 Razor 頁面上調用 OnGetAsync 方法或 OnGet方法初始化頁面數據。 在本示例中，OnGetAsync 將數據庫中Book表中的所有書籍信息，並以列表的形式顯示出來。

         當 OnGet 方法返回 void 或 OnGetAsync方法返回 Task 時，不需要任何返回語句。 當返回類型是 IActionResult 或 Task<IActionResult> 時，必須提供返回語句。

          下面我們介紹一下有返回的方法，例如 Pages/Movies/Create.cshtml.cs 頁面中的OnPostAsync方法，代碼如下：

  public async Task<IActionResult> OnPostAsync()
        {
            if (!ModelState.IsValid)
            {
                return Page();
            }
 

            _context.Book.Add(Book);
            await _context.SaveChangesAsync(); 

            return RedirectToPage("./Index");
        }

 

 

           其次，我們來看看書籍列表頁面中的前端代碼，這個頁面位置在 Pages/Books/Index.cshtml，在Visual Studio  2017中使用鼠標左鍵雙擊打開 頁面，代碼如下:

@page
@model RazorMvcBooks.Pages.Books.IndexModel

@{
    ViewData["Title"] = "Index";
}

<h2>Index</h2>
<p>
    <a asp-page="Create">Create New</a>
</p>
<table class="table">
    <thead>
        <tr>
                <th>
                    @Html.DisplayNameFor(model => model.Book[0].Name)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Book[0].ReleaseDate)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Book[0].Author)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Book[0].Price)
                </th>
            <th></th>
        </tr>
    </thead>
    <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>
</table>

        Razor指令可以根據規則從 HTML 轉換為 C# 或 Razor 特定標記。 當在 @ 符號后跟 Razor 保留關鍵字時，它會轉換為 Razor 特定標記，如果不是Razor保留關鍵字，則會轉換為 C#。

         @page Razor 指令將文件轉換為一個 MVC 操作，這意味着它可以處理請求。 @page 必須是頁面上的第一個 Razor 指令。 @page 是轉換成 Razor 特定標記的一個示例。

          請查看下列HTML助手中使用的lambda表達式：

   @Html.DisplayNameFor(model => model.Book[0].Name)

            DisplayNameFor HTML輔助助手檢查 Lambda 表達式中引用的Name屬性來確定顯示名稱。 Lambda表達式是檢查而不是求值。 這意味着當 model、model.Book 或 model.Book[0] 為 null 或為空時，不會存在任何訪問沖突。 當使用Html輔助助手取值輔助方法對 Lambda 表達式取值（例如，使用 @Html.DisplayFor(modelItem => item.Title)），將取得該實體的屬性值。

       @model指令

@page
@model RazorMvcBooks.Pages.Books.IndexModel

            @model 指令指定傳遞給 Razor 頁面的實體類型。在上面的示例中，@model 使 PageModel 派生的類IndexModel可用於 Razor 頁面。 在頁面上通過 @Html.DisplayNameFor 和 @Html.DisplayName HTML 輔助助手使用該實體。

 

ViewData 和布局

           首先，我們看一下下面的布局代碼:

@page
@model RazorMvcBooks.Pages.Books.IndexModel

@{
    ViewData["Title"] = "Index";
}

           上面的代碼就是 Razor 代碼轉換為 C# 的一個示例。 大括號“{ }” 字符括住 C# 代碼塊。

             PageModel 基類具有 ViewData 字典屬性，可用於添加要傳遞到某個視圖的數據。 可以使用鍵/值模式將對象添加到 ViewData 字典。 在上面的示例中，“Title”屬性被添加到 ViewData 字典中。 “Title”屬性的在 Pages/_Layout.cshtml 文件中使用。

               你可以在Visual Studio 2017中打開 位於 Pages/_Layout.cshtml 文件，我們來看看這個文件中的前幾行，便可以發現 “Title”的使用。代碼如下。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - RazorMvcBooks</title> 

    <environment include="Development">
        <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
        <link rel="stylesheet" href="~/css/site.css" />
</environment> 

    @*Markup removed for brevity.*@

          行 @*Markup removed for brevity.*@ 為 Razor 注釋。 與 HTML 注釋不同 (<!-- -->)，Razor 注釋不會發送到客戶端。

           在Visual Studio 2017 中按F5運行應用程序，在瀏覽器測試項目中的鏈接（Home、About、Contact、Create、Edit和Delete）。你會發現在瀏覽器中每個頁面的標題都是一樣的。當您將某個頁面添加到書簽時，標題用於這個書簽。 Pages/Index.cshtml 和 Pages/Books/Index.cshtml 當前具有相同的標題，但可以修改它們以具有不同的值。

 

            我們可以在Visual Studio 2017中打開 位於  Pages/_ViewStart.cshtml 文件，查看其中的 Layout 屬性，如下代碼：

@{
    Layout = "_Layout";
}

             上面的標記將所有 Razor 頁面的布局設置為 Pages 文件夾下的 Pages/_Layout.cshtml所定義的布局。

 修改布局

          第一步，我們要使用“書籍管理系統”來替換 Pages/_Layout.cshtml 文件中的 <title> 元素中的RazorMvcBooks字符串。如下代碼。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] – 書籍管理系統</title>

       第二步，在 Pages/_Layout.cshtml 文件中的找到以下數據信息：

<a asp-page="/Index" class="navbar-brand">RazorMvcBooks</a>

          將上面的數據信息替換為以下數據信息：

<a asp-page="/Books/Index" class="navbar-brand">書籍管理系統</a>

        上面的<a>元素是一個標記輔助助手。此處它是<a>標記輔助助手。asp-page="/Books/Index" 標記輔助助手屬性和值可以用來創建指向 /Books/Index  Razor 頁面的鏈接。

           保存所做的修改，在Visual Studio 2017中按F5運行程序，在瀏覽器中通過單擊“書籍管理系統”鏈接測試應用，如下圖。