In Kendo-UI Wizard ASP.NET Core, How do I get data from the server on click?

Question

How do I submit async/ajax calls to my razor page methods or do custom validations within steps of the Wizard?

Ex: I'd like to populate data in each step based on what was entered on the previous. I looked at the examples, but they don't seem to show this type of use case.

From the documentation samples, there are events shown, but it is unclear how to bind a specific completion of a step (clicking next) to a specific event function (in tag helper format).

.Events(events =>
        {
            events.Activate("onActivate");
            events.Error("onError");
            events.Done("onDone");
            events.Select("onSelect");
            events.Reset("onReset");
            events.ContentLoad("onContentLoad");
            events.FormValidateFailed("onFormValidateFailed");
        })

Screen shots when using tag helper and trying to figure out how to bind to a step's events:

Answer 1

The events aren't tied to the steps of the wizard - they are at the wizard level:

    <kendo-wizard name="wizard" on-activate="onActivate" on-select="onSelect">
        <wizard-steps>
            <wizard-step title="Initial step">
                <wizard-step-content>
                    <h1>Initial step content</h1>
                </wizard-step-content>
            </wizard-step>
            <wizard-step title="Second step">
                <wizard-step-content>
                    <h1>Second step content</h1>
                </wizard-step-content>
            </wizard-step>
            <wizard-step title="Final step">
                <wizard-step-content>
                    <h1>Final step content</h1>
                </wizard-step-content>
            </wizard-step>
        </wizard-steps>
    </kendo-wizard>

    <script>
        function onActivate(e) {
            console.log("Activated: " + e.step.options.label);

           switch (e.step.options.label) {
             case 'step 1':
               //do what you need to here
               break;
             }
             case 'step 2':
               //do step 2 stuff here
               $.ajax({ whatever });
               break;
             default:
           }
        }

        function onSelect(e) {
            console.log("Selected: " + e.step.options.label);
        }

Then, in the event handler function - you can determine what you want to do based on which step the event was fired from - using e.step.options.label (or other properties on there). From the example located at https://demos.telerik.com/aspnet-core/wizard/events they output the title of the step in the firing of each event.