MAUI Blazor 做多終端程式，示範如何控制輸入和擷取輸入條件

測試目的：

1. 實作根據使用者輸入條件，擷取使用者的輸入。傳到背景的服務，更新對象資料。
2. 限制使用者輸入字元數，如果搜尋條件輸入的字元數小于四位，則提示使用者。

先看下要實作的效果：

如圖所示，當使用者輸入的文本框長度小于四位則提示。超過四位不提示。

擷取前端資料輸入到背景，供背景條件查找使用。

Rlazor 前端使用的綁定技術可以先給input 綁定input_1字段。

:<input type="text" @bind="input_1" @oninput="OnInputEvent" id="input_1" />           

實時輸入監控事件使用oninput

@oninput="OnInputEvent"           

//擷取input 實時資料輸入
	private void OnInputEvent(ChangeEventArgs changeEvent)
	{
		input_1 = (string)changeEvent.Value;
		if (input_1.Length < 4)
		{
			input_note = "請輸入至少4個字元以上！";
		}
		else { 
			input_note = "";
		}
	}
           

input_note 綁定輸入提示标簽：

<span style="color:red;">@input_note</span><br />           

背景添加input參數

public Task<UserInfoModel[]> GetUserInfoAsync(DateTime startDate,string  inputUserName)           

點選搜尋，打斷點到資料服務函數

全部代碼：

@page "/userinfo"

@using Hcy_MauiBlazorApp.Data
@inject UserInfoService UserInfoService

<h1>使用者管理</h1>
<div>
	<span style="color:red;">@input_note</span><br />
	名字:<input type="text" @bind="input_1" @oninput="OnInputEvent" id="input_1" />
	<input type="button" @onclick="SearchData" value="查找"/>
</div>
@if (userInfoList == null)
{
	<p><em>Loading...</em></p>
}
else
{
	<table class="table">
		<thead>
			<tr>
				<th>Date</th>
				<th>Temp. (C)</th>
				<th>Temp. (F)</th>
				<th>Summary</th>
			</tr>
		</thead>
		<tbody>
			@foreach (var forecast in userInfoList)
			{
				<tr>
					<td>@forecast.Date.ToShortDateString()</td>
					<td>@forecast.TemperatureC</td>
					<td>@forecast.TemperatureF</td>
					<td>@forecast.Summary</td>
				</tr>
			}
		</tbody>
	</table>
}

@code {
	private UserInfoModel[] userInfoList;
	private string input_1;
	private string input_note="";

	protected override async Task OnInitializedAsync()
	{
		userInfoList = await UserInfoService.GetUserInfoAsync(DateTime.Now,input_1);
	}

	private void SearchData()
	{
		OnInitializedAsync();
	}
	//擷取input 實時資料輸入
	private void OnInputEvent(ChangeEventArgs changeEvent)
	{
		input_1 = (string)changeEvent.Value;
		if (input_1.Length < 4)
		{
			input_note = "請輸入至少4個字元以上！";
		}
		else { 
			input_note = "";
		}
	}

}
           

看下最終效果:

需要全部代碼的小夥伴可以私信我擷取。