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" });
|
||||
}
|
||||
}
|
||||
}
|
||||
Загрузка…
Ссылка в новой задаче