There are loads of other parameters, events, and whatnot, but I tried to keep this code snippet simple.Ī working quick start sample is available HERE that demonstrates the capabilities of the control better than I can do here. The panels may contain any valid Blazor content. Easy implementation, Bootstrap compatiblity, customizable toolbars, themes, events and Ajax support are few of the features. Provides a neat and stylish interface for your forms, checkout screen, registration steps, etc. You can, of course, add as many, or as few panels as you like. jQuery Smart Wizard is an accessible step wizard plugin for jQuery. Add code to a razor component, in your Blazor project, like this: Using the component is pretty easy, really. The component itself looks a bit like this: Source code for this blog post is located at. As this was a simple component, I didn’t touch on any of the advanced topics (JavaScript Interop for instance), but these topics can always be explored deeper. I replaced just about all of the JavaScript code with C# code that works even better. The idea for this demo came from an existing MVC view that contained tons of jQuery and multiple components. The finished result shows the Wizard Component working as expected and without any JavaScript written.īlazor is definitely something I plan on diving more into. Now that we have everything together, let’s try this out! Otherwise, it has to be invoked as lambda. If the method has no parameters, then it can be added as a method group. The Wizard Component contains methods that are executed by assigning the onclick property. For this to work properly, the Wizard component Razor code has to be wrapped inside of a CascadingValue with its value set to the instance of the Wizard component. This attribute states that the property it targets should have its value populated by the closest ancestor using a CascadingValue. The WizardStep is interacting with its parent directly because of the CascadingParameter attribute. It will only render the ChildContent if it is the active step selected. When the WizardStep component is finished initializing, it tells the Wizard, “Hey, I’m here. Protected internal List Steps = new List() Ed Charbeneau has a brilliant post detailing how this separation works. NET code we write will take care of this!įor this sample, I want to separate the bulk of code from being declared within the Razor files use separate code-behind files for the Wizard and WizardStep components instead. Normally, this is where we start creating variables and wiring up click handlers in JavaScript to control how advance through the wizard. For this we need to create a WizardStep component. Ideally, the each step should handle its own content in a component that we can add inside of the wizard. The HTML code will result in a simple layout that gives us three step items, some random content, and previous/next buttons Bootstrap has a lot of great layout components that will take the pain out of designing this. What’s next? We need to make a simple layout that will hold the elements that will describe each step of the wizard, the main content of the current step, and navigation buttons. It is safe to clear all content from this, since we’re creating it all from scratch. We’ll name this Wizard.razor, so we will be able to use the component with a tag like. In Visual Studio, right click on the folder, Add New Item, and select the Razor Component item template.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |