前⾔
⼤家好，我是开源项⽬ 主要开发者之⼀，如果你还不了解MASA Blazor，可以访问我们的 和博客 ⼀探究竟。简单来说，MASA Blazor 是⼀个基于 Material Design 设计语⾔的 Blazor 组件库，dotNET开发者只需或者甚⾄不需要懂得 javascript 就能开发⼀个企业级中后台系统。
我这次分享的主题是《使⽤MASA Blazor开发⼀个标准的查询表格页》，我会先从创建项⽬开始⼿撸⼀个没有任何技巧的查询表格页，然后我会分享⼀些技巧和封装的组件，实现快速开发。
⼿撸查询表格页
创建应⽤程序
关于如何安装MASA Blazor模板，请移步 。 1. ⾸先通过MASA Blazor模板默认的Server项⽬，项⽬命名为 MasaBlazorStandardTablePage。
dotnet new --install MASA.Template
dotnet new masab -o MasaBlazorStandardTablePage
2. 通过CLI运⾏应⽤程序，或直接通过vs启动项⽬。
cd MasaBlazorStandardTablePage多媒体教室录播
dotnet run
3. 启动成功后切换到 Fetch data 页⾯，此页⾯展⽰了⼀个简单的使⽤了 MDataTable 的表格。
⽀持单个查询条件和搜索
让我们从最简单的单个条件查询开始。
1. 修改 WeatherForecastService，将随机数据替换成死数据以便⽀持查询功能。下⾯的代码更新了数据来源和 GetForecastAsync 查询⽅
法。
smdaopublic class WeatherForecastService电子元件打标机
{
private readonly List<WeatherForecast> _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<WeatherForecast[]>GetForecastAsync()
{
IEnumerable<WeatherForecast> res = _data.AsQueryable();
return Task.FromResult(res.ToArray());
}
}
2. 同时修改 FetchData.razor，因为 WeatherForecastService.GetForecastAsync() 删除了 startDate ⼊参。
protected override async Task OnInitializedAsync()
{
await Task.Delay(1000);// 模拟真实环境，触发Loading效果
forecasts =await ForecastService.GetForecastAsync();// here
}
添加查询输⼊框和搜索按钮
1. 在 FetchData.razor 页⾯中的 <p> 标签下添加以下代码
<MRow Class="pb-3">
<MCol Cols="12">
<MTextField @bind-Value="summary"
Dense
HideDetails="@("auto")"
Label="Summary"
Outlined>
</MTextField>
</MCol>
<MCol Cols="12" Class="d-flex py-0 pb-3">
<MSpacer></MSpacer>
<MButton Color="primary" OnClick="OnSearch">搜索</MButton>
</MCol>
</MRow>
@code {
private string summary;
private async Task OnSearch()
{
forecasts =await ForecastService.GetForecastAsync(summary);
}
}
1. Line 3,17
定义了⼀个 string 类型的名为 summary 的变量，双向绑定给了 MTextField 组件。MTextFiled 除了 @bind-Value 属性⽤于设置双向绑定，其他属性的含义请阅读 。
2. Line 12
定义了⼀个搜索按钮，⽤于触发查询。
2. 修改 WeatherForecastService.GetForecastAsync ⽅法，增加 summary ⼊参，并⽀持查询。
public Task<WeatherForecast[]>GetForecastAsync(string? summary =null)
{
IEnumerable<WeatherForecast> res = _data.AsQueryable();
if(!string.IsNullOrEmpty(summary))
{
res = res.Where(item => item.Summary.Contains(summary));
}
return Task.FromResult(res.ToArray());
}
⽀持多个查询条件和重置
现在让我们再添加⼀个⾼温预警的选择框来查询不同⾼温预警状态的数据。 更新 WeatherForecastService 以⽀持根据⾼温预警筛选数据
public Task<WeatherForecast[]>GetForecastAsync(string? summary =null, WarningSigns? warningSigns =null) {
IEnumerable<WeatherForecast> 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());
}
增加⾼温预警选择框
1. 在 Data ⽬录下添加名为 WarningSigns 的枚举。
public enum WarningSigns
{
[Description("⾼温黄⾊预警 35℃")]
Yellow =1,
[Description("⾼温橙⾊预警 37℃")]
Orange,
[Description("⾼温红⾊预警 39℃")]
Red
}
2. 引⼊ Masa.Utils.Enums 包，此包提供的 GetEnumObjectList ⽅法能轻松的将枚举的 Description 和枚举值⽤于 MSelect 组件的
Items。
dotnet add package Masa.Utils.Enums
3. 更新 FetchData.razor。
<MRow Class="pb-3">
<MCol Cols="12" Sm="6">
<MTextField @bind-Value="@summary"
Label="Summary"
Dense
HideDetails="@("auto")"
Outlined>
</MTextField>
</MCol>
<MCol Cols="12" Sm="6">
<MSelect @bind-Value="warningSigns"
Items="@(Enum<WarningSigns>.GetEnumObjectList<WarningSigns>())"
ItemText="item => item.Name"
ItemValue="item => item.Value"
TValue="WarningSigns?"
TItem="EnumObject<WarningSigns>"
TItemValue="WarningSigns"
Label="⾼温警告"
Clearable
Dense
HideDetails="@("auto")"
Outlined>
</MSelect>
</MCol>
<MCol Cols="12" Class="d-flex py-0 pb-3">
<MSpacer></MSpacer>
<MButton Class="mr-2" OnClick="OnReset">重置</MButton>
<MButton Color="primary" OnClick="OnSearch">搜索</MButton>
</MCol>
</MRow>
@code {
private WarningSigns? warningSigns;
private Task OnReset()
运输皮带清扫器
{
summary =null;
warningSigns =null;
return OnSearch();
}
private async Task OnSearch()
{
forecasts =await ForecastService.GetForecastAsync(summary, warningSigns);
}
}
1. Line 2,10
通过设置 Sm="6" 可以让屏幕尺⼨⼤于768px时⼀⾏占两个 MCol ，实现 MTextField 和 MSelect 并排显⽰。
1. Line 11-23,33,44
第33⾏定义 warningSigns 变量⽤于接收 MSelect 选中的值，当然也可以通过设置值更新 MSelect 选中的值，只要设置了 @bind-
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议