winform中也可以這樣做數(shù)據(jù)展示?
1、前言
在做winform開發(fā)的過程中，經(jīng)常需要做數(shù)據(jù)展示的功能，之前一直使用的是gridcontrol控件，今天想通過一個示例，跟大家介紹一下如何在winform blazor hybrid中使用ant design blazor中的table組件做數(shù)據(jù)展示。
2、效果
先來看看實現(xiàn)的效果：
3、具體實現(xiàn)
怎么在winform blazor hybrid項目中使用Ant Design Blazor可以看我上篇文章。
引入Ant Design Blazor的Table組件:
<Table TItem="IData" DataSource="@datas"
OnRowClick="OnRowClick"
其中：
TItem表示DataSource中單個項的類型，從 0.16.0 開始，Table 已支持普通類、record、接口和抽象類作為 DataSource 的類型。
這里我的TItem設(shè)置為一個叫做IData的接口，它的定義如下：
public interface IData
{
[DisplayName("站名")]
public string? StationName { get; set; }
[DisplayName("天氣")]
public string? Weather { get; set; }
[DisplayName("最低溫度/℃")]
public string? Tem_Low { get; set; }
[DisplayName("最高溫度/℃")]
public string? Tem_High { get; set; }
[DisplayName("風(fēng)力風(fēng)向")]
public string? Wind { get; set; }
[DisplayName("最低可見度/km")]
public string? Visibility_Low { get; set; }
[DisplayName("最高可見度/km")]
public string? Visibility_High { get; set; }
[DisplayName("霧")]
public string? Fog { get; set; }
[DisplayName("霾")]
public string? Haze { get; set; }
[DisplayName("日期")]
public DateTime? Date { get; set; }
}
其中的[DisplayName("站名")]是一個屬性或成員的元數(shù)據(jù)注解，用于提供一個更友好的顯示名稱。Ant Design Blazor會自動使用這個來顯示名稱。
DataSource表示表格的數(shù)據(jù)源，類型為IEnumerable：
這里DataSource="@datas"表示我將一個名為 datas 的數(shù)據(jù)源分配給Table組件的 DataSource 屬性。
datas的定義如下：
WeatherData[] datas = Array.Empty<WeatherData>();
WeatherData是自定義類，實現(xiàn)了IData接口：
public class WeatherData : IData
{
[SugarColumn(IsPrimaryKey = true, IsIdentity = true)]
public int Id { get; set; }
public string? StationName { get; set; }
public string? Weather { get; set; }
public string? Tem_Low { get; set; }
public string? Tem_High { get; set; }
public string? Wind { get; set; }
public string? Visibility_Low { get; set; }
public string? Visibility_High { get; set; }
public string? Fog { get; set; }
public string? Haze { get; set; }
public DateTime? Date { get; set; }
}
}
看到這里大家可能會有個疑問，那就是剛剛的TItem表示DataSource中單個項的類型，但是現(xiàn)在這里DataSource是WeatherData[]，那么單個項的類型是WeatherData而不是剛剛設(shè)置的IData，這樣可以嗎？
通過以下這個簡單的例子，可能你就會解開疑惑：
public interface IFlyable
{
void Fly();
}
public class Bird : IFlyable
{
public void Fly()
{
Console.WriteLine("The bird is flying.");
}
?
}
class Program
{
// 主方法
static void Main()
{
Bird myBird = new Bird();
IFlyable flyableObject = myBird; // 類型轉(zhuǎn)換
?
// 調(diào)用接口方法
flyableObject.Fly();
}
}
定義了一個IFlyable接口、一個Bird類，該類實現(xiàn)了IFlyable接口，在Main函數(shù)中，實例化了一個Bird類，然后該對象隱式轉(zhuǎn)換為接口類型，再通過接口調(diào)用實現(xiàn)類的方法，輸出結(jié)果為：
The bird is flying.
這說明C# 中當(dāng)一個類實現(xiàn)了一個接口時，該類的實例可以被隱式轉(zhuǎn)換為該接口類型。這里就是WeatherData會被隱式轉(zhuǎn)化為了IData。
DataSource也是一樣，雖然官方文檔上寫的類型是IEnumerable，但是我們這里確是WeatherData[]這樣也可以，也是因為Array實現(xiàn)了IEnumerable接口，如下所示：
OnRowClick表示行點擊事件，類型為EventCallback<RowData>，本例中實際上沒有用到。
在Blazor中，@ref 是一個用于在Blazor組件中引用HTML元素或組件實例的指令。通過使用 @ref，你可以在Blazor組件中獲取對DOM元素或子組件的引用，然后在代碼中進行操作或訪問其屬性和方法。
這里我在Table組件上添加了@ref="antTableRef"，在代碼區(qū)域添加了：
Table<IData>? antTableRef;
就成功引用了Table組件實例。
<PropertyColumn>表示屬性列，也就是要展示的列。它的Property屬性指定要綁定的屬性，類型為Expression<Func<TItem, TProp>>。
這里大家可能會有疑問，Expression<Func<TItem, TProp>>到底是啥呀？
Expression<Func<TItem, TProp>> 是C#中的一個表達式樹，用于表示一個參數(shù)為 TItem 類型且返回值為 TProp 類型的lambda表達式。
拆開來看，Expression<T> 是一個表示lambda表達式的樹狀結(jié)構(gòu)的類，其中 T 是委托類型。詳細學(xué)習(xí)，可以查看官方文檔：
Func<TItem, TProp> 是一個泛型委托類型，表示一個帶有一個輸入?yún)?shù)和一個輸出參數(shù)的方法，詳細學(xué)習(xí)，也可以查看官方文檔：
這里也通過一個簡單的例子進行說明：
Expression<Func<Person, string>> getNameExpression = person => person.Name;
getNameExpression表示一個Lambda表達式，一個什么樣的Lambda表達式呢？一個輸入?yún)?shù)類型為Person對應(yīng)這里的person、輸出類型為string對應(yīng)這里的person.Name的一個Lambda表達式。
所以代碼：
<PropertyColumn Property="c=>c.StationName">
</PropertyColumn>
就可以理解了，Property的類型是一個輸入?yún)?shù)類型為TItem這里TItem的類型就是IData、輸出類型為TProp這里TProp類型就是string的一個Lamda表達式c=>c.StationName。
理解了以上之后，我們看看這部分的代碼：
代碼如下：
<GridRow>
<Space>
<SpaceItem>
<Text Strong>開始日期：</Text>
</SpaceItem>
<SpaceItem>
<DatePicker TValue="DateTime?" Format="yyyy/MM/dd"
Mask="yyyy/dd/MM" Placeholder="@("yyyy/dd/MM")"
站名自動填充：
<AutoComplete
這個的實現(xiàn)，在上篇文章中已經(jīng)介紹了，這里就不再重復(fù)講了。
兩個日期選擇組件都使用了數(shù)據(jù)綁定：
<SpaceItem>
<DatePicker TValue="DateTime?" Format="yyyy/MM/dd"
Mask="yyyy/dd/MM" Placeholder="@("yyyy/dd/MM")"
其中：
TValue表示值的類型，這里設(shè)置為DateTime?。
@bind-Value進行數(shù)據(jù)綁定，將日期選擇組件的值與Date1和Date2綁定起來：
DateTime? Date1;
DateTime? Date2;
查詢按鈕：
<Button Type="@ButtonType.Primary" OnClick="QueryButton_Clicked">查詢</Button>
點擊事件代碼：
async void QueryButton_Clicked()
{
if (Date1 != null && Date2 != null && value != null)
{
var cofig = new MessageConfig()
{
Content = "正在更新中...",
Duration = 0
};
var task = _message.Loading(cofig);
var condition = new Condition();
condition.StartDate = (DateTime)Date1;
condition.EndDate = (DateTime)Date2;
condition.StationName = value;
datas = weatherServer.GetDataByCondition(condition).ToArray();
StateHasChanged();
task.Start();
}
else
{
await _message.Error("請查看開始日期、結(jié)束日期與站名是否都已選擇！！！");
}
}
當(dāng)條件成立時，創(chuàng)建Condition類型，寫入開始日期、結(jié)束日期和站名，Condition類的定義如下：
public class Condition
{
public DateTime StartDate{ get; set; }
public DateTime EndDate { get; set; }
public string? StationName { get; set; }
}
然后調(diào)用業(yè)務(wù)邏輯層的weatherServer中的GetDataByCondition方法：
datas = weatherServer.GetDataByCondition(condition).ToArray();
weatherServer中的GetDataByCondition方法如下：
public List<WeatherData> GetDataByCondition(Condition condition)
{
return dataService.GetDataByCondition(condition);
}
因為涉及到數(shù)據(jù)庫的讀寫，因此調(diào)用了數(shù)據(jù)庫訪問層中的dataService的GetDataByCondition方法。
數(shù)據(jù)庫訪問層中的dataService的GetDataByCondition方法如下：
public List<WeatherData> GetDataByCondition(Condition condition)
{
return db.Queryable<WeatherData>()
.Where(x => x.Date >= condition.StartDate &&
x.Date < condition.EndDate.AddDays(1) &&
x.StationName == condition.StationName).ToList();
}
當(dāng)重新查詢時：
StateHasChanged();
調(diào)用這個方法組件會進行更新。在Blazor中，StateHasChanged 是一個方法，用于通知Blazor框架重新渲染組件及其子組件。Blazor組件的UI渲染是基于組件的狀態(tài)（state）的，當(dāng)組件的狀態(tài)發(fā)生變化時，需要調(diào)用 StateHasChanged 方法來通知框架進行重新渲染。
var cofig = new MessageConfig()
{
Content = "正在更新中...",
Duration = 0
};
var task = _message.Loading(cofig);
task.Start();
是給用戶信息提示。
4、總結(jié)
以上通過一個完整的例子，說明了在winform中除了可以用girdcontrol做數(shù)據(jù)展示外也可以使用Ant Design Blazor中的Table做數(shù)據(jù)展示。
浙公網(wǎng)安備 33010602011771號