Wizard with nested model structure - ContentUrl does not serialize complex model

[Bas]

We have a complex data model that has a nested complex property, for example:

public class Person
{
    string Name {get; set}
    Address Address {get; set;}
    public DateTime? Dob { get; set; }
    public bool? AuthToWork { get; set; }
    ...
}

public class Address
{
    public string Street { get; set; }
    public string City { get; set; }
    public string State { get; set; }
    public string Zip { get; set; }
    public string Country { get; set; }
}

I have a Wizard control in which I tried to get the content of the steps through the following: 

ContentUrl(Url.Action("someAction",  "myController",  Model))

I have two issues:

1. The model is not being deserialized properly, the complete properties are not serialized--only the type name. I might be missing something, please let me know what I'm missing.
2. The Action activates the server-side validation, which is not what we wanted. How can I prevent server-side validation?

We'll greatly appreciate any suggestions or pointers.

Many thanks

[Mihaela]

Hello Bas,

1. Here is an example of how to pass a Model with complex properties through the ContentUrl() method of the Wizard:

//View
@model ProjectName.Models.Person

    @(Html.Kendo().Wizard()
        .Name("wizard")
        .LoadOnDemand(true)
        .ReloadOnSelect(false)
        .Steps(steps =>
        {
            steps.Add().ContentUrl(Url.Action("Step1Data", "ControllerName", new { street = Model.Address.Street, city = Model.Address.City, state = Model.Address.State, zip = Model.Address.Zip, country = Model.Address.Country }))
            .Buttons(b => { b.Next(); });
            ...
        })
    )

//Controller
public IActionResult Step1Data(string street, string city, string state, string zip, string country)
{
            Person person = new Person()
            {
                Address = new Address()
                {
                    Street = street,
                    City = city,
                    State = state,
                    Zip = zip,
                    Country = country
                }
            };
            return PartialView("_Step1View", person);
}

//PartialView
@model ProjectName.Models.Person

<ul>
    <li>Street: @Model.Address.Street</li>
    <li>City: @Model.Address.City</li>
    <li>State: @Model.Address.State</li>
    <li>Zip: @Model.Address.Zip</li>
    <li>Country: @Model.Address.Country</li>
</ul>

      2. You could disable the automatic validation of the Kendo Form configured for a specified Wizard step by using the ValidateForms() method:

 @(Html.Kendo().Wizard()
        .Name("wizard")
        .ValidateForms(false)
        ...
)

If any questions arise, please let me know.

 

Regards, Mihaela Progress Telerik

[Bas]

This answer is worse than "we don't support complex models on the ContentUrl." Anyway, thanks for trying.

[Mihaela]

Hi Bas,

It is how the ASP.NET Core Model bindings work by design. For more information, refer to the official model binding in ASP.NET Core documentation.

When passing the Model to Controller through an anchor tag or a button, the Query String parameters are appended as follows:

<a href='@Url.Action("Step1Data", "Home", Model)'>Send Model</a>

/Home/Step1Data?Name=John%20Smith&Address=ProjectName.Models.Address&Dob=01%2F01%2F2022%2000%3A00%3A00&AuthToWork=True

As a result, the "Address" property is received as "null" in the "Step1Data" Action method.

To access the "Address" property:

<a href='@Url.Action("Step1Data", "Home", Model.Address)'>Send Model</a>

/Home/Step1Data?Street=Lake%20Forest%20Drive&City=New%20York&State=New%20York&Zip=4836&Country=USA

public IActionResult Step1Data(Address model)
{
  ...
}

I hope that helps.