《進擊吧！Blazor！》第一章 3.頁面製做

時間  2021-01-31
標籤 css html git 程序員 github web 數據庫 bootstrap c# 後端 欄目 CSS 简体版
原文   原文鏈接

做者介紹

在這裏插入圖片描述

陳超超
Ant Design Blazor 項目貢獻者
擁有十多年從業經驗，長期基於.Net技術棧進行架構與開發產品的工做，Ant Design Blazor 項目貢獻者，現就任於正泰集團css

 

寫專欄開頭老規矩了，因此……先來段廣告😁
《進擊吧！Blazor！》是本人與張善友老師合做的Blazor零基礎入門系列視頻，此係列能讓一個從未接觸過Blazor的程序員掌握開發Blazor應用的能力。
視頻地址：https://space.bilibili.com/483888821/channel/detail?cid=151273
演示代碼：https://github.com/TimChen44/Blazor-ToDo
本系列文章是基於《進擊吧！Blazor！》直播內容編寫，升級.Net5，改進問題，講解更全面。html

從此次分享開始我經過製做一個ToDo應用來介紹Balzor的開發。git

準備工做

項目準備

  1. 打開上一次分享內容建立項目
    2.修改\wwwroot\css\app.css文件，只保留如下代碼用於配置程序發生未捕獲異常時的提示樣式
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}
  1. 修改index.htm文件，移除對‘bootstrap’樣式的引用，由於咱們使用ant-design-blazor來作UI
 <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" /><!--此行代碼刪除--> 

引入ant-design-blazor包

在這裏插入圖片描述

✨ 特性
🌈 提煉自企業級中後臺產品的交互語言和視覺風格。
📦 開箱即用的高質量 Razor 組件，可在多種託管方式共享。
💕 支持基於 WebAssembly 的客戶端和基於 SignalR 的服務端 UI 事件交互。
🎨 支持漸進式 Web 應用（PWA）
🛡 使用 C# 構建，多範式靜態語言帶來高效的開發體驗。
⚙️ 基於 .NET Standard 2.1/.NET 5，可直接引用豐富的 .NET 類庫。
🎁 可與已有的 ASP.NET Core MVC、Razor Pages 項目無縫集成。程序員

項目地址：https://github.com/ant-design-blazor/ant-design-blazor
文檔地址：https://antblazor.com/github

安裝

  1. 用NuGet安裝AntDesign包
 Install-Package AntDesign -Version 0.5.3 
  1. 在 Program.cs 中註冊:
public static async Task Main(string[] args)
{
    //其餘代碼
    builder.Services.AddAntDesign();
    await builder.Build().RunAsync();
}
  1. 在 wwwroot/index.html 中引入靜態文件:
<link href="_content/AntDesign/css/ant-design-blazor.css" rel="stylesheet">
<script src="_content/AntDesign/js/ant-design-blazor.js"></script>
  1. 在 _Imports.razor 中加入命名空間
 @using AntDesign 
  1. 爲了動態地顯示彈出組件，須要在 App.razor 末尾添加一個 <AntContainer /> 組件。
 <AntContainer /> <!--添加在這裏--> 

路由

在頁面中切換，一定使用路由，咱們先了解一下blazor的路由機制
App.razor 文件web

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    </Found>
    <NotFound>
        <LayoutView Layout="@typeof(MainLayout)">
            <p>Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>

在上面第一行把當前項目的程序集賦值給了 Router 組件的 AppAssembly 屬性，這樣程序在啓動時檢索程序集中全部的頁面用於路由，路由信息經過頁面文件頂部的 @page 標記進行定義。還能夠經過 AdditionalAssemblies 屬性支持多個程序集。數據庫

Route裏面有兩個模板屬性，分別是路由命中和未命中顯示的內容、RouteView 組件用於顯示路由的頁面，這裏從 Router 接收 routeData 以及任何所需的參數。
DefaultLayout="@typeof(MainLayout)" 定義了默認佈局。bootstrap

佈局文件及菜單

編輯 Shared/MainLayout.razor 文件，製做程序的佈局以及菜單。c#

@inherits LayoutComponentBase
<Layout>
    <Sider Style="overflow: auto;height: 100vh;position: fixed;left: 0;">
        <div class="logo">
            進擊吧！Blazor！
        </div>
        <Menu Theme="MenuTheme.Dark">
            <MenuItem RouterLink="/">
                主頁
            </MenuItem>
            <MenuItem RouterLink="/today" RouterMatch="NavLinkMatch.Prefix">
                個人一天
            </MenuItem>
            <MenuItem RouterLink="/search" RouterMatch="NavLinkMatch.Prefix">
                所有
            </MenuItem>
        </Menu>
    </Sider>
    <Layout Class="site-layout">
        @Body
    </Layout>
</Layout>

<style>
     <!--爲了減小文檔代碼量，此處省略樣式代碼，你們能夠直接從本項目源碼查看，後面的示例代碼採用相同模式，將再也不贅述-->
</style>

 

Layout頁面佈局組件後端

Layout組件幫助文檔：https://antblazor.com/zh-CN/components/layout

Menu 菜單組件
Theme="MenuTheme.Dark"黑色主題

Menu組件幫助文檔：https://antblazor.com/zh-CN/components/menu

MenuItem 菜單項組件
RouterLink="/" 路由地址
RouterMatch="NavLinkMatch.Prefix" 路由匹配模式，經過匹配 URL 來切換 active CSS 類，這有助於在導航菜單中顯示那個頁面是活動頁。
NavLinkMatch.All：NavLink 在與當前整個 URL 匹配的狀況下處於活動狀態。
NavLinkMatch.Prefix（默認）：NavLink 在與當前 URL 的任何前綴匹配的狀況下處於活動狀態。

@Body經過這個固定語法在佈局中標記指定呈現內容的位置。

主頁

編輯 Pages/Index.razor 文件

@page "/"
<Result Icon="smile-outline" Title="@("進擊吧！Blazor！")"></Result>"

 

在這裏插入圖片描述

這個主頁左邊是菜單，右邊是內容，符合上一節佈局格式，由於主頁路由地址是/，因此默認就打開了。

@page "/" 頁面路由地址

Result 結果組件，用於反饋一系列操做任務的處理結果，主頁雖然是不反饋結果，不過當成ToDo應用門面效果還不錯😃

Result組件幫助文檔：https://antblazor.com/zh-CN/components/result

個人一天

一個用於顯示和維護當天待辦事項的界面
建立Pages/ToDay.razor文件

@page "/today"

<PageHeader Title="@("個人一天")" Subtitle="@DateTime.Now.ToString("yyyy年MM月dd日")"></PageHeader>

在這裏插入圖片描述

啓動後點擊左邊的「個人一天」菜單就能夠導航到剛剛建立的頁面，目前就只有一個頁頭。

@page "/today"設置當前頁路由地址爲/today

PageHeader 頁頭信息

PageHeader組件幫助文檔：https://antblazor.com/zh-CN/components/pageheader

待辦列表

ToDo的靈魂那就是待辦列表了，那麼三步走：先上代碼，再看效果，最後講解😉

@inject TaskServices TaskSvr

@foreach (var item in taskDtos)
{
    <Card Bordered="true" Size="small" Class="task-card">
        <div class="task-card-item">
            <div class="title">
                <Text Strong> @item.Title</Text>
                <br />
                <Text Type="@TextElementType.Secondary">@item.Description</Text>
            </div>
        </div>
    </Card>
}

@code{
    private List<TaskDto> taskDtos = new List<TaskDto>();

    protected async override Task OnInitializedAsync()
    {
        taskDtos = await TaskSvr.LoadToDay();
        await base.OnInitializedAsync();
    }
}

效果圖

在這裏插入圖片描述

經過OnInitializedAsync方法中使用TaskSvr.LoadToDay()載入待辦數據後存入taskDtos變量，最後經過@foreach遍歷taskDtos集合，以Card組件做爲容器，使用@item.Title和@item.Description將數據單項綁定到界面顯示。

@foreach (var item in taskDtos) { }這個和C#中的foreach功能相同
@標記能夠把變量值單向綁定到頁面中
@code{}在razor語法中用於標記{}中能夠插入c#代碼

@inject TaskServices TaskSvr經過依賴注入TaskServices服務

關於依賴注入會在下一章節專題介紹，此處就不展開了

Card卡片容器
Bordered="true"顯示卡片邊框
Size="small"小尺寸卡片

Card組件幫助文檔：https://antblazor.com/zh-CN/components/card

標記重要

有些待辦確定比其餘待辦更重要，因此增長一個標記重要的按鈕，老規矩：先上代碼，再看效果，最後講解😉

    <Text Type="@TextElementType.Secondary">@item.Description</Text>
</div>
<!--從這裏開始插入如下代碼-->
<div class="star" @onclick="x => OnStar(item)">
    <Icon Type="star" Theme="@(item.IsImportant ? "fill" : "outline")" />
</div>
private void OnStar(TaskDto task)
{
    task.IsImportant = !task.IsImportant;
}

用div包裹一個Icon組件，而後在div上註冊@onclick點擊事件，當點擊後會觸發private void OnStar(TaskDto task)方法，並將當前項目item做爲參數傳入，方法中修改了TaskDto的IsImportant屬性值，經過@(item.IsImportant ? "fill" : "outline")單向綁定，實現修改Icon組件的Theme樣式在fill和outline切換。

@()相比@標記，它能夠在()括號中使用單行代碼進行單向綁定。
@onclick事件綁定，除了onclick還有不少，詳見ASP.NET Core Blazor事件處理

Icon語義化的矢量圖形。
Type="star"圖標名稱

Icon組件幫助文檔：https://antblazor.com/zh-CN/components/icon

計劃時間

既然是待辦，那麼必然有一個計劃開始時間PlanTime，以及一個截至時間Deadline，因此老規矩，三步走：先上代碼，再看效果，最後講解😉

    <Text Type="@TextElementType.Secondary">@item.Description</Text>
</div>
<!--從這裏開始插入如下代碼-->
<div class="date">
    @item.PlanTime.ToShortDateString()
    <br />
    @{
        int? days = (int?)item.Deadline?.Subtract(DateTime.Now.Date).TotalDays;
    }
    <span style="color:@(days switch { _ when days > 3 => "#ccc", _ when days > 0 => "#ffd800", _ => "#ff0000" })">
        @item.Deadline?.ToShortDateString()
    </span>
</div>

在這裏插入圖片描述

上面顯示計劃日期PlanTime，下面顯示Deadline，並經過與當前時間對比，根據時間差決定顯示方式。

days switch { _ when days > 3 => "#ccc", _ when days > 0 => "#ffd800", _ => "#ff0000" }這是switch表達式寫法，能夠簡化代碼，若是使用if代碼將比較臃腫，代碼以下

@if (days > 3)
{
    <span style="color:#ccc">
        @item.Deadline?.ToShortDateString()
    </span>
}
else if (days > 0)
{
    <span style="color:#ff6a00">
        @item.Deadline?.ToShortDateString()
    </span>
}
else
{
    <span style="color:#ff0000">
        @item.Deadline?.ToShortDateString()
    </span>
}

 

待辦詳情

列表只適合查看待辦概要，須要查看詳情還需獨立頁面，因此咱們作一個抽屜詳情頁，那麼咱們三步走
編輯ToDay.razor文件

<div class="title" @onclick="x=>OnCardClick(item)">
    <Text Strong> @item.Title</Text>
    <br />
    <Text Type="@TextElementType.Secondary">@item.Description</Text>
</div>
[Inject] public DrawerService DrawerSrv { get; set; }
async void OnCardClick(TaskDto task)
{
    var options = new DrawerOptions()
    {
        Title = task.Title,
        Width = 450,
    };
    await DrawerSrv.CreateDialogAsync<TaskInfo, TaskDto, TaskDto>(options, task);
    await InvokeAsync(StateHasChanged);
}

新建TaskInfo.razor文件

@inherits DrawerTemplate<TaskDto, TaskDto>

<Form Model="this.Options" LabelCol="new ColLayoutParam() {Span = 8 }">
    <FormItem Label="標題">
        <Input @bind-Value="context.Title" />
    </FormItem>
    <FormItem Label="計劃日期">
        <DatePicker @bind-Value="context.PlanTime" Picker="@DatePickerType.Date" />
    </FormItem>
    <FormItem Label="截至日期">
        <DatePicker @bind-Value="context.Deadline" Picker="@DatePickerType.Date" />
    </FormItem>
    <FormItem Label="描述">
        <TextArea @bind-Value="context.Description" MinRows="4" />
    </FormItem>
    <FormItem Label="重要">
        <Switch @bind-Value="context.IsImportant" />
    </FormItem>
    <FormItem Label="完成">
        <Switch @bind-Value="context.IsFinish" />
    </FormItem>
</Form>

在這裏插入圖片描述

在以前的<div class="title">中添加@onclick="x=>OnCardClick(item)"註冊點擊事件觸發async void OnCardClick(TaskDto task)方法，而後使用DrawerSrv.CreateDialogAsync方法打開一個抽屜，抽屜中包含TaskInfo組件，當抽屜關閉時用InvokeAsync更新頁面。

async/await異步等待，可讓異步操做的代碼變成同步編碼風格，此處CreateDialogAsync是一個異步過程，經過它讓他進行異步等待，只有在抽屜關閉後纔會繼續執行後面的await InvokeAsync(StateHasChanged);代碼，這語法能夠避免大量的回調代碼，簡化代碼。

StateHasChanged在通常狀況下狀態發生了改變，blazor會自動更新綁定內容，可是若是在不一樣線程或者某些狀況修改了狀態，blazor可能沒法跟蹤改變，致使界面沒有刷新綁定內容，這時咱們就可使用StateHasChanged方法顯示的更新狀態。

@inherits DrawerTemplate<TaskDto, TaskDto>抽屜組件必需要繼承DrawerTemplate類，前面一個TaskDto是抽屜打開時須要傳入的參數類型，後面一個TaskDto是抽屜關閉時返回的類型。

[Inject] public DrawerService DrawerSrv { get; set; }依賴注入抽屜服務

Drawer組件幫助文檔：https://antblazor.com/zh-CN/components/drawer

Form表單組件
Model="this.Options"表單綁定的對象

Form組件幫助文檔：https://antblazor.com/zh-CN/components/form

新增待辦

要作的事情永遠作不完，由於咱們天天不停的在增長待辦😣

<div class="task-input">
    <DatePicker Picker="@DatePickerType.Date" @bind-Value="@newTask.PlanTime" />
    <Input @bind-Value="@newTask.Title" OnkeyUp="OnInsert" />
</div>
TaskDto newTask = new TaskDto() { PlanTime = DateTime.Now.Date };
void OnInsert(KeyboardEventArgs e)
{
    if (e.Code == "Enter")
    {
        taskDtos.Add(newTask);
        newTask = new TaskDto() { PlanTime = DateTime.Now.Date };
    }
}

在這裏插入圖片描述

將newTask綁定到DatePicker和Input組件，而後註冊OnkeyUp事件，經過處理事件時採用if (e.Code == "Enter")判斷回車，當回車時將newTask加入taskDtos集合，並創新新的newTask用於下一次添加。

@bind-Value雙向綁定Value屬性，這個可讓組件中的數據更改和變量的值雙向更新。

DatePicker輸入或選擇日期的控件。
Picker="@DatePickerType.Date"日期選擇模式

組件幫助文檔：https://antblazor.com/zh-CN/components/datepicker

Input經過鼠標或鍵盤輸入內容，是最基礎的表單域的包裝。
OnkeyUp="OnInsert"鍵盤按鍵擡起事件，若是沒有明確指定參數，那麼他會帶上KeyboardEventArgs參數，不一樣的事件的參數不一樣，詳見ASP.NET Core Blazor 事件處理

Input組件幫助文檔：https://antblazor.com/zh-CN/components/input

刪除待辦

世上沒有反悔藥，可是程序的世界，反悔就是屢見不鮮，so，上代碼

    <span style="color:@(days switch { _ when days > 3 => "#ccc", _ when days > 0 => "#ffd800", _ => "#ff0000" })">
        @item.Deadline?.ToShortDateString()
    </span>
</div>
<!--從這裏開始插入如下代碼-->
<div class="del" @onclick="async e=>await OnDel(item)">
    <Icon Type="rest" Theme="outline" />
</div>
[Inject] public ConfirmService ConfirmSrv { get; set; }

public async Task OnDel(TaskDto task)
{
    if (await ConfirmSrv.Show($"是否刪除任務 {task.Title}", "刪除", ConfirmButtons.YesNo, ConfirmIcon.Info) == ConfirmResult.Yes)
    {
        taskDtos.Remove(task);
    }
}

在這裏插入圖片描述

這裏使用ConfirmSrv服務提供的消息框功能，並藉助await的特性，無需回調，直接判斷返回值是不是ConfirmResult.Yes，而後刪除選擇任務。

ConfirmSrv.Show快捷地彈出一個內置的確認框。

modal組件幫助文檔：https://antblazor.com/zh-CN/components/modal

完成待辦

個人一天待辦最後一個功能，完成它，gogogo

<Card Bordered="true" Size="small" Class="task-card">
    <div class="task-card-item">
<!--從這裏開始插入如下代碼-->
        @{
            var finishClass = new ClassMapper().Add("finish").If("unfinish", () => item.IsFinish == false);
        }
        <div class="@(finishClass.ToString())" @onclick="x => OnFinish(item)">
            <Icon Type="check" Theme="outline" />
        </div>
private void OnFinish(TaskDto task)
{
    task.IsFinish = !task.IsFinish;
}

在這裏插入圖片描述

這個功能的實現方式與「標記重要」功能類似，區別是它經過修改樣式來顯示與隱藏完成標記。

ClassMapper類是AntDesignBlazor中自帶的class工具，它經過鏈式代碼能夠根據條件組合成須要的class .Add("finish")添加名字爲finish的class .If("unfinish", () => item.IsFinish == false)根據表達式item.IsFinish == false值決定是否添加名字爲unfinish的class

所有待辦

想要查看全部待辦，那麼就作一個「所有」界面，繼續代碼➡效果➡講解三步走
建立TaskSearch.razor文件

@page "/search"
@inject TaskServices TaskSvr

<PageHeader Title="@("所有待辦事項")" Subtitle="@($"數量：{datas?.Count}")"></PageHeader>

<Search @bind-Value="title" OnSearch="OnSearch"></Search>

<Spin Spinning="@isLoading">
    <Table DataSource="@datas">
        <AntDesign.Column @bind-Field="@context.Title" Sortable>
            @context.Title
            @if (context.IsImportant)
            {
                <Tag Color="orange">重要</Tag>
            }
        </AntDesign.Column>
        <AntDesign.Column @bind-Field="@context.Description" />
        <AntDesign.Column @bind-Field="@context.PlanTime" Sortable />
        <AntDesign.Column @bind-Field="@context.Deadline" Sortable />
        <AntDesign.Column @bind-Field="@context.IsFinish">
            @if (context.IsFinish)
            {
                <Icon Type="check" Theme="outline" />
            }
        </AntDesign.Column>
    </Table>
</Spin>
private bool isLoading = false;

protected async override Task OnInitializedAsync()
{
    await base.OnInitializedAsync();
    await OnSearch();
}

private async Task OnSearch()
{
    isLoading = true;
    datas = await TaskSvr.LoadSearch(title);
    isLoading = false;
}

private string title;

List<TaskDto> datas = new List<TaskDto>();

在這裏插入圖片描述

在OnInitializedAsync中使用OnSearch()方法將數據載入datas，界面使用Table組件顯示載入的數據。

Spin用於頁面和區塊的加載中狀態。
Spinning="@isLoading"設置加載狀態。

Spin組件幫助文檔：https://antblazor.com/zh-CN/components/spin

Table展現行列數據
DataSource="@datas"表格中須要顯示的數據經過DataSource綁定

AntDesign.Column表格中的列
@bind-Field="@context.Title"列顯示的字段，支持模板

Table組件幫助文檔：https://antblazor.com/zh-CN/components/table

Tag進行標記和分類的小標籤。
Color="orange"標籤顯示爲橘色

Tag組件幫助文檔：https://antblazor.com/zh-CN/components/tag

程序啓動動畫

由於WebAssembly啓動前須要一些時間下載代碼，這個時候瀏覽器默認是白屏，這會讓用戶以爲網絡不順暢或者系統發生了問題，影響客戶體驗，因此咱們一般會在啓動時加入一個啓動等待動畫，這個只須要簡單修改index.html便可

<body>
    <app>
        <div class="loading">
            <!--此處加入blazor完成啓動前須要顯示的載入動畫-->
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </app>
    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>
    <script src="_framework/blazor.webassembly.js"></script>
</body>
</html>

 

次回預告

到這裏咱們把待辦工具的界面作好了，可是全部數據都是模擬的，下一次咱們將經過HttpClient實現先後端數據交互，以及使用EF Code進行超級簡單的數據庫增刪改查。

 

學習資料：

https://aka.ms/LearnBlazor

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程