Smart asp.net mvc wizard part 1
In this series of articles I will build a wizard for asp.net mvc starting from object model finished by user interface on asp.net mvc core web application.
(You can use code and concept to build the wizard on asp.net forms, asp.net mvc … or any other web language … same concept)
The wizard will be dynamic and smart where you can use it for small or enterprise applications.
The object model will be written in C# where anyone can translate it to any other language like Java, Ruby.
The wizard will not use any JavaScript or any client side framework only server side code.
The Final Result after series of articles will be as below image:
 |
| Asp.Net MVC Smart Wizard Final Result |
Problem:
We have an enterprise application with many type of users with each type has different input views (steps, different wizards).
To solve the problem we need dynamic and smart wizard with smart navigation commands (next, previous, finish, skip …) and bookmarks, also we need the wizard to memory the last active step for each user.
The wizard steps or views will be loaded dynamically from configuration file (.net core JSON file)
Each step in wizard will has its own controller and view(s).
Solution:
We will start by writing the object model based on object oriented best practices,
You can consider this part as a tutorial or real object oriented sample for smart wizard.
If we think in wizard in abstraction way we will find out that wizard consist of the following parts (see below image : asp.net mvc wizard components):
- Wizard Itself: Container for other parts of the wizard.
- Wizard Step: any view, html page or form.
- Wizard Step Collection : collection of steps
- Bookmark: top bar that show the title of each step.
- Bookmark state : the states of each bookmark
- Active(clickable)
- Disabled (clickable) ,
- Current (you are on this, sure it clickable).
- Navigation command: next, previous, skip, finish…
- Wizard Navigator: this the coordinator it controls the moving from step to step (backward, forward).
- Wizard State: The state of wizard will be saved as a small JSON file in MS SQL Database just to remember where the user were, just to memory the steps for users.
- Wizard navigator service: an interface that load and save the wizard state, for me I will save and load the state in JSON file in MS SQL Server, you can implement it to save in any data store like MySQL, session …..
Each wizard consist of many steps and I can move from step to another only when that step is completed, you can’t jump steps is it’s not completed.
 | |
|
Let us start explain the object model and class diagram for each part of the wizard, by the way I will program to interface for some parts to meet object oriented principles (you can change it as you wish)
Below table is a brief of the components followed by details:
| Part | Class Name | Implement Interface |
| Wizard Itself | BaseWizard | |
| Wizard step | WizardStep | |
| Wizard stepCollection | Collection of WizardStep (Keyed Collection) | |
| Bookmark | Bookmark | |
| Bookmark state | BookmarkState | |
| Navigation command | NavigationCommand | |
| Wizard Navigator | WizardNavigator | IWizardNavigator |
| Wizard State | WizardState | |
| Wizard navigator service | In UI will create the implementation | IWizardNavigatorService |
Class Diagram:
Below is the class diagram for the wizard components:
 | |
|
Click here for next part (Part 2)
Hey Amer, really impressed with the demo and was curious if there was a link to the source code of that demo as I didn't see anything in the article itself?
ReplyDeleteCheers,
Thanks I am working on the series of articles I will share everything
DeleteKindly check part 2 to see the code.
DeleteThank you so very much! I Googled far-and-wide for an Asp.Net Core Wizard example and I finally found your awesome project which even works with .NET Core 2.0!
ReplyDeleteAgain, thank you very much.
It's my pleasure to hear that , thanks you very much for such great words.
DeleteThanks for sharing the control with us. What is the easiest way to use the wizard without authentication and store the state in a session variable.
ReplyDeleteHi, it's easy , just change the implementation of class NavigatorPersistenceService.cs
Deleteand save the data in session
https://github.com/ajamaeen/asp.net-mvc-wizard/blob/master/Wizard.Web/Services/NavigatorPersistenceService.cs
This comment has been removed by the author.
ReplyDeleteHi Amer,
ReplyDeleteI haven't downloaded the code yet but can I use it on a project that I'm planning on bidding on?
Thanks,
Dave
Hi Dave ,
DeleteYou can use it , if need support i am ready.
Great! Thank you so much.
DeleteHi Amer,
ReplyDeleteI don't know anything about generics so the is may be a dumb question.
Why use generics when you have a WizardStep as a constraint? Can you use the WizardStep class directly or is there more to it than that?
Thanks,Dave
Hi,
ReplyDeleteCould you please let me know , how I can create the db for this source code?
Hi,
DeleteIt's already there in Migrations folder
https://github.com/ajamaeen/asp.net-mvc-wizard/tree/master/Wizard.Web/Migrations
This comment has been removed by the author.
ReplyDeleteThank you for your nice project!
ReplyDeleteR
I'm struggling to make it work so navigating through the steps wont lose field values. I want to use a ViewModel to pass between steps instead of using session. Is this possible with your implementation? If so how?
ReplyDeleteAs long you navigate through steps your data will be saved in database.
Deleteyou will not loose it.
Can this be used to track a user's cart that's opened in multiple tabs? So like if the user updates the cart in one tab - will this update also automagically update the same cart in other opened tabs?
ReplyDeleteI don't know how to do that , i think you need a service like SignalR.
Delete
ReplyDeleteI can use this code for core 3.1, I see it a bit complicated, I have more than 5 entities, students, medical record parents among others and I want to build a smart wizard with all this to facilitate data entry and when a search is done, all data come by the parameter that I indicate