9.模版页
思想：在多个页面之间切换时常常是大部分内容固定，而只有少部分内容在切换后是不同的，这时我们就想，把相同的部分做为所有页面可复用的一个模版，这就是模版面要解决的问题。
1.在路由组件中指定默认模版页
在Blazor路由组件中，路由视图组件中有一个叫 DefaultLayout 的参数，该参数就是用来指定应用程序中，所有页面共同使用的默认模版页，Routers.razor组件 如下代码：
<Router AppAssembly="@typeof(Program).Assembly"
<Found Context="routeData">
<RouterView RouteData="@routeData" DefaultLayout="@typeof(Layout.MainLayout)" />
<FocusOnNavigate RouterData="@routeData" Selector="h1" />
</Found>
<NotFound>
<p>没有找到相关的路由</p>
</NotFound>
</Router>
2.在普通页面中切换或说指定模版页
用 @layout 指令来指定即可。
说明：
所有模版页继承自 LayoutComponentBase ,而这个基类也是继承自 ComponetBase 只是多了一个 Body 参数(RenderFragement?委托类型)，用来让将来子页面嵌入在这里。
10.数据绑定
1.使用@bind指令进行数据绑定
使用 <input @bind="InputValue" /> 方式进行数据绑定，其中@bind 约定绑定元素的value属性，InputValue可以是C#字段或属性。
可以使用 <input @bind="InputValue" @bind:event="oninput"/>来指定当键入值时改变InputValue变量，否则默认相当于 @bind:event="onchange"即在input元素失去输入焦点时改变绑定的inputValue变量的值。
除此之外，还有@bind:after="Validate" ,其中Validate是一个方法，整体这种模式用来在输入完成后执行Validate方法，尤其适用于在输入完成后进行验证的情形。该模式有一个弱点即不支持参数。若要支持参数，且看下文...
要注意
InputValue 变量声明的数据类型如果无法接收元素输入值的数据类型，则会绑定失败。
2.组件通过定义get set 即读和写访问器各自绑定到不同参数，其成对出现，来支持双向数据绑定：
@bind:get：指定要绑定的值来自的变量（或说参数）。
@bind:set：指定值更改后要回调的方法（该方法也可被视作一种参数）。
@bind:get 和 @bind:set 修饰符始终一起使用，否则会在编绎时报错。
在以下示例代码中，
第一行展示了set访问器绑定到lambda表达式，实现当input元素输入值改变后，执行该lambda表达式。
第二行展示了set访问器绑定到一个同步方法SetMethord，要注意@bind:set指令隐含了一个value参数，实现当input元素输入值改变后，将改变后的input元素的value值传递并执行该SetMethord方法。
第三行展示了set访问器绑定到一个异步方法SetMethordAsync。其他特性与第二行中的同步方法一至。
<input @bind:get="InputValue2" @bind:set="@(value=>InputValue2=value)"></input>
<input @bind:get="InputValue2" @bind:set="SetMethord"></input>
<input @bind:get="InputValue2" @bind:set="SetMethordAsync"></input>
@code {
private string? InputValue2 { get; set; }
void SetMethord(string? value)
{
InputValue2 = value;
}
Task SetMethordAsync(string? value)
{
InputValue2 = value;
return Task.CompletedTask;
}
}
3.在下拉框元素select中使用绑定
<p>
<label>
<select @onchange="SelectedCarBrandChanged">
<option value="比亚迪">比亚迪</option>
<option value="吉利">吉利</option>
<option value="奇瑞">奇瑞</option>
<option value="奥迪">奥迪</option>
</select>
<label>
</p>
<p>
您选择的车是： @SelectedCar
</p>
@code
{
public string? SelectedCarBrand{get;set;}
private void SelectedCarBrandChanged(ChangeEventArgs e)
{
SelectCarBrand = e.Value?.ToString();//e.Value是改变后的值
}
}
要注意，
4.可以用@bind:format="yyyy年MM月dd日" 来指定元素显示的格式
<input @bind="UseData" @bind:format="yyyy年MM月dd日" />
其中，UseData是C# DataTime类型的变量
