InvalidOperationException in Form when using FormData with nested model property in Razor Pages

[ivaylo-milanov]

Bug report

The Form component throws an InvalidOperationException when utilizing FormData within Razor Pages. This issue does not occur in ASP.NET MVC or standard ASP.NET Core applications. The issue appears to be linked to the following commit: https://github.com/telerik/kendo/commit/8cf517cf94dd5a13a8e8bd9f8f92db0193ea00e3

Reproduction of the problem

1. Create an Razor Page application or use the attached one WebApplication1.zip.
2. Add a Form with FormData

@page
@model IndexModel

@(
Html.Kendo().Form<SampleViewModel>()
        .Name("sampleForm")
        .FormData(Model.SampleData)
        .Items(items =>
        {
            items.Add()
                .Field(f => f.FirstName)
                .Label("First Name");

            items.Add()
                .Field(f => f.LastName)
                .Label("Last Name");
        })
)

public class IndexModel : PageModel
{
    private readonly ILogger<IndexModel> _logger;

    public IndexModel(ILogger<IndexModel> logger)
    {
        _logger = logger;
    }

    [BindProperty]
    public SampleViewModel SampleData { get; set; } = new SampleViewModel();

    public void OnGet()
    {

    }

    public IActionResult OnPost()
    {
        if (!ModelState.IsValid)
        {
            return Page();
        }

        // Process the valid SampleData here
        return RedirectToPage("Success");
    }

}

public class SampleViewModel
{
    public string FirstName { get; set; }
    public string LastName{ get; set; }
}

3. Run the project

Current behavior

The application throws an InvalidOperationException:

      An unhandled exception has occurred while executing the request.
      System.InvalidOperationException: The model item passed into the ViewDataDictionary is of type 'WebApplication1.Pages.IndexModel', but this ViewDataDictionary instance requires a model item of type 'WebApplication1.SampleViewModel'.
         at Microsoft.AspNetCore.Mvc.ViewFeatures.ViewDataDictionary.EnsureCompatible(Object value)
         at Kendo.Mvc.Extensions.FormWrapperExtensions.SetMetaDataFromLambaExpression[T,TValue](IFormItem item, Expression`1 expression, ViewContext viewContext)
         at Kendo.Mvc.UI.Fluent.FormItemBuilder`1.Field[TValue](Expression`1 expression)
         at WebApplication1.Pages.Pages_Index.<>c.<ExecuteAsync>b__0_0(FormItemFactory`1 items) in C:\Users\aevangel\Downloads\webapplication1\WebApplication1\Pages\Index.cshtml:line 19
         at Kendo.Mvc.UI.Fluent.FormBuilder`1.Items(Action`1 configurator)
         at WebApplication1.Pages.Pages_Index.ExecuteAsync() in C:\Users\aevangel\Downloads\webapplication1\WebApplication1\Pages\Index.cshtml:line 4
         at Microsoft.AspNetCore.Mvc.Razor.RazorView.RenderPageCoreAsync(IRazorPage page, ViewContext context)
         at Microsoft.AspNetCore.Mvc.Razor.RazorView.RenderPageAsync(IRazorPage page, ViewContext context, Boolean invokeViewStarts)
         at Microsoft.AspNetCore.Mvc.Razor.RazorView.RenderAsync(ViewContext context)
         at Microsoft.AspNetCore.Mvc.ViewFeatures.ViewExecutor.ExecuteAsync(ViewContext viewContext, String contentType, Nullable`1 statusCode)
         at Microsoft.AspNetCore.Mvc.ViewFeatures.ViewExecutor.ExecuteAsync(ViewContext viewContext, String contentType, Nullable`1 statusCode)
         at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeNextResultFilterAsync>g__Awaited|30_0[TFilter,TFilterAsync](ResourceInvoker invoker, Task lastTask, State next, Scope scope, Object state, Boolean isCompleted)
         at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.Rethrow(ResultExecutedContextSealed context)
         at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.ResultNext[TFilter,TFilterAsync](State& next, Scope& scope, Object& state, Boolean& isCompleted)
         at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.InvokeResultFilters()
      --- End of stack trace from previous location ---
         at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeNextResourceFilter>g__Awaited|25_0(ResourceInvoker invoker, Task lastTask, State next, Scope scope, Object state, Boolean isCompleted)
         at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.Rethrow(ResourceExecutedContextSealed context)
         at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.Next(State& next, Scope& scope, Object& state, Boolean& isCompleted)
         at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.InvokeFilterPipelineAsync()
      --- End of stack trace from previous location ---
         at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeAsync>g__Awaited|17_0(ResourceInvoker invoker, Task task, IDisposable scope)
         at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeAsync>g__Awaited|17_0(ResourceInvoker invoker, Task task, IDisposable scope)
         at Microsoft.AspNetCore.Authorization.AuthorizationMiddleware.Invoke(HttpContext context)
         at Microsoft.AspNetCore.Authentication.AuthenticationMiddleware.Invoke(HttpContext context)
         at Microsoft.AspNetCore.Diagnostics.DeveloperExceptionPageMiddlewareImpl.Invoke(HttpContext context)

Expected/desired behavior

The application runs without any thrown exceptions.

TicketID:

1701697

Environment

• Kendo UI version: 2025.3.1002
• jQuery version: x.y
• Browser: [all]

[mihaela-lukanova]

As a workaround, use a TagHelper Form:

<kendo-form name="formExample" form-data="@Model.Person">
        ...
</kendo-form>