I am attempting to organise a blog list page by a user dropdown selection (either ascending or descending order based on datePublished value).

@{
        var selection = Umbraco.Content(Guid.Parse("74c222ad-f087-4c53-9523-60de11657a0a"))
            .Children()
            .Where(x => x.IsVisible())
            .OrderByDescending(x => x.Value("datePublished"));
    }
                        <div>
                            <select>
                                <option label="Date: Newest to Oldest" value="1">Date: Newest to Oldest</option>
                                <option label="Date: Oldest to Newest" value="2">Date: Oldest to Newest</option>
                            </select>
                        </div>

                        <ul>
                            @foreach (var item in selection)
                            {
                                <li>
                                    @if (item.HasValue("newsImage"))
                                                {
                                                        {
                                                            var image = item.Value<IPublishedContent>("newsImage");
                                                            <a href="@item.Url"><img class="block__image" alt="Alt - @item.Name" src="@image.Url"></a>
                                                        }
                                                }
                                </li>
                            }
                        </ul>

I have managed to render the child nodes in descending order but I can't think of how best to solve this problem.

I have reduced the code to keep it simple but any help would be greatly appreciated.