Skip to content

Commit 7e436a4

Browse files
ArgoZhangArgoZhang
committed
doc: 更新模板内使用表单
1 parent 386117a commit 7e436a4

File tree

4 files changed

+63
-39
lines changed

4 files changed

+63
-39
lines changed

‎src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/Template1.razor‎

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,19 +6,25 @@
66
<h4 class="text-dark">欢迎使用 BootstrapBlazor 组件库</h4>
77
<h4 class="text-dark">用户登录!</h4>
88
</div>
9-
<ValidateForm Model="@Model">
10-
<FloatingLabel DisplayText="邮箱" TValue="string" IsGroupBox="true" PlaceHolder="[email protected]" />
11-
<FloatingLabel DisplayText="密码" TValue="string" type="password" IsGroupBox="true" PlaceHolder="password" />
9+
<ValidateForm Model="@Model" OnValidSubmit="OnSubmit">
10+
<FloatingLabel DisplayText="邮箱" TValue="string" PlaceHolder="[email protected]" />
11+
<FloatingLabel DisplayText="密码" TValue="string" type="password" PlaceHolder="password" />
1212
<Checkbox TValue="bool" ShowLabel="false" ShowAfterLabel="true" DisplayText="记住登录状态" />
13-
<Button Text="登录" Color="Color.Primary"></Button>
14-
<hr />
15-
<Button Text="忘记密码" Color="Color.Danger"></Button>
16-
<Button Text="用户注册" Color="Color.Info"></Button>
13+
<Button Text="登录" Color="Color.Primary" ButtonType="ButtonType.Submit"></Button>
1714
</ValidateForm>
15+
<hr />
16+
<Button Text="忘记密码" Color="Color.Danger"></Button>
17+
<Button Text="用户注册" Color="Color.Info"></Button>
1818
</div>
1919

2020
@code {
2121
[CascadingParameter]
2222
[NotNull]
2323
private LoginModel? Model { get; set; }
24+
25+
private Task OnSubmit(EditContext context)
26+
{
27+
StateHasChanged();
28+
return Task.CompletedTask;
29+
}
2430
}

‎src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/Template2.razor‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,19 +6,25 @@
66
<h4 class="text-dark">欢迎使用 BootstrapBlazor 组件库</h4>
77
<h4 class="text-dark">用户登录!</h4>
88
</div>
9-
<ValidateForm Model="@Model">
9+
<ValidateForm Model="@Model" OnValidSubmit="OnSubmit">
1010
<BootstrapInput @bind-Value="Model.UserName" ShowLabel="false" PlaceHolder="请输入账号" />
1111
<BootstrapPassword @bind-Value="Model.Password" ShowLabel="false" PlaceHolder="请输入密码" />
1212
<Checkbox @bind-Value="@Model.RememberMe" ShowLabel="false" ShowAfterLabel="true" DisplayText="记住登录状态" />
13-
<Button Text="登录" Color="Color.Primary"></Button>
14-
<hr />
15-
<Button Text="忘记密码" Color="Color.Danger"></Button>
16-
<Button Text="用户注册" Color="Color.Info"></Button>
13+
<Button Text="登录" Color="Color.Primary" ButtonType="ButtonType.Submit"></Button>
1714
</ValidateForm>
15+
<hr />
16+
<Button Text="忘记密码" Color="Color.Danger"></Button>
17+
<Button Text="用户注册" Color="Color.Info"></Button>
1818
</div>
1919

2020
@code {
2121
[CascadingParameter]
2222
[NotNull]
2323
private LoginModel? Model { get; set; }
24+
25+
private Task OnSubmit(EditContext context)
26+
{
27+
StateHasChanged();
28+
return Task.CompletedTask;
29+
}
2430
}

‎src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/Template3.razor‎

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,21 +7,27 @@
77
<Avatar Url="@WebsiteOption.CurrentValue.GetAssetUrl("images/Argo-C.png")" IsCircle="true" Size="Size.ExtraExtraLarge" />
88
<h4 class="text-dark">欢迎使用 BootstrapBlazor 组件库</h4>
99
</div>
10-
<ValidateForm Model="@Model">
10+
<ValidateForm Model="@Model" OnValidSubmit="OnSubmit">
1111
<BootstrapInput TValue="string" ShowLabel="false" PlaceHolder="请输入账号" />
1212
<BootstrapPassword ShowLabel="false" PlaceHolder="请输入密码" />
1313
<Checkbox TValue="bool" ShowLabel="false" ShowAfterLabel="true" DisplayText="记住登录状态" />
14-
<Button Text="登录" Color="Color.Primary"></Button>
15-
<hr />
16-
<div class="d-flex">
17-
<Button Text="忘记密码" Color="Color.Danger"></Button>
18-
<Button Text="用户注册" Color="Color.Info"></Button>
19-
</div>
14+
<Button Text="登录" Color="Color.Primary" ButtonType="ButtonType.Submit"></Button>
2015
</ValidateForm>
16+
<hr />
17+
<div class="d-flex">
18+
<Button Text="忘记密码" Color="Color.Danger"></Button>
19+
<Button Text="用户注册" Color="Color.Info"></Button>
20+
</div>
2121
</div>
2222

2323
@code {
2424
[CascadingParameter]
2525
[NotNull]
2626
private LoginModel? Model { get; set; }
27+
28+
private Task OnSubmit(EditContext context)
29+
{
30+
StateHasChanged();
31+
return Task.CompletedTask;
32+
}
2733
}

‎src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/Template4.razor‎

Lines changed: 26 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -6,37 +6,43 @@
66
<span>登录</span>
77
<div class="login-register">没有账号？<a href="#">点此注册</a></div>
88
</div>
9-
<ValidateForm Model="@Model">
10-
<BootstrapInput TValue="string" ShowLabel="false" PlaceHolder="请输入账号" />
9+
<ValidateForm Model="@Model" OnValidSubmit="OnSubmit">
10+
<BootstrapInput TValue="string" ShowLabel="false" PlaceHolder="请输入账号" IsAutoFocus="true" />
1111
<BootstrapPassword ShowLabel="false" PlaceHolder="请输入密码" />
1212
<div class="login-sms">
1313
<Checkbox TValue="bool" ShowLabel="false" ShowAfterLabel="true" DisplayText="记住我" />
1414
<a href="#">短信验证登录</a>
1515
</div>
16-
<Button Text="登录" Color="Color.Primary"></Button>
17-
<div class="text-center my-4">
18-
<a href="#">已有账号，忘记密码</a>
16+
<Button Text="登录" Color="Color.Primary" ButtonType="ButtonType.Submit"></Button>
17+
</ValidateForm>
18+
<div class="text-center my-4">
19+
<a href="#">已有账号，忘记密码</a>
20+
</div>
21+
<Divider Text="其他登录方式" />
22+
<div class="login-oauth">
23+
<div class="login-oauth-item">
24+
<i class="fa-brands fa-github"></i>
1925
</div>
20-
<Divider Text="其他登录方式" />
21-
<div class="login-oauth">
22-
<div class="login-oauth-item">
23-
<i class="fa-brands fa-github"></i>
24-
</div>
25-
<div class="login-oauth-item">
26-
<i class="fa-brands fa-twitter"></i>
27-
</div>
28-
<div class="login-oauth-item">
29-
<i class="fa-brands fa-apple"></i>
30-
</div>
31-
<div class="login-oauth-item">
32-
<i class="fa-brands fa-facebook"></i>
33-
</div>
26+
<div class="login-oauth-item">
27+
<i class="fa-brands fa-twitter"></i>
3428
</div>
35-
</ValidateForm>
29+
<div class="login-oauth-item">
30+
<i class="fa-brands fa-apple"></i>
31+
</div>
32+
<div class="login-oauth-item">
33+
<i class="fa-brands fa-facebook"></i>
34+
</div>
35+
</div>
3636
</div>
3737

3838
@code {
3939
[CascadingParameter]
4040
[NotNull]
4141
private LoginModel? Model { get; set; }
42+
43+
private Task OnSubmit(EditContext context)
44+
{
45+
StateHasChanged();
46+
return Task.CompletedTask;
47+
}
4248
}

0 commit comments

Comments
 (0)