Как создать мастер форм с помощью Blazor? - PullRequest
Новая
       60

Как создать мастер форм с помощью Blazor?

0 голосов
/ 25 сентября 2019

Как создать мастер форм, используя Blazor + MatBlazor (Material Design for Blazor) и без Javascript?Пользователь должен иметь возможность перемещаться между различными страницами формы, а индикатор выполнения должен динамически обновляться.

1 Ответ

0 голосов
/ 25 сентября 2019

Ниже представлен мастер ванильной формы, вдохновленный Луи Хендриксом .

Обратите внимание, что вам необходимо установить MatBlazor Владимира Самойленко, чтобыполучить веб-элементы с префиксом «Mat», работающим.

Файл 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;
            }
        }
    }
}
...