如何使用 Blazor + MatBlazor(Blazor Material 设计)而不使用 Javascript 创建表单向导?用户应该能够在表单的不同页面之间导航,并且应该动态更新进度条。
最佳答案
以下是受 Louis Hendricks 启发的基本表单向导.
请注意,您需要安装 MatBlazor由 Vladimir Samoilenko 编写,以便使以“Mat”为前缀的 Web 元素工作。
Form.razor 文件
<div id="form-navigation-container">
<!-- Checks to see if current step is not equal to first step via SetNavButtons() method -->
<MatButton Class="previous" disabled="@Wizard.PreviousButtonDisabled" @onclick="Wizard.GoToPreviousStep">Previous Step</MatButton>
<!-- Checks to see if current step is not equal to last step via SetNavButtons() method -->
<MatButton Unelevated="true" disabled="@Wizard.NextButtonDisabled" @onclick="Wizard.GoToNextStep">Next Step</MatButton>
</div>
<!-- Progress bar gets incremented/decremented via GoToNextStep()/GoToPreviousStep() methods -->
<MatProgressBar Class="progress" Progress="@Wizard.Progress" aria-valuenow="@Wizard.Progress" aria-valuemin="0" aria-valuemax="1"></MatProgressBar>
@code {
Wizard Wizard = new Wizard();
}
Wizard.cs 文件
using FORM.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
namespace FORM.Models
{
public class Wizard
{
public Wizard()
{
Progress = .2;
Step = 1;
SetNavButtons();
}
public double Progress { get; private set; }
public int Step { get; private set; }
public bool PreviousButtonDisabled { get; private set; }
public bool NextButtonDisabled { get; private set; }
public void GoToNextStep()
{
Step += 1;
Progress += .2;
if (Step == 6)
{
Progress = 100;
}
SetNavButtons();
}
public void GoToPreviousStep()
{
if (Step > 1)
{
Step -= 1;
Progress -= .2;
}
if (Step == 1)
{
Progress = .2;
}
SetNavButtons();
}
public void SetNavButtons()
{
NextButtonDisabled = false;
switch (Step)
{
case 1:
PreviousButtonDisabled = true;
break;
case 2:
PreviousButtonDisabled = false;
break;
case 3:
PreviousButtonDisabled = false;
break;
case 4:
PreviousButtonDisabled = false;
break;
case 5:
NextButtonDisabled = true;
break;
default:
break;
}
}
}
}
关于c# - 如何使用 Blazor 创建表单向导?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58105036/