From f7307721f4e28f1e0f823d96a10af459e731a9f1 Mon Sep 17 00:00:00 2001
From: Neli Kondova <kondovaneli@gmail.com>
Date: Thu, 18 Feb 2021 16:46:31 +0200
Subject: [PATCH] chore(demos): add wizard ajax submit example (#38)

---
 .../Models/UserViewModel.cs                   |  26 ++++
 .../Pages/Wizard/WizardAjaxSubmit.cshtml      | 143 ++++++++++++++++++
 .../Pages/Wizard/WizardAjaxSubmit.cshtml.cs   |  46 ++++++
 3 files changed, 215 insertions(+)
 create mode 100644 Telerik.Examples.RazorPages/Telerik.Examples.RazorPages/Models/UserViewModel.cs
 create mode 100644 Telerik.Examples.RazorPages/Telerik.Examples.RazorPages/Pages/Wizard/WizardAjaxSubmit.cshtml
 create mode 100644 Telerik.Examples.RazorPages/Telerik.Examples.RazorPages/Pages/Wizard/WizardAjaxSubmit.cshtml.cs

diff --git a/Telerik.Examples.RazorPages/Telerik.Examples.RazorPages/Models/UserViewModel.cs b/Telerik.Examples.RazorPages/Telerik.Examples.RazorPages/Models/UserViewModel.cs
new file mode 100644
index 0000000..2b24a8b
--- /dev/null
+++ b/Telerik.Examples.RazorPages/Telerik.Examples.RazorPages/Models/UserViewModel.cs
@@ -0,0 +1,26 @@
+using System;
+using System.Collections.Generic;
+using System.ComponentModel.DataAnnotations;
+using System.Linq;
+using System.Threading.Tasks;
+
+namespace Telerik.Examples.RazorPages.Models
+{
+    public class UserViewModel
+    {
+        [Required]
+        public long UserId { get; set; }
+
+        [Required]
+        [MinLength(5, ErrorMessage = "Name must be at least 5 characters long")]
+        public string Name { get; set; }
+
+        [Required]
+        public string City { get; set; }
+
+        [Required]
+        public string BirthDate { get; set; }
+
+        public string Gender { get; set; }
+    }
+}
diff --git a/Telerik.Examples.RazorPages/Telerik.Examples.RazorPages/Pages/Wizard/WizardAjaxSubmit.cshtml b/Telerik.Examples.RazorPages/Telerik.Examples.RazorPages/Pages/Wizard/WizardAjaxSubmit.cshtml
new file mode 100644
index 0000000..5d6cef8
--- /dev/null
+++ b/Telerik.Examples.RazorPages/Telerik.Examples.RazorPages/Pages/Wizard/WizardAjaxSubmit.cshtml
@@ -0,0 +1,143 @@
+@page
+@model Telerik.Examples.RazorPages.Pages.Wizard.WizardAjaxSubmitModel
+@{
+}
+
+@using Telerik.Examples.RazorPages.Models
+@using Kendo.Mvc.UI
+
+@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
+@Html.AntiForgeryToken()
+
+<h1>Wizard Ajax Submit</h1>
+
+<div id="validation-success"></div>
+<div id="validation-error">
+    <ul></ul>
+</div>
+
+
+@(Html.Kendo().Wizard()
+    .Name("wizard-ajax")
+    .Tag("form")
+    .Events(ev => ev.Done("onDone"))
+    .HtmlAttributes(new { url = @Url.Page("WizardAjaxSubmit"), method = "POST" })
+    .Steps(s =>
+    {
+        s.Add<UserViewModel>()
+        .Title("Main information ")
+            .Form(f => f
+                .Validatable(v =>
+                {
+                    v.ValidateOnBlur(true);
+                    v.ValidationSummary(vs => vs.Enable(false));
+                })
+                .FormData(Model.User)
+                .Items(items =>
+                {
+                    items.Add().Field(p => p.UserId)
+                        .Label(l => l.Text("User ID:"))
+                        .Editor(f => f.NumericTextBox()
+                            .RestrictDecimals(true)
+                            .Min(0)
+                            .Format("n0")
+                            .Decimals(0));
+                    items.Add().Field(p => p.Name).Label(l => l.Text("Name:"));
+                })
+            )
+            .Buttons(b =>
+            {
+                b.Next();
+            });
+
+        s.Add<UserViewModel>()
+            .Title("User details")
+            .Form(f => f
+                .Validatable(v =>
+                {
+                    v.ValidateOnBlur(true);
+                    v.ValidationSummary(vs => vs.Enable(false));
+                })
+                .FormData(Model.User)
+                .Items(items =>
+                {
+                    items.Add().Field(p => p.BirthDate).Label(l => l.Text("Birth Date:"))
+                         .Editor(e => e.DatePicker().Format("{0:dd-MM-yyyy}"));                   
+
+                    items.Add()
+                        .Field(p => p.City)
+                        .Label(label => label.Text("City:"))
+                        .Editor(e =>
+                        {
+                            e.DropDownList()
+                            .DataTextField("Text")
+                            .DataValueField("Text")
+                            .OptionLabel("Please select city")
+                            .BindTo(new List<SelectListItem>() {
+                                new SelectListItem() {
+                                    Text = "Venice",
+                                },
+                                new SelectListItem() {
+                                    Text = "Genoa",
+                                },
+                                new SelectListItem() {
+                                    Text = "Italy",
+                                },
+                                new SelectListItem() {
+                                    Text = "Valencia",
+                                },
+                                new SelectListItem() {
+                                    Text = "Rotterdam",
+                                },
+                                new SelectListItem() {
+                                    Text = "Athens",
+                                }
+                            });
+                        });
+
+                })
+            )
+            .Buttons(b =>
+            {
+                b.Previous();
+                b.Next();
+            });
+
+        s.Add().Content("<h3>Click on the \"Done\" button to complete the process.</h3>");
+    })
+)
+
+<script>
+    function onDone(e) {
+        e.originalEvent.preventDefault();
+        var form = $("#wizard-ajax");
+        console.log("OnDone hit");
+
+        $.ajax({
+            type: 'POST',
+            url: "@Url.Page("WizardAjaxSubmit", "Submit")",
+            beforeSend: function (xhr) {
+                xhr.setRequestHeader("RequestVerificationToken",
+                    $('input:hidden[name="__RequestVerificationToken"]').val());
+            },
+            data: form.serialize(),
+            success: function (data) {
+                $("#validation-success").html("<div class='k-messagebox k-messagebox-success'>" + data.success + "</div>");
+                $("#validation-error").find("ul").empty();
+            },
+            error: function (data) {
+                var response = JSON.parse(data.responseText);
+                var form = $("#formExample").getKendoForm();
+                var errorString = "";
+
+                $.each(response.errors, function (key, value) {
+                    errorString += '<li class="k-messagebox k-messagebox-error">' + value + '</li>';
+                });
+
+                $("#validation-success").html("");
+                $("#validation-error").find("ul").empty();
+                $("#validation-error").find("ul").append(errorString);
+            }
+        });
+    }
+</script>
diff --git a/Telerik.Examples.RazorPages/Telerik.Examples.RazorPages/Pages/Wizard/WizardAjaxSubmit.cshtml.cs b/Telerik.Examples.RazorPages/Telerik.Examples.RazorPages/Pages/Wizard/WizardAjaxSubmit.cshtml.cs
new file mode 100644
index 0000000..65677f7
--- /dev/null
+++ b/Telerik.Examples.RazorPages/Telerik.Examples.RazorPages/Pages/Wizard/WizardAjaxSubmit.cshtml.cs
@@ -0,0 +1,46 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.AspNetCore.Mvc.RazorPages;
+using Telerik.Examples.RazorPages.Models;
+
+namespace Telerik.Examples.RazorPages.Pages.Wizard
+{
+    public class WizardAjaxSubmitModel : PageModel
+    {
+        [BindProperty]
+        public UserViewModel User { get; set; }
+
+        public void OnGet()
+        {
+            if (User == null)
+            {
+                User = new UserViewModel() 
+                { 
+                        UserId = 1,
+                        Name = "Laura Jones",
+                        City = "Valencia"
+                };
+            }
+        }
+
+        public IActionResult OnPostSubmit(UserViewModel model)
+        {
+            if (!ModelState.IsValid)
+            {
+                var errorList = (from item in ModelState
+                                 where item.Value.Errors.Any()
+                                 select item).ToDictionary(
+                                    kvp => kvp.Key,
+                                    kvp => kvp.Value.Errors.Select(e => e.ErrorMessage).FirstOrDefault()
+                                );
+
+                Response.StatusCode = 400;
+                return new JsonResult(new { errors = errorList });
+            }
+            return new JsonResult(new { success = "Form Posted Successfully" });
+        }
+    }
+}