Code blocks within Wizard steps causes the stepper not to load

[eleven]

I'm running into a new issue with the UI for ASP.NET Core's Wizard in that if I add a code block, e.g., a @if statement or a @Localizer within a <wizard-step-content> tags, it will cause the stepper along the top not display. What are my options - I'll need the @if statements work in order to have certain information appear depending on what issue the user is submitting.

[Stoyan]

Hi Jenna,

The issue arises because the <wizard-step-content> property uses the Html passed to it to encode the content of the Wizard's step. This means that Razor syntax is incompatible with the <wizard-step-content> property.

To avoid this issue you can either use the conditional statement outside of the property:

 @if(true){
                    <wizard-step-content>
                        <div class="wizardContainer">
                            //custom content
                        </div>
                    </wizard-step-content>
        }else{
                    <wizard-step-content>
                          //another content
                    </wizard-step-content>
        }

Alternatively, you can await the initialization of the Wizard and then modify the content with jQuery:

$(document).ready(function(){
       $(".wizardContainer").append("custom Html string")
})

I hope this information is helpful.

Regards,
Stoyan
Progress Telerik

[eleven]

Very helpful, @stoyan - thank you!