Wizard in Razor Pages
This article describes how to seamlessly integrate and configure the Telerik UI Loader for ASP.NET Core in Razor Pages applications.
Referencing Handler Methods in Razor Pages
Razor Pages is an alternative to the MVC pattern that makes page-focused coding easier and more productive. This approach consists of a cshtml file and a cshtml.cs file (by convention, the two files have the same name).
The cshtml.cs file, known as the PageModel, contains handler methods that respond to HTTP requests. These methods are prefixed with On followed by the HTTP verb (for example, OnGet, OnPost, OnPostRead, OnPostCreate).
Handler methods declared in a PageModel can be referenced from any Razor Page using one of the following URL patterns:
-
Using
Url.Page()C#Url.Page("PageName", "HandlerName") // OR Url.Page("/FolderName/PageName", "HandlerName")For example,
Url.Page("Index", "Read")references theOnPostReadorOnGetReadhandler method in theIndex.cshtml.csfile. -
Using a query string
C#Url("/PathToPage?handler=HandlerName")For example,
Url("/Index?handler=Read")references theOnPostReadorOnGetReadhandler method in theIndexpage.
For more information on Razor Pages architecture and concepts, refer to the official Microsoft documentation.
Submitting Wizard
By default, clicking on the Done button will fire the client-side validation of the Form integrated in the Wizard component. However, to prevent the user from selecting a different step if client-side validation fails, the respective fields must be marked with the attribute required. Once all of the fields are filled and the user clicks on the Done button, the data will be submitted and the page will reload to display the server validation messages from the PageModel, if any.
Also, since the Form makes a POST request, the antiforgery token must be included in the request. This can be achieved, for example, by appending a hidden input to the Form.
See the implementation details in the example below. For the complete project, refer to the Razor Pages example in our GitHub repository.
@page
@model WizardIndexModel
@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
@{
var token = Xsrf.GetAndStoreTokens(HttpContext).RequestToken;
}
@(Html.Kendo().Wizard()
.Name("wizard")
.Tag("form")
.Events(ev => ev.Done("onDone"))
.HtmlAttributes(new { url = @Url.Page("WizardIndex"), method = "POST" })
.Steps(s =>
{
s.Add<WizardIndexModel.UserModel>()
.Title("Account Details")
.Form(f => f
.Validatable(v =>
{
v.ValidateOnBlur(true);
v.ValidationSummary(vs => vs.Enable(false));
})
.FormData(Model.UserViewModel)
.Items(items =>
{
items.Add().Field(p => p.AccountDetails.Username)
.Label(l => l.Text("Username:"))
.InputHtmlAttributes(new { required = "required" });
items.Add().Field(p => p.AccountDetails.Email)
.Label(l => l.Text("Email:"))
.InputHtmlAttributes(new { required = "required" });
items.Add().Field(p => p.AccountDetails.Password)
.Label(l => l.Text("Password:"))
.InputHtmlAttributes(new { @type = "password", required = "required" })
.Hint("Hint: enter alphanumeric characters only.");
})
)
.Buttons(b =>
{
b.Next();
});
s.Add<WizardIndexModel.UserModel>()
.Title("Personal details")
.Form(f => f
.Validatable(v =>
{
v.ValidateOnBlur(true);
v.ValidationSummary(vs => vs.Enable(false));
})
.FormData(Model.UserViewModel)
.Items(items =>
{
items.Add().Field(p => p.PersonalDetails.FullName)
.Label(l => l.Text("Full Name:"))
.InputHtmlAttributes(new { required = "required" });
items.Add()
.Field(p => p.PersonalDetails.About)
.Label(l => l.Text("About:").Optional(true));
})
)
.Buttons(b =>
{
b.Previous();
b.Next();
});
s.Add().Content("<h3>Click on the \"Done\" button to complete your registration.</h3>");
})
)Submitting Wizard with AJAX
When the Wizard is submitted through an AJAX request, the default Done event of the component is prevented, thus forcing the manual implementation of the submit behavior. In this case, an AJAX request is sent to a specific end-point when clicking the Done button. However, for server validation, as the page is not reloaded and the PageModel data is not changed, the internal Validator attached to the integrated Form has no way of knowing what the server response is. For this reason, the AJAX request callback can be used to notify the user of the status of the server validation. If the server endpoint returns validation errors related to the fields, the error callback can be used to iterate over the response errors and create a visual representation in the UI. In a similar way, the success callback can be used to notify the user of a successful Form submission.
See the implementation details in the example below, where the JSON errors are appended to the validation summary, which is toggled in the AJAX success and error callbacks. For the complete project, refer to the Razor Pages example in our GitHub repository.
@page
@model WizardAjaxSubmitModel
@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
@Html.AntiForgeryToken()
<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}"));
})
)
.Buttons(b =>
{
b.Previous();
b.Next();
});
s.Add().Content("<h3>Click on the \"Done\" button to complete the process.</h3>");
})
)