《进击吧！Blazor！》第一章 5.组件开发 (4)

EventCallback<TaskDto> OnInserted 不同场景下插入后需要做的事情可能不同，所以通过这个事件由外部进行处理。
Func<TaskDto> NewTaskFunc 不同场景下对TaskDto初始化要求不同，所以用这个函数来调用初始化。
RenderFragment<TaskDto> ChildContent 使用模板实现额外的表单进行扩展输入内容。

重要任务

创建Star.razor文件作为重要任务的页面文件，代码如下

@page "/star" <PageHeader Title="@("重要的任务")" Subtitle="@($"数量：{taskDtos?.Count}")"></PageHeader> <Spin Spinning="@isLoading"> @foreach (var item in taskDtos) { <TaskItem Item="item" OnFinish="OnFinish" OnCard="OnCardClick" OnDel="OnDel" OnStar="OnStar" ShowStar="false"> </TaskItem> } <NewTask OnInserted="OnInsert" NewTaskFunc="() => new TaskDto() { PlanTime = DateTime.Now.Date, IsImportant = true }"></NewTask> </Spin> public partial class Star { // 1、 列出当天的所有代办工作 [Inject] public HttpClient Http { get; set; } bool isLoading = true; private List<TaskDto> taskDtos = new List<TaskDto>(); protected async override Task OnInitializedAsync() { isLoading = true; taskDtos = await Http.GetFromJsonAsync<List<TaskDto>>("api/Task/GetStarTask"); isLoading = false; await base.OnInitializedAsync(); } //2、 添加代办 public MessageService MsgSrv { get; set; } async void OnInsert(TaskDto item) { taskDtos.Add(item); } //3、 编辑抽屉 [Inject] public TaskDetailServices TaskSrv { get; set; } async void OnCardClick(TaskDto task) { TaskSrv.EditTask(task, taskDtos); await InvokeAsync(StateHasChanged); } //4、 修改重要程度 private async void OnStar(TaskDto task) { var req = new SetImportantReq() { TaskId = task.TaskId, IsImportant = !task.IsImportant, }; var result = await Http.PostAsJsonAsync<SetImportantReq>("api/Task/SetImportant", req); if (result.IsSuccessStatusCode) { task.IsImportant = req.IsImportant; StateHasChanged(); } } //5、 修改完成与否 private async void OnFinish(TaskDto task) { var req = new SetFinishReq() { TaskId = task.TaskId, IsFinish = !task.IsFinish, }; var result = await Http.PostAsJsonAsync<SetFinishReq>("api/Task/SetFinish", req); if (result.IsSuccessStatusCode) { task.IsFinish = req.IsFinish; StateHasChanged(); } } //6、 删除代办 [Inject] public ConfirmService ConfirmSrv { get; set; } public async Task OnDel(TaskDto task) { if (await ConfirmSrv.Show($"是否删除任务 {task.Title}", "删除", ConfirmButtons.YesNo, ConfirmIcon.Info) == ConfirmResult.Yes) { taskDtos.Remove(task); } } }

TaskItem
OnFinish="OnFinish" OnCard="OnCardClick" OnDel="OnDel" OnStar="OnStar" 绑定不同的操作函数

　此处完全可以使用上一节介绍服务将这些方法提取到一个独立的服务中，这里我就偷懒不改了。

ShowStar="false" 不显示重要图标

NewTask
NewTaskFunc="() => new TaskDto() { PlanTime = DateTime.Now.Date, IsImportant = true }" 重要初始化时默认将IsImportant设置成true

我的一天

我们将“我的一天”也进行适当改造

@page "/today" <PageHeader Title="@("我的一天")" Subtitle="@DateTime.Now.ToString("yyyy年MM月dd日")"></PageHeader> <Spin Spinning="@isLoading"> @foreach (var item in taskDtos) { <TaskItem @key="item.TaskId" Item="item" OnFinish="OnFinish" OnCard="OnCardClick" OnDel="OnDel" OnStar="OnStar"> <TitleTemplate> <AntDesign.Text Strongtext-decoration: line-through;color:silver;":"")"> @item.Title</AntDesign.Text> <br /> <AntDesign.Text Type="@TextElementType.Secondary"> @item.Description </AntDesign.Text> </TitleTemplate> </TaskItem> } <NewTask OnInserted="OnInsert" NewTaskFunc="()=> new TaskDto() {PlanTime=DateTime.Now.Date }"> <ChildContent Context="newTask"> <RadioGroup @bind-Value="newTask.IsImportant"> <Radio RadioButton Value="true">重要</Radio> <Radio RadioButton Value="false">普通</Radio> </RadioGroup> </ChildContent> </NewTask> </Spin>

C#代码因为变化很小，所以不再此处贴出