chore(demos): add wizard ajax submit example (#38)
This commit is contained in:
Neli Kondova
GitHub
Родитель
00cacf6de8
Коммит
f7307721f4
|
|
@ -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; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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" });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Загрузка…
Ссылка в новой задаче