Stepwise Form - Tabs with Different Models

[Bill]

I needed to create a wizard and I started but using this sample: https://www.telerik.com/blogs/step-wise-forms-with-asp-net-mvc-and-kendo-ui

The two differences for my solution are that I need to use a different model and partial view for each tab and I don't want to load the tab until it is active.

The idea is that on tab 1 I gather some information, submit it, and then get the data and display tab 2...and so on...I can't seem to figure it out.

Each tab should have it's own partial view populated by it's own model by calling a controller action when the tab is activated.

[Aleksandar]

Hello Bill,

What you could try is modify the example by having a separate form in each partial view. You could submit the form data via ajax and on success navigate to the next tab. Give this approach a try and let me know if it works for your scenario. 

Regards,
Aleksandar
Progress Telerik

[Bill]

Thanks, I was able to figure out a method.

[Senior]

Can you please provide a working example on the issue? Thanks a lot.

[Aleksandar]

Hi Hacene,

The code used for the article cited https://www.telerik.com/blogs/step-wise-forms-with-asp-net-mvc-and-kendo-ui is available on GitHub. The link is posted at the end of the article.

Note that as of SP1 for R2 2020 we have a Wizard component:

https://docs.telerik.com/aspnet-mvc/html-helpers/navigation/wizard/overview

The Wizard Component exposes a LoadOnDemand configuration option that indicates whether the Wizard step content will be loaded on demand when a given step is selected. This configuration is applicable when the step configuration has "contentUrl" set. I suggest reviewing the Telerik UI for ASP.NET MVC Wizard component and the demos we have on it for details on the available configurations and supported scenarios.

Regards,
Aleksandar
Progress Telerik