In this demo a Wizard is built using the PopupForm helper.
We're not using the default Ok and Cancel buttons instead a submit button is placed on the bottom center of the form.
Stepping forward is done by submitting the form, the successful submit will redirect to another action which will return a view (html),
when the popupform receives html/string it replaces its content with that html.
Stepping back is performed by submitting a separate form to the needed step, the form uses method get.
(The popup form will handle any form that is being submitted inside of it, and make it an ajax request).
// all good // set model for step1 and redirect to step2 var wizardModel =(WizardModel)Cache.Get(step1Model.WizardId); wizardModel.Step1= step1Model;
var oldCategoryId = wizardModel.Step2.CategoryId;
// set category for next step wizardModel.Step2.CategoryId= step1Model.CategoryId.Value;
// clear selected meals when we go gack from Step2 to Step1 and change the category if(oldCategoryId !=0&& wizardModel.Step2.CategoryId!= oldCategoryId) { wizardModel.Step2.MealIds=null; }
// go to next step returnRedirectToAction("WizardStep2",new{WizardId= wizardModel.Id}); }
publicIActionResultWizardStep2(string wizardId) { var wiz =Cache.Get(wizardId);
Check.NotNull(wiz,"wizard"); var model =(WizardModel)wiz;
returnPartialView(model.Step2); }
[HttpPost] publicIActionResultWizardStep2(Step2Model step2Model) { var wizardModel =(WizardModel)Cache.Get(step2Model.WizardId); step2Model.CategoryId= wizardModel.Step2.CategoryId;
returnJson(new{Message= string.Format("Thank you {0} with meals: {1} was saved", model.Step1.Name, string.Join(",", meals))}); } } }
WizardDemo/WizardStep1.cshtml
@modelAweCoreDemo.ViewModels.Input.Wizard.Step1Model <div class="wizardForm"> <div id="wizardData" style="height: 250px;"> @using(Html.BeginForm()) { <div class="expl">Hi, please write a name and select a category </div>