diff --git a/Telerik.Examples.Mvc/Telerik.Examples.Mvc/Controllers/Wizard/DynamicStepController.cs b/Telerik.Examples.Mvc/Telerik.Examples.Mvc/Controllers/Wizard/DynamicStepController.cs new file mode 100644 index 0000000..f0355bc --- /dev/null +++ b/Telerik.Examples.Mvc/Telerik.Examples.Mvc/Controllers/Wizard/DynamicStepController.cs @@ -0,0 +1,27 @@ +using Microsoft.AspNetCore.Mvc; +using System; +using System.Collections.Generic; +using System.Linq; +using System.Threading.Tasks; +using Telerik.Examples.Mvc.Models; + +namespace Telerik.Examples.Mvc.Controllers.Wizard +{ + public class DynamicStepController : Controller + { + public IActionResult DynamicStep() + { + return View("/Views/Wizard/DynamicStep.cshtml"); + } + + [HttpPost] + public IActionResult DynamicStep(UserDetailsModel model) + { + return Json(model); + } + public IActionResult Load_Step(string type) + { + return PartialView("_DynamicStepPartial", type); + } + } +} diff --git a/Telerik.Examples.Mvc/Telerik.Examples.Mvc/Models/UserDetailsModel.cs b/Telerik.Examples.Mvc/Telerik.Examples.Mvc/Models/UserDetailsModel.cs new file mode 100644 index 0000000..d2608a6 --- /dev/null +++ b/Telerik.Examples.Mvc/Telerik.Examples.Mvc/Models/UserDetailsModel.cs @@ -0,0 +1,42 @@ +using System.ComponentModel.DataAnnotations; + +namespace Telerik.Examples.Mvc.Models +{ + public class UserDetailsModel + { + public string Type + { + get; + set; + } + public AccountDetailsModel AccountDetails + { + get; + set; + } + + public CompanyDetailsModel CompanyDetails + { + get; + set; + } + } + public class AccountDetailsModel + { + [Required] + public string Username { get; set; } + + [Required] + public string Email { get; set; } + } + + public class CompanyDetailsModel + { + [Required] + public string Country { get; set; } + + [Required] + public string CompanyName { get; set; } + + } +} diff --git a/Telerik.Examples.Mvc/Telerik.Examples.Mvc/Views/Shared/_DynamicStepPartial.cshtml b/Telerik.Examples.Mvc/Telerik.Examples.Mvc/Views/Shared/_DynamicStepPartial.cshtml new file mode 100644 index 0000000..d6d0650 --- /dev/null +++ b/Telerik.Examples.Mvc/Telerik.Examples.Mvc/Views/Shared/_DynamicStepPartial.cshtml @@ -0,0 +1,43 @@ +@{ + Layout = ""; +} + +@model string +@{ + if (Model.Equals("Individual")) + { + <form id="accountDetailsForm" class="k-form k-form-vertical" data-role="validator" novalidate="novalidate"> + <div class="k-form-field"> + <label for="AccountDetails.Username" class="k-form-label">Username:</label> + <span class="k-form-field-wrap"> + <input type="text" class="k-input k-textbox k-input-solid k-input-md k-rounded-md" name="AccountDetails.Username" id="AccountDetails.Username" required="required" /> + </span> + </div> + <div class="k-form-field"> + <label for="AccountDetails.Email" class="k-form-label">Email:</label> + <span class="k-form-field-wrap"> + <input type="text" class="k-input k-textbox k-input-solid k-input-md k-rounded-md" name="AccountDetails.Email" id="AccountDetails.Email" required="required" /> + </span> + </div> + + </form> + + } + else + { + <form id="companyDetailsForm" class="k-form k-form-vertical" data-role="validator" novalidate="novalidate"> + <div class="k-form-field"> + <label for="CompanyDetails.CompanyName" class="k-form-label">CompanyName:</label> + <span class="k-form-field-wrap"> + <input type="text" class="k-input k-textbox k-input-solid k-input-md k-rounded-md" name="CompanyDetails.CompanyName" id="CompanyDetails.CompanyName" required="required" /> + </span> + </div> + <div class="k-form-field"> + <label for="CompanyDetails.Country" class="k-form-label">Country:</label> + <span class="k-form-field-wrap"> + <input type="text" class="k-input k-textbox k-input-solid k-input-md k-rounded-md" name="CompanyDetails.Country" id="CompanyDetails.Country" required="required" /> + </span> + </div> + </form> + } +} diff --git a/Telerik.Examples.Mvc/Telerik.Examples.Mvc/Views/Wizard/DynamicStep.cshtml b/Telerik.Examples.Mvc/Telerik.Examples.Mvc/Views/Wizard/DynamicStep.cshtml new file mode 100644 index 0000000..bc1dcf6 --- /dev/null +++ b/Telerik.Examples.Mvc/Telerik.Examples.Mvc/Views/Wizard/DynamicStep.cshtml @@ -0,0 +1,65 @@ +@{ + ViewData["Title"] = "WizardDynamicStep"; +} + +<h1>@ViewData["Title"]</h1> + +@(Html.Kendo().Wizard() + .Name("wizard") + .Tag("form") + .HtmlAttributes(new { @novalidate = "", action = Url.Action("DynamicStep", "DynamicStep"), method = "POST" }) + .Steps(s => + { + s.Add() + .Title("First") + .Form(f => f + .Validatable(v => + { + v.ValidateOnBlur(true); + v.ValidationSummary(vs => vs.Enable(false)); + }) + .Items(items => + { + items.Add() + .Field("Type") + .Label(l => l.Text("Is Individual:")) + .Editor(e => e.RadioGroup() + .Items(items => + { + items.Add().Label("Individual").Value("Individual"); + items.Add().Label("Company").Value("Company"); + }) + ); + }) + ) + .Buttons(b => + { + b.Next(); + }); + + s.Add().Title("Second").Content("<div id='secondStepContent'></div>").Buttons(b => b.Done()); + + }) + .Events(e => e.Activate("onActivate")) + + +) + +<script> + function onActivate(e) { + var secondStepWrapper = document.getElementById("secondStepContent"); + if (e.step.options.title == "Second") { + var selectedType = $("#Type").data("kendoRadioGroup").value(); + + $.ajax({ + url: "@Url.Action("Load_Step","DynamicStep")", + type: "GET", + data: { "type": selectedType }, + success: function(response){ + secondStepWrapper.innerHTML = response; + } + }) + + } + } +</script> \ No newline at end of file