Dotnet9

联系请关注微信公众号:Dotnet9

文章

(10/30)大家一起学Blazor:Blog and Posts

StrayaWorker 2021-12-14 23:31:22 Blazor 26
现在我们有一个可以输入日志的界面了,但日志就是每天都要写的意思,只有一篇怎么够呢?我们来加上blog。

现在我们有一个可以输入日志的界面了,但日志就是每天都要写的意思,只有一篇怎么够呢?我们来加上blog。

首先新增BlogModel类,里面很简单只有4个属性,分别为Id、名称、日志列表及新增时间。

using System.ComponentModel.DataAnnotations;

namespace BlazorServer.Models;

public class BlogModel
{
	[Key] public int Id { get; set; }

	[MaxLength(10, ErrorMessage = "博客名称太长")]
	public string? Name { get; set; }

	public List<PostModel>? Posts { get; set; }

	public DateTime CreateDateTime { get; set; }
}

接着将Post.razor@page指示词跟EditForm底下的Expander案例移除,打开launchSettings.jsonlaunchUrl改为Blog,因为我们的首页要改成Blog。

再把PostBaseOnInitializedAsync中指派值给Post的部分移除,Post上面加入Parameter,表示要从外部传进来。

最后新增BlogBase.csBlog.razor,可以看到BlogBase.csOnInitializedAsync调用一个方法LoadData,实体化一个Blog,里面的Posts有4条数据。

using BlazorServer.Models;
using Microsoft.AspNetCore.Components;

namespace BlazorServer.Pages;

public class BlogBase : ComponentBase
{
	public BlogModel? Blog { get; set; }

	protected override Task OnInitializedAsync()
	{
		LoadData();
		return base.OnInitializedAsync();
	}

	private void LoadData()
	{
		Blog = new BlogModel
		{
			Id = 1,
			Name = "我的博客",
			Posts = new List<PostModel>
			{
				new PostModel
					{ Id = 1, Title = "标题1", Content = "内容1", CreateDateTime = new(2021, 12, 11, 10, 20, 50) },
				new PostModel { Id = 1, Title = "标题2", Content = "内容2", CreateDateTime = new(2021, 12, 12, 9, 13, 15) },
				new PostModel
					{ Id = 1, Title = "标题3", Content = "内容3", CreateDateTime = new(2021, 12, 13, 20, 31, 26) },
				new PostModel { Id = 1, Title = "标题4", Content = "内容4", CreateDateTime = new(2021, 12, 14, 22, 15, 27) }
			},
			CreateDateTime = new(2021, 12, 14, 23, 46, 59)
		};
	}
}

Blog.razor则是如下图一样,要记住Blog==null的判断很重要,因为真实的数据大都会用异步方式传递,所以取得数据的速度会比画面渲染的时间晚,若没有这样判断,很容易发生Blazor找不到该数据而报错的状况。

另外Post.razor也做了相应调整,可以看到画面呈现了博客名称及4条日志,这样一来我们就完成了简单的博客雏型了。

Post.razor

@inherits PostBase

<div class="form-group">
    <label for="CreateDateTime">创建时间</label>
    <input type="text" @bind="Post!.CreateDateTime" @bind:format="yyyy-MM-dd HH:mm:ss" id="CreateDateTime" class="form-control"/>
</div>
<EditForm EditContext="EditContext">
    <DataAnnotationsValidator/>
    <ValidationSummary/>
    @*<InputNumber @bind-Value="Post!.Id" class="form-control"></InputNumber>*@
    <div class="form-group">
        <label for="title">标题</label>
        <input type="text" @bind="Post!.Title" @bind:event="oninput" id="title" class="form-control"/>
    </div>

    <div class="form-group">
        <label for="content">内容</label>
        <InputTextArea @bind-Value="Post!.Content" id="content" class="form-control" rows="8"></InputTextArea>
    </div>
    <MyButton ButtonType="submit" ButtonClass="btn btn-info" ButtonName="Submit"></MyButton>
    <MyButton ButtonType="reset" ButtonClass="btn btn-danger" ButtonName="Reset"></MyButton>
</EditForm>

引用:

  1. Employee list blazor component

注:本文代码通过 .NET 6 + Visual Studio 2022重构,可点击原文链接与重构后代码比较学习,谢谢阅读,支持原作者

留言

回复