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 = "";
		}
	}

}
           

看下最终效果:

需要全部代码的小伙伴可以私信我获取。