聊聊 Blazor 里 Radzen 6.0.0
最近、プロジェクト Radzen が 5.x から 6.0.0 になりました。
アップグレード自体はスムーズですが、重大な変更は不便です。見つけたら、公式コンポーネントもいくつか見つかりました。
書くたびに、文書を裏返し、パラメーターを推測する必要があります。そうすれば、心を持ちます。
今日のレセプション社は、私たちの承認を開始する予定ではなく、最新の会議を行っています。
1. RadzenDataGrid: 分页電影「假联動」
まず、最も一般的なエレクトロニクス DataGrid から起動します。
RadzenDataGrid 全体的には実際には悪くなく、機能、パフォーマンスも優れています。DataGrid メソッドをカスタマイズする。
シナリオは次のとおりです。テーブルの上部に検索ボックスを追加し、下部がテーブル、下部が分割ページになります。
按全用 Blazor 思路の思路、分器が完了しました、それぞれの動作は DataGrid のダウンロードのパラメータです、実行就新了对吧?
Radzen はありません。
你得使生写：
...
- grid;
int pageIndex;
int pageSize = 10;
int totalCount;
void OnPageChanged(int newPageIndex)
{
pageIndex = newPageIndex;
grid.FirstPage(); // 等等，这不是第一页吗？
}
}
問題がわかりましたか?
RadzenPager の PageChanged イベントは、新しいページ コードを 1 つだけ提供しますが、DataGrid には問題がありません。 GoToPage(pageIndex) この方法です。 FirstPage()、NextPage()、PrevPage()、LastPage() この4つの方法が含まれています。
5 番目にジャンプしますか? 直接的な方法はありません。手動で設定する必要があります。 grid.PageIndex 次に調整します grid.Reload()。
⚠️ 别手在哪： Pager コンポーネントと DataGrid コンポーネントは「假联動」—電影微一个、実際には各チューブのステータスです。
私の解決策は、ドライコンポーネント RadzenPager は完全に書き込み可能であり、DataGrid は NumberLoadData のレンダリングのみを担当します。
逆にもっと清爽。
2. RadzenDialog: 玄学に渡すパラメータ
DialogService は Radzen の機能の 1 つです。
松窗属师を開き、その中にいくつかのパラメータを渡すと、ユーザーは操作を完了して結果、つまりこのモードに戻ることができます。
ダイアログ ボックスを開くコードは次のとおりです。
var result = await DialogService.OpenAsync(
"编辑用户",
new Dictionary
{
{ "UserId", userId },
{ "UserName", userName },
{ "IsAdmin", isAdmin }
});
それから弹窗设计那边用 [Parameter] 受け取る：
// EditUserDialog.razor
[Parameter]
public int UserId { get; set; }
[Parameter]
public string UserName { get; set; }
[Parameter]
public bool IsAdmin { get; set; }
問題が発生しました。
重要な辞書は、電気およびテレビのパラメータ名です。 漥错了不可有名生老，電影不是报错，是パラメータパス不老，值是默耂的。
你下載半天，电影电影是 "UserID" 大写了D，而设计里是 UserId。
さらに隠された問題もある——パラメータは OnInitialized の後に設定されます。
OnInitialized の場合、UserId の削除後のプロパティは 0 です。 今回はパラメータが入力されていないため、OnParametersSetAsync に書き込まれます。
この動作は、通常の Blazor コンポーネントと同じではありません。通常のコンポーネントのパラメータは OnInitialized の前に設定され、Dialog Service はコンポーネントの最初のインスタンスとして作成され、パラメータが設定されます。
⚠️ 别手在哪：
Dictionaryさらに、機械と標準機械と標準肉眼コンポーネントが一致しない場合に設定されるパラメータは、初めて基本的な肉眼で行われます。
私の現在の実践は、各スプリングウィンドウコンポーネントに静的Openメソッドを与え、パラメータをラップすることです。
public static async Task Open(
DialogService dialogService,
int userId,
string userName,
bool isAdmin)
{
return await dialogService.OpenAsync(
"编辑用户",
new Dictionary
{
[nameof(UserId)] = userId,
[nameof(UserName)] = userName,
[nameof(IsAdmin)] = isAdmin
});
}
用 nameof 少なくともスペルミスがあり、ユーザーがプロンプトを入力したこともあります。
3. RadzenUpload: イベント电影反直觉
このコンポーネントをファイルアップロードしてください。Radzen 里は最も迷惑な人物の 1 人だと思います。
先述の最も基本的なシナリオ: ユーザーがファイルを選択し、ファイルの内容を読み出すか、それを API に渡します。これは非常に一般的な要件ですよね?
RadzenUpload の使用法：を参照してください。
見た目は普通です。URLはアップロードアドレス、イベント回论性感を指定します。
しかし問題は、このコンポーネントは「自動アップロード」です。—— 電影一個のファイル、電影宛に URL を発行しました。
ユーザーにファイルを選択させたい場合は、一度プレビューし、再度確認ボタンにチェックを入れてからアップロードしてください。
残念ながら、ダウンロード マシンはありません。最新の手順で URL を空文字にし、イベント内の自動処理ドキュメントを変更して、手動でアップロードします。
最も完全なものは OnChange イベントのパラメーターです。
void OnUploadChange(UploadChangeEventArgs args)
{
foreach (var file in args.Files)
{
// file.Name 文件名
// file.Size 文件大小
// 想拿到文件内容？没有 Stream，也没有 byte[]
// 你只能拿到文件名和大小
}
}
对、错は見ません。OnChange にはドキュメント コンテンツがありません。
想读文件の内容?選択肢は 2 つあります:
1 つは、JS を使用した相互正解ハンドマシンのファイル API の削除です。2 つは、後端からの戻り値である OnComplete イベントなどです。
ただし、OnComplete はアップロードが完了した後にトリガーされ、ファイルはすでに送信され、プレビューされています。
⚠️ 别手在哪： このコンポーネントは完全自動モードになるように設計されており、ファイルのコンテンツを読み取るための API は提供されません。
私は今、プロジェクトにファイルをアップロードしました。干支不用 RadzenUpload了。用原生的
外観上層1層Radzenのハンドマシンが動作します。
4. RadzenScheduler: データバインディング
スケジューラーは Radzen に匹敵する強力なコンポーネントであり、その機能は本当に充実しています。日次ビュー、週次ビュー、月次ビュー、ドラッグ アンド ドロップによる調整時間、リソースのグループ化……などがあります。
しかし、そのデータバインディング方法はとても気に入っています。
通常の Blazor コンポーネントのデータ バインディングは次のようなものです。リストを指定すると、このリストが表示されます。リストが変わるとリストも変わります。
RadzenScheduler 不了玩。 2 つのモードがあります:
モード 1: データをグループに直接転送します。 このモードでは、スケジューラはすべてのデータを一度にロードし、それをフィルタリングしてクライアント自体に表示します。
モード 2: LoadData を使用します。 このコンポーネントは現在のビューの現在時刻を示し、対応する時間範囲内のデータを確認したり、対応する時間範囲内のデータを確認したりできます。
モード 2 の電気効果では、これらのボックスが必要になります。你没法はデータを自動的に更新します。
...
@code {
RadzenScheduler scheduler;
async Task LoadSchedulerData(
SchedulerLoadDataArgs args)
{
var data = await api.GetAppointments(
args.Start, args.End);
args.Data = data;
}
void RefreshData()
{
// 想刷新？没有 Reload 方法
// scheduler.Reload() ← 不存在
// 你得这么干：
scheduler.SelectedDate = scheduler.SelectedDate.AddDays(1);
scheduler.SelectedDate = scheduler.SelectedDate.AddDays(-1);
// 改一下再改回去，触发重新加载
}
}
データを更新して、「晃一下」SelectedDate を取得し、日々の新しい会議の「晃一下」SelectedDate LoadData を設定します。
公式フォーラムのスタッフが教えてくれた解決策です。
6.0.0も同じ
⚠️ 别手在哪： LoadData モードは公開されていません Reload メソッド、開発者はこの種のハックを使用して更新をトリガーする必要があります。
私の対処方法は、データキャッシュを自分で保持し、キャッシュ里拿からデータをロードし、再度キャッシュを更新する必要がある「晃一个」です。
5. RadzenHtmlEditor: 「半残」ステータス
富歌詞电影设计设计，我好了了久要不要放进来。
基本的な機能は実は同じなので、太字、斜体、リスト、リンク、画像、ずっと使えます。
デフォルトのツールバーは次のようになります。
一行分析、安全打印全体は安全室です。
ただし、ボタンの一部だけを予約したい場合はどうすればよいですか?それとも 1 つのボタンの順序を調整したいですか?
必要なボタンをすべて手動で 1 つずつ取得します。
これは、ポイントを使用して実行できます。
本物は——カスタマイズされたボタンを追加したいと思いますか? 可能ですが、簡単に書き込むことができます。
RadzenHtmlEditorButton があり、ボタンをカスタマイズしてクリックできます。ボタンのアイコンはホバーになっており、内蔵ボタンとは効果が異なります。
さらに細かい問題は、編集者の身長です。
デフォルトのエディターの高さはコンテンツを着いて移動します。これはシナリオによっては問題になりませんが、エディターの高さを固定させたい場合は、コンテンツをスクロールしますか?
Height パラメーターがないことがわかります。高さの設定がされていません。
最後になりますが、CSS は内部スタイルをカバーします。
⚠️ 别手在哪： デフォルトモードではボックスを開けて使用しますが、カスタマイズが必要になると「フルマニュアル」モードに入ります。
6. 黒じゃないほうがいい
あまりにも多くのことを言う「坏句话」，说公道话。
Radzen は Blazor のエコロジカル コンポーネントの 1 つであり、最も量が多く、最も包括的なオープン ソース コンポーネント ライブラリの 1 つであり、この点については議論の余地はありません。
そして、それは真のソース、MIT 契約、ダウンロード バージョンのオプションはありません。この点は譲渡する必要があります。
しかし、「能用」と「好用」の間には、まだ距離があります。
上記のいくつかのコンポーネントは使用できず、API 設計の全体的な感覚は 1 ステップ未満です。
これらは大きいものもあれば大きくないものもありますが、いくつかのメソッドやパラメーターと一緒に追加できます。しかし、それらが欠けている場合、開発者は 1 回ラップアラウンドし、1 回ハッキングし、1 回パッケージ化する必要があります。
多数を減らし、プロジェクトには「適用可能な Radzen」のコードが複数あります。
一言でまとめると： API Radzen パッケージ ライブラリは大きいですが、一部のコンポーネントのデザインは「夫用就行」であり、「エレガント好用」とはギャップがあります。
もちろん、上記は私の個人的な経験です。
異なる意見がある場合、または姿勢をさらに巧みに使用している場合は、コメント欄を歓迎します。
結局のところ、Blazor には大きなサークルはなく、常に良いものです。
著者について
コーディング、ERP / 製造業システム開発、6 年間、C# / .NET / Blazor を上書き。
ブログ: | 正式番号：CSharp 简介营
