ASP.NET Core 5 Razor Pages - editing a master/detail setup - loosing data

Question

I haven't done any web/frontend development in a while, and so I'm a bit rusty. I'm using ASP.NET Core 5 with Razor Pages.

I'm trying to create an edit page that would allow me to edit the children (1:n) of a given entity. For now, I have a country/city sample - list of countries, each with a few cities. What I want to do is show all the countries (works fine), and then pick a country and edit its cities. That's where I'm struggling.

These are my model classes:

public class Country
{
    public string IsoCode { get; set; }
    public string Name { get; set; }
    // more properties in the future
    
    public ICollection Cities { get; set; }
}

public class City
{
    public string Name { get; set; }
    public int Population { get; set; }

    public Country Country { get; set; }
    [ForeignKey("Country")] 
    public string CountryIsoCode { get; set; }

    // more properties to come
}

The Razor page I have to show and edit the cities for a given country looks something like this:

View:

@page "{isocode}"
@using CountryCityDemo.Models
@model CountryCityDemo.Pages.EditCitiesModel

Edit cities for a country


    
        
            
                @Model.SelectedCountry.Name
            
        

        @foreach (City city in Model.SelectedCountry.Cities)
        {
            
                
                    Name of the city
                
                
                    
                
            
            
                
                    Population
                
                
                    
                
            
        }

Page model class:

public class EditCitiesModel : PageModel
{
    [BindProperty]
    public Country SelectedCountry { get; set; }

    public async Task OnGetAsync(string isocode)
    {
        // get countries from provider - including their cities
        SelectedCountry = CountryProvider.GetCountry(isocode, true);
    }

    public async Task OnPostAsync(string isocode)
    {
        // fetch the list of cities for this country
        List citiesForCountry = CityProvider.GetCitiesForCountry(isocode).ToList();

        // update those cities
        if (await TryUpdateModelAsync>(citiesForCountry, "city"))
        {
            // save the updated cities
        }

        /* I also tried to use the "SelectedCountry" bind property - but had the same results:
        
        SelectedCountry = CountryProvider.GetCountry(isocode);

        if (await TryUpdateModelAsync(SelectedCountry, "SelectedCountry", c => c.Name, c => c.IsoCode, c => c.PrimaryLanguage))
        { ..... }           
        */
        
        return RedirectToPage("Data");
    }
}

The page comes up just fine, everything is peachy, and I can edit the cities' name and population - no problem. When I click on "Update", the post method on the PageModel class is called - all seems just great. When I inspect the HttpContext.Form, I can see the values for the cities names and populations that I entered - so all appears to be fine.

BUT: after calling the TryUpdateModelAsync method, the citiesForCountry list is empty - no entries anymore, data entered manually is not applied :-(

Same happens when I'm using the SelectedCountry bind property - it's fine after being fetched from the provider, it has its list of cities (with the stored values), but after I call TryUpdateModelAsync, that list of cities is wiped out and the new values aren't stored anywhere....

I also tried to get the "view model" of type Country passed into my OnPostAsync method - like I used to be doing it with ASP.NET MVC back in the days:

    public async Task OnPostAsync(string isocode, Country edited)

I do get the basic information of the country - but again, the master/child Cities are not set, not populated with the values I've entered on the page.

So what am I missing here? I'm thinking there must be a detail I'm overlooking - but I can't seem to make sense of any of the articles, blog posts, tutorials etc. I've seen.... I seem to be doing exactly what they describe - alas, in my case, the data just doesn't quite make it into my view model (or rather: Razor PageModel) on post......

user_134725 · Answer

You need to use an indexer to enable binding of data to a collection: https://www.learnrazorpages.com/razor-pages/model-binding#binding-complex-collections. Since you are editing existing data, you would usually use an explicit index based on the key value of each item you are editing. Not sure what your model looks like, so I will use "Key" to represent the value:

@foreach (City city in Model.SelectedCountry.Cities)
{
    
    
    
        
            Name of the city
        
        
            
        
    
    
        
            Population
        
        
            
        
    
}

user_11398810 · Answer

For model, Model binding system looks through the sources for the name pattern prefix.property_name.If nothing is found, it looks for just property_name without the prefix. But for list model, its name pattern must have index. So you need specific the name like: [index].property_name or prefix[index].property_name.

@{int i = 0;}   //add this..
@foreach (City city in Model.SelectedCountry.Cities)
{
    
        
            Name of the city
        
        
                                     //change the name pattern
            
        
    
    
        
            Population
        
        
            
        
    
    i++;     //be sure add here...
}

TryUpdateModelAsync() can only preserve the top-level object it's passed and any properties that are completely untouched. Unless a collection property is not bound, it will be cleared and then filled with new elements. You need change like what this github issue said:

for (int i = 0; i < citiesForCountry.Count; i++)
{
    await TryUpdateModelAsync(citiesForCountry[i], $"[{i}]");
}
//...

ASP.NET Core 5 Razor Pages - editing a master/detail setup - loosing data

2 Answers