初めまして、アキちゃんです。
備忘録をかねてブログを書くことにしました。
前回で通知機能の実装が完了しました。
今回は作業共有画面を作成しようと思います。
それでは早速・・・Let's BlazorServer+Radzen ♪
Lesson.1 下準備 ♪
作業共有画面を作るにあたって下準備をしたいと思います。
データの保存に関してですが実環境ではDatabaseを使用し保存するのが望ましいです。しかし今回はそこまで準備ができないためwwwrootの下にworksharesというフォルダを作成しそこにテキスト形式で保存しようと思います。
各作業員の入力データを取得するためのServiceが必要なのでDataの下にWorkShares.cs、WorkShareService.csを作成します。
入力フォームが必要なのでPagesの下にWorkShare.razorを作成します。(Pages右クリック→追加(D)→Radzenコンポーネント)
前回までで作成していたユーザーのパスワードでは以下の注意画面が出てくると思います。
これはパスワードに"password"という漏洩リスクのあるものを使っているのが原因なのでData\LoinInfoService.csのパスワードを"akiword"に変更します。
new LoginInfo() {Id = 1, UserName = "saitou", Password = "akiword" },
new LoginInfo() {Id = 2, UserName = "yamada", Password = "akiword" },
new LoginInfo() {Id = 3, UserName = "tanaka", Password = "akiword" }
また追加したWorkShareServiceをProgram.csのServicesに登録します。
builder.Services.AddSingleton<WorkShareService>();
Lesson.2 HtmlEditorコンポーネント ♪
今回の入力フォームはHtmlEditorコンポーネントを使用しようと思います。
Lesson.3 入力フォーム(画面)作成 ♪
Lesson.1で追加したWorkShare.razorを入力フォームとするためPage\WorkShare.razorを開き既存のコードをすべて消し以下コードを貼り付けます。
@page "/workshare"
@using Radzen
@using Radzen.Blazor
<div class="col-12" style="height:5%;">
<RadzenButton Text="読込" Icon="refresh" Click=@Read_Click></RadzenButton>
<RadzenButton Text="保存" Icon="save_alt" Click=@Save_Click></RadzenButton>
</div>
<RadzenHtmlEditor @bind-Value=@value class="w-100" style="height:95%;font-family:Source Han Code JP;">
<RadzenHtmlEditorUndo />
<RadzenHtmlEditorRedo />
<RadzenHtmlEditorSeparator />
<RadzenHtmlEditorFontSize />
<RadzenHtmlEditorColor />
<RadzenHtmlEditorBackground />
<RadzenHtmlEditorCustomTool>
<Template Context="editor">
<RadzenButton Icon=title Style="color:red; background-color:transparent;" Click=@(args => OnExecute("UpdateRedFormat",editor))></RadzenButton>
</Template>
</RadzenHtmlEditorCustomTool>
<RadzenHtmlEditorCustomTool>
<Template Context="editor">
<RadzenButton Icon=title Style="color:blue; background-color:transparent;" Click=@(args => OnExecute("UpdateBlueFormat",editor))></RadzenButton>
</Template>
</RadzenHtmlEditorCustomTool>
<RadzenHtmlEditorCustomTool>
<Template Context="editor">
<RadzenButton Icon=title Style="color:black; background-color:transparent;" Click=@(args => OnExecute("UpdateBlackFormat",editor))></RadzenButton>
</Template>
</RadzenHtmlEditorCustomTool>
<RadzenHtmlEditorRemoveFormat />
<RadzenHtmlEditorSeparator />
<RadzenHtmlEditorBold />
<RadzenHtmlEditorItalic />
<RadzenHtmlEditorUnderline />
<RadzenHtmlEditorStrikeThrough />
<RadzenHtmlEditorSeparator />
<RadzenHtmlEditorAlignLeft />
<RadzenHtmlEditorAlignCenter />
<RadzenHtmlEditorAlignRight />
<RadzenHtmlEditorJustify />
<RadzenHtmlEditorSeparator />
</RadzenHtmlEditor>
@code {
string value = string.Empty;
async Task Read_Click(){
}
async Task Save_Click(){
}
async Task OnExecute(string type, RadzenHtmlEditor editor)
{
if (type == "UpdateRedFormat")
{
await editor.ExecuteCommandAsync(HtmlEditorCommands.Color, $"rgba(255,0,0,100)");
}
else if (type == "UpdateBlueFormat")
{
await editor.ExecuteCommandAsync(HtmlEditorCommands.Color, $"rgba(0,0,255,100)");
}
else if (type == "UpdateBlackFormat")
{
await editor.ExecuteCommandAsync(HtmlEditorCommands.Color, $"rgba(0,0,0,100)");
}
}
}
Shared\MainLayout.razorを開き以下コードを追記します。
<RadzenPanelMenuItem Icon="" Text="作業共有" Path="/workshare">
</RadzenPanelMenuItem>
ここで一旦実行をするとログイン後作業共有から入力画面に移動できるようになってると思います。
Lesson.4 入力フォーム(ルーティング)作成 ♪
Lesson.3までで入力画面を表示できるようにしました。
ですが、今回は作業共有が目的なので他の人のデータが見れる必要があります。
作業共有からすべてのユーザーの入力画面に遷移できるように以下の修正を加えます。
Shared/MainLayout.razor
<RadzenPanelMenuItem Icon="" Text="作業共有">
@foreach (var i in allUser)
{
<RadzenPanelMenuItem Text=@i.UserName Path=@($"workshare/{i.Id.ToString()}/{loginUser.Id.ToString()}")></RadzenPanelMenuItem>
}
</RadzenPanelMenuItem>
</ChildContent>
</RadzenPanelMenu>
</ChildContent>
</RadzenSidebar>
<RadzenFooter>
<ChildContent>
<RadzenLabel Text="BlazorServerApp, Copyright Ⓒ 2022">
</RadzenLabel>
</ChildContent>
</RadzenFooter>
</ChildContent>
</RadzenLayout>
@code {
bool IsLogin = true;
IList<LoginInfo> allUser = new List<LoginInfo>();
LoginInfo loginUser = new LoginInfo();
protected override async Task OnInitializedAsync()
{
allUser = await LoginInfoService.GetLoginInfoAsync();
}
async Task OnLogin(LoginArgs args)
{
var getUser = allUser.Where(x => x.UserName == args.Username && x.Password == args.Password);
if (getUser.Any())
{
// ユーザーが取得できたためLogin
IsLogin = false;
ShowNotification(NotificationSeverity.Success, "ログイン成功", "ログインに成功しました。");
loginUser = getUser.ToList()[0];
StateHasChanged();
}
else
{
// ユーザーが取得できなかったためNG
ShowNotification(NotificationSeverity.Error, "ログイン失敗", "ログインに失敗しました。");
}
}
上記の変更でみそなのは一番上の変更の記述で、BlazorではHtmlにC#での記述を混ぜることができます。
なので以下の記述は
@foreach (var i in allUser)
{
<RadzenPanelMenuItem Text=@i.UserName Path=@($"workshare/{i.Id.ToString()}/{loginUser.Id.ToString()}")></RadzenPanelMenuItem>
}
OnInitializedAsyncで取得した全てのユーザーへのRadzenPanelMenuItemとクリックしのPathを設定しています。
上記の状態で実行をすると作業共有がDropDownできるようになっておりLoginInfoで登録している3人の名前が確認できるとおもいます。
ですが、この状態でクリックしてもLogin画面に戻されてしまうと思います。これは受け手側のフォームが対応できていないからです。
なのでWorkShare.razorにも修正を加えます。
ソース上部にある@page "/workshare"を以下のように修正します。
@page "/workshare/{userId}/{loginId}"
@codeを以下のように修正します。
@code {
string value = string.Empty;
[Parameter]
public string? loginId { get; set; }
[Parameter]
public string? userId { get; set; }
async Task Read_Click()
{
}
async Task Save_Click()
{
}
async Task OnExecute(string type, RadzenHtmlEditor editor)
{
if (type == "UpdateRedFormat")
{
await editor.ExecuteCommandAsync(HtmlEditorCommands.Color, $"rgba(255,0,0,100)");
}
else if (type == "UpdateBlueFormat")
{
await editor.ExecuteCommandAsync(HtmlEditorCommands.Color, $"rgba(0,0,255,100)");
}
else if (type == "UpdateBlackFormat")
{
await editor.ExecuteCommandAsync(HtmlEditorCommands.Color, $"rgba(0,0,0,100)");
}
}
}
上記でやっているのはpathに与えられた文字列を動的に取得しその値を[Parameter]で設定してある同名変数に格納するようにしています。(表現としてはbindの方が正しいかもしれません)
ここまできて実行をすると・・・
名前を選択して入力フォームに遷移できるようになりましたね！
Lesson.5 あとがき ♪
今回は画面までしかできませんでした。
次回更新でデータ読込から保存を実装し完成させようと思います。
それでは次回更新でまた！
