您现在的位置是：网站首页> 编程资料编程资料

使用MASA Blazor开发查询表格页_相关技巧_

2023-05-25 122人已围观

简介 使用MASA Blazor开发查询表格页_相关技巧_

前言

大家好，我是开源项目 MASA Blazor 主要开发者之一，如果你还不了解MASA Blazor，可以访问我们的 官网 和博客 《初识MASA Blazor》 一探究竟。简单来说，MASA Blazor 是一个基于 Material Design 设计语言的 Blazor 组件库，dotNET开发者只需或者甚至不需要懂得 javascript 就能开发一个企业级中后台系统。

我这次分享的主题是《使用MASA Blazor开发一个标准的查询表格页》，我会先从创建项目开始手撸一个没有任何技巧的查询表格页，然后我会分享一些技巧和封装的组件，实现快速开发。

手撸查询表格页

创建应用程序

关于如何安装MASA Blazor模板，请移步 MASA.Blazor快速入门。

首先通过MASA Blazor模板默认的Server项目，项目命名为 MasaBlazorStandardTablePage。

dotnet new --install MASA.Template dotnet new masab -o MasaBlazorStandardTablePage

通过CLI运行应用程序，或直接通过vs启动项目。

cd MasaBlazorStandardTablePage dotnet run

启动成功后切换到 Fetch data 页面，此页面展示了一个简单的使用了 MDataTable 的表格。

支持单个查询条件和搜索

让我们从最简单的单个条件查询开始。

将随机数据替换成模拟数据

修改 WeatherForecastService，将随机数据替换成死数据以便支持查询功能。下面的代码更新了数据来源和 GetForecastAsync 查询方法。

 public class WeatherForecastService { private readonly List _data = new() { new() { Date = DateTime.Now.AddDays(-1), TemperatureC = 23, Summary = "Freezing" }, new() { Date = DateTime.Now.AddDays(-1), TemperatureC = -10, Summary = "Bracing" }, new() { Date = DateTime.Now.AddDays(-1), TemperatureC = 37, Summary = "Chilly" }, new() { Date = DateTime.Now.AddDays(-2), TemperatureC = 29, Summary = "Cool" }, new() { Date = DateTime.Now.AddDays(-3), TemperatureC = 11, Summary = "Mild" }, new() { Date = DateTime.Now.AddDays(-4), TemperatureC = 35, Summary = "Warm" }, new() { Date = DateTime.Now.AddDays(-5), TemperatureC = 41, Summary = "Balmy" }, new() { Date = DateTime.Now.AddDays(-5), TemperatureC = -13, Summary = "Hot" }, new() { Date = DateTime.Now.AddDays(-6), TemperatureC = 23, Summary = "Sweltering" }, new() { Date = DateTime.Now.AddDays(-7), TemperatureC = 2, Summary = "Scorching" }, }; public Task GetForecastAsync() { IEnumerable res = _data.AsQueryable(); return Task.FromResult(res.ToArray()); } }

同时修改 FetchData.razor，因为 WeatherForecastService.GetForecastAsync() 删除了 startDate 入参。

protected override async Task OnInitializedAsync() { await Task.Delay(1000); // 模拟真实环境，触发Loading效果 forecasts = await ForecastService.GetForecastAsync(); // here }

添加查询输入框和搜索按钮

在 FetchData.razor 页面中的

标签下添加以下代码

搜索 @code { private string summary; private async Task OnSearch() { forecasts = await ForecastService.GetForecastAsync(summary); } }

Line 3,17

定义了一个 string 类型的名为 summary 的变量，双向绑定给了 MTextField 组件。MTextFiled 除了 @bind-Value 属性用于设置双向绑定，其他属性的含义请阅读 文档。

Line 12

定义了一个搜索按钮，用于触发查询。

修改 WeatherForecastService.GetForecastAsync 方法，增加 summary 入参，并支持查询。

public Task GetForecastAsync(string? summary = null) { IEnumerable res = _data.AsQueryable(); if (!string.IsNullOrEmpty(summary)) { res = res.Where(item => item.Summary.Contains(summary)); } return Task.FromResult(res.ToArray()); }

支持多个查询条件和重置

现在让我们再添加一个高温预警的选择框来查询不同高温预警状态的数据。

更新 WeatherForecastService 以支持根据高温预警筛选数据

public Task GetForecastAsync(string? summary = null, WarningSigns? warningSigns = null) { IEnumerable res = _data.AsQueryable(); if (!string.IsNullOrEmpty(summary)) { res = res.Where(item => item.Summary.Contains(summary)); } if (warningSigns.HasValue) { res = warningSigns switch { WarningSigns.Yellow => res.Where(item => item.TemperatureC >= 35 && item.TemperatureC < 37), WarningSigns.Orange => res.Where(item => item.TemperatureC >= 37 && item.TemperatureC < 39), WarningSigns.Red => res.Where(item => item.TemperatureC >= 39), _ => res }; } return Task.FromResult(res.ToArray()); }

增加高温预警选择框

在 Data 目录下添加名为 WarningSigns 的枚举。

public enum WarningSigns { [Description("高温黄色预警 35℃")] Yellow = 1, [Description("高温橙色预警 37℃")] Orange, [Description("高温红色预警 39℃")] Red }

引入 Masa.Utils.Enums 包，此包提供的 GetEnumObjectList 方法能轻松的将枚举的 Description 和枚举值用于 MSelect 组件的 Items。

dotnet add package Masa.Utils.Enums

更新 FetchData.razor。

重置搜索 @code { private WarningSigns? warningSigns; private Task OnReset() { summary = null; warningSigns = null; return OnSearch(); } private async Task OnSearch() { forecasts = await ForecastService.GetForecastAsync(summary, warningSigns); } }

Line 2,10

通过设置 Sm="6" 可以让屏幕尺寸大于768px时一行占两个 MCol ，实现 MTextField 和 MSelect 并排显示。

Line 11-23,33,44

第33行定义 warningSigns 变量用于接收 MSelect 选中的值，当然也可以通过设置值更新 MSelect 选中的值，只要设置了 @bind-Value 双向绑定就行，就像第11行那样。第12行使用了 Masa.Utils.Enums 提供的方法，返回了一个包含Name(Description)和Value(枚举值)的列表，赋值给了 MSelect.Items 。第44行将 warningSigns 的传给查询接口。

Line 27,35-40

此处定义了一个重置按钮，用于清空所有查询输入框的内容并刷新表格。

支持键入回车或选择后触发查询

后来测试小姐姐说你这太难用了，回车不能触发搜索，选择完也不能触发搜索。好吧好吧，我们现在加上。

键入回车后触发

原理即捕捉 OnKeyDown 事件是否点击了 Enter 键。

 @code { private async Task HandleOnKeyDown(KeyboardEventArgs args) { if (args.Code == "Enter") { // 等待156毫秒，预防输入的值在更新到变量之前按下Enter键 await Task.Delay(156); await OnSearch(); } } }

Line 2

将

上一篇：MASA Blazor入门详细教程_相关技巧_

下一篇：JetBrains公司三大编辑器迭代循环模板快捷键详解_相关技巧_

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网