Blazor(16)-輸入元件(2)

Calendar

日歷元件。type指定為date時，僅能輸入「年/月/日」。type宣告為datetime-local時，則可輸入「年/月/日時:分」。

<p class="m-0">留言時間</p>
<input type="datetime-local" @bind=Preview.CreateTime />
            
@code
{
    public CommentModel Preview { get; set; } = new();

    public class CommentModel
    {
        ...
        public DateTime CreateTime { get; set; } = DateTime.Now;
    }
}

CheckBox

核取方塊，用<input>元件，指定type="checkbox"。以bool來控制輸入選取，需要用label將input及文字元素包起來。若沒使用label，只能選取方塊進行選取，而且如果使用自動翻譯等會調整版面的功能，有機會會跑版。使用label包起來的話，直接點文字即可選取，並且能夠固定元件排版。

<label>
    <input type="checkbox" @bind=Preview.Notify />
    <span>回覆通知</span>
</label>
            
@code
{
    public CommentModel Preview { get; set; } = new();

    public class CommentModel
    {
        ...
        public bool Notify { get; set; } = false;
    }
}

InputFile

檔案上傳元件。<InputFile>元件。轉譯成Html會變成<input type="file">。用OnChange來控制檔案變更，方法須傳入InputFileChangeEventArgs，其中包含欲上傳的檔案。同時也能用accept來控制可上傳的附檔名，多種附檔名以「,」分隔。

<p class="m-0">上傳附件</p>
<InputFile OnChange="FileChangeHandler" accept=".txt,.cs"></InputFile>

@code
{
    public CommentModel Preview { get; set; } = new();
    ...
    protected async Task FileChangeHandler(InputFileChangeEventArgs e)
    {
        IBrowserFile file = e.File;

        byte[] bytes = new byte[file.Size];
        await file.OpenReadStream(maxAllowedSize: file.Size + 1).ReadAsync(bytes);

        Preview.Bytes = bytes;
    }

    public class CommentModel
    {
        ...
        public string Subject { get; set; } = null!;
    }
}

DropdownList

下拉式選單，html的<select>元件。在Html裡叫select，習慣asp.net的朋友會習慣叫dropdownlist。

<select @bind="Preview.Subject">
    <option value="文章錯誤">文章錯誤</option>
    <option value="程式交流">程式交流</option>
</select>
            
@code
{
    public CommentModel Preview { get; set; } = new();

    public class CommentModel
    {
        ...
        public string Subject { get; set; } = "文章錯誤";
    }
}

RadioButton

單選鈕，用<input>元件，指定type="radio"。與CheckBox相同，用label將按鈕及文字元素包起來後，即可點選文字選取。若是要將多個單選鈕群組起來，只要將name屬性設定為相同名稱即可。

<label>
    <label><input type="radio" name="anonymous" @onchange="@(() => SetAnonymous(true))" checked="@Preview.Anonymous.Equals(true)" />匿名</label>
    <label><input type="radio" name="anonymous" @onchange="@(() => SetAnonymous(false))" checked="@Preview.Anonymous.Equals(false)" />顯示姓名</label>
</label>

@code
{
    public CommentModel Preview { get; set; } = new();
    ...
    protected void SetAnonymous(bool anonymous) => Preview.Anonymous = anonymous;
    ...
    public class CommentModel
    {
        ...
        public bool Anonymous { get; set; } = false;
    }
}

調整留言板

最後把留言輸入資料放回留言板，這樣留言版基本功能就都完成了。

@foreach (var comment in Comments)
{
    <div class="comment-content" style="background-color: #f2f2f2">
        <p class="m-0">主旨：@comment.Subject</p>
        <p class ="m-1" style="font-size: 0.7em">@comment.CreateTime</p>
        @if (comment.Anonymous)
        {
            <p class="m-1">Anonymous</p>
        }
        else
        {
            <p class="m-1">@comment.Name</p>
        }
        <p class="m-1">@comment.Content</p>
    </div>
}

Comment.razor

最後執行結果：

本文介紹的輸入元件，blazor框架本身也都有提供內建的元件可以使用。但筆者比較習慣使用html搭配bind綁定資料的寫法，因此這邊大多都用這個寫法來做為範例。後續有機會的話在向各位介紹blazor內建元件的寫法。