iT邦幫忙

2022 iThome 鐵人賽

DAY 21
0
Modern Web

我與 Blazor 的 30 天系列 第 21

ASP.NET Core Blazor 系列 - 021 內建輸入元件(1)

  • 分享至 

  • xImage
  •  

前言

本篇文章同步發表於 個人部落格 Jim's Blog

今天介紹輸入類型的表單,熟悉各種內建的元件可以讓在做表單時不用自己造輪子,使用現成的元件,如果遇到既有的元件無法解決需求那我們再來自己製作元件

InputCheckbox

單選的勾選,用來處理 bool 值的輸入元件,經過轉譯後為 <input type="checkbox">

@page "/InputSample"
<EditForm Model="@inputSampleModel">
    <label>勾選</label>
    <InputCheckbox @bind-Value="inputSampleModel.IsCheck"></InputCheckbox>
</EditForm>

@code {
    private InputSampleModel inputSampleModel = new();
    class InputSampleModel
    {
        public bool IsCheck{ get; set; }
    }
}


勾選的時候 inputSampleModel.IsCheck 就會變成 true 反之亦然

InputDate

日期元件,支援 DataTimeDateTimeOffset 兩個型別,經過轉譯後為 <input type="date">

@page "/InputSample"
<EditForm Model="@inputSampleModel">
    <label>日期元件(DateTime)</label>
    <InputDate @bind-Value="inputSampleModel.DateTime"></InputDate>
    <br>
    <label>日期元件(DateTimeOffset)</label>
    <InputDate @bind-Value="inputSampleModel.DateTimeOffset"></InputDate>
</EditForm>

@code {
    private InputSampleModel inputSampleModel = new();
    class InputSampleModel
    {
        public DateTime DateTime{ get; set; }
        public DateTimeOffset DateTimeOffset { get; set; }
    }
}

InputFile

檔案上傳元件經過轉譯後為 <input type="file">,可以到第11篇去看一下詳細的做法

@page "/InputSample"
<EditForm>
    <label>檔案上傳</label>
    <InputFile OnChange="@LoadFiles" multiple ></InputFile>
</EditForm>

@code {
    private InputSampleModel inputSampleModel = new();
    class InputSampleModel
    {
        public List<IBrowserFile> loadedFiles { get; set; }
    }

    private async Task LoadFiles(InputFileChangeEventArgs e)
    {

        foreach (var file in e.GetMultipleFiles())
        {
            inputSampleModel.loadedFiles.Add(file);
        }
    }
}

InputNumber

用來處理數字的輸入,如果輸入的值不可以解析就會被便認為錯誤,經過轉譯後為 <input type="number">

@page "/InputSample"
<EditForm Model="@inputSampleModel">
    <label>數字</label>
    <InputNumber @bind-Value="inputSampleModel.Value"></InputNumber>
</EditForm>

@code {
    private InputSampleModel inputSampleModel = new();
    class InputSampleModel
    {
        public int Value{ get; set; }
    }
}

InputSelect

下拉選單元件,經過轉譯後為 <select>

@page "/InputSample"
<EditForm Model="@inputSampleModel">
    <InputSelect @bind-Value="inputSampleModel.SelectedValue">

        @foreach (var item in Options)
        {
            <option value="@item">@item</option>
        }
    </InputSelect>
</EditForm>

@code {
    private InputSampleModel inputSampleModel = new();

    private List<string> Options = new List<string>()
    {
        "Option1",
        "Option2",
        "Option3"
    };

    class InputSampleModel
    {
        public string SelectedValue { get; set; }
    }
}

小結

今日介紹五種內建輸入元件的用法,使用內建的輸入元件才可以支援表單<EditForm>的驗證,明天還說明剩下的四種輸入元件,以及如果這些內建元件都不合用該要怎麼客製化開發支援驗證的輸入元件


上一篇
ASP.NET Core Blazor 系列 - 020 表單驗證
下一篇
ASP.NET Core Blazor 系列 - 022 內建輸入元件(2)
系列文
我與 Blazor 的 30 天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言