Learning .NET MAUI – Part 5

When last we looked, we were returning a few countries. Let’s use ZipWise’s ability to look up a city name and give us all the info about all matching cities. We’ll then have fun with displaying that info.

When I ask for all cities named Middletown I get a nice set of results

{"results":[{"zip":"02842","city":"Middletown","state":"RI"},{"zip":"05143","city":"Middletown","state":"VT"},{"zip":"06457","city":"Middletown","state":"CT"},{"zip":"06459","city":"Middletown","state":"CT"},{"zip":"07748","city":"Middletown","state":"NJ"},{"zip":"10940","city":"Middletown","state":"NY"},{"zip":"10941","city":"Middletown","state":"NY"},{"zip":"17057","city":"Middletown","state":"PA"},{"zip":"19709","city":"Middletown","state":"DE"},{"zip":"21769","city":"Middletown","state":"MD"},{"zip":"22645","city":"Middletown","state":"VA"},{"zip":"22649","city":"Middletown","state":"VA"},{"zip":"40243","city":"Middletown","state":"KY"},{"zip":"40253","city":"Middletown","state":"KY"},{"zip":"45005","city":"Middletown","state":"OH"},{"zip":"45042","city":"Middletown","state":"OH"},{"zip":"45044","city":"Middletown","state":"OH"},{"zip":"47356","city":"Middletown","state":"IN"},{"zip":"52638","city":"Middletown","state":"IA"},{"zip":"62666","city":"Middletown","state":"IL"},{"zip":"63359","city":"Middletown","state":"MO"},{"zip":"95461","city":"Middletown","state":"CA"},{"zip":"05757","city":"Middletown Springs","state":"VT"},{"zip":"19056","city":"Middletown Twp","state":"PA"},{"zip":"07748","city":"N Middletown","state":"NJ"},{"zip":"40357","city":"N Middletown","state":"KY"},{"zip":"44442","city":"New Middletown","state":"OH"},{"zip":"47160","city":"New Middletown","state":"IN"},{"zip":"07748","city":"North Middletown","state":"NJ"},{"zip":"40357","city":"North Middletown","state":"KY"},{"zip":"15379","city":"W Middletown","state":"PA"},{"zip":"45042","city":"W Middletown","state":"OH"},{"zip":"15379","city":"West Middletown","state":"PA"}]}

I’ll leave it to you to put this into Json Prettifier as the result is pretty long for a blog post. We do, now, have a nice list of cities we can display, along with their states and zip codes.

Dropping the results into Json2Csharp.com, I get back two very simple classes:

    public class Result
    {
        public string zip { get; set; }
        public string city { get; set; }
        public string state { get; set; }
    }

    public class Root
    {
        public List<Result> results { get; set; }
    }

I started by copying the code from the previous blog post, so I’ll clean out the model folder, throwing away the city.cs altogether, and replacing the contents of Result and Root with this, and renaming Results to Result.

Next, I’m going to add an image url field to the Result class, which I will hand fill with some images of various Middletowns.

 public class Result
 {
     public string zip { get; set; }
     public string city { get; set; }
     public string state { get; set; }
     public string imageUrl { get; set; }

 }

We want to deserialize the json into instances of Result, and then I'll add some url's by hand so that we can play with images.

Let’s see what kinds of things we can do with this data.

<CollectionView>
    <CollectionView.ItemsSource>
        <x:Array Type="{x:Type model:Result}">
            <model:Result
                image="https://upload.wikimedia.org/wikipedia/commons/thumb/2/22/Seal_of_New_York_%28state%29.svg/150px-Seal_of_New_York_%28state%29.svg.png"
                state="NY"
                zip="07748" />
            <model:Result
                image="https://upload.wikimedia.org/wikipedia/commons/thumb/4/49/Flag_of_Vermont.svg/188px-Flag_of_Vermont.svg.png"
                state="VT"
                zip="05143" />
            <model:Result
                image="https://upload.wikimedia.org/wikipedia/commons/thumb/9/96/Flag_of_Connecticut.svg/188px-Flag_of_Connecticut.svg.png"
                state="CT"
                zip="06457" />
        </x:Array>
    </CollectionView.ItemsSource>
    <CollectionView.ItemTemplate>
        <DataTemplate x:DataType="model:Result">
            <VerticalStackLayout>
                <HorizontalStackLayout>
                    <Label
                        Margin="5,5,5,0"
                        Text="{Binding zip}"
                        VerticalTextAlignment="Center" />
                    <Label
                        Padding="5"
                        Text="{Binding state}"
                        VerticalTextAlignment="Center" />
                    <Image
                        Margin="5,0,5,5"
                        Aspect="Fill"
                        HeightRequest="25"
                        Source="{Binding image}"
                        WidthRequest="25" />
                </HorizontalStackLayout>
            </VerticalStackLayout>
        </DataTemplate>

    </CollectionView.ItemTemplate>
</CollectionView>

Much like in the previous blog post, we are using a CollectionView to display the data that we’ve hand-added to an inline array. The images are links to public images on Wikipedia.

There is more we can do with data manipulation but I think it is time to turn our attention to various ways to display the data. That will be in the next post.

Source Code