Question

如何使用Blazor + MatBlazor（Blazor的材料设计）而不使用Javascript创建表单向导？用户应该能够在表单的不同页面之间导航，并且应该动态更新进度条。

Answer 1

以下是受Louis Hendricks启发的基本表单向导。

请注意，您将需要安装Vladimir Samoilenko的MatBlazor才能使以“ 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;
            }
        }
    }
}

如何使用Blazor创建表单向导？

1 个答案: