Create a Relational Database using ASP.NET Core (MVC) Pt. 3 | Dear Coder

Dear Coder,

I have a problem.

If you read my last letter, you might recall I used Entity Framework to save a lot of time scaffolding my Controllers and Views for the Genres and Uploads Models for my ToonSpace application.

But I signed my last letter with a minor bug:

My GenreId dropdown (which should just display "Genre", but I'll get to that later) displays blank. This isn't a big deal though, as it's simply a result of Entity Framework trying to anticipate the purpose of that field. But it isn't functional.

I want to provide the user with a pre-populated list of options for the Genre of their uploaded webtoons, and I achieve this with enums.

Using Enums to Create a Dropdown

I first create a new folder on the top level of my project in the Solutions Explorer called "enums" and add a new class to it called GenreName.

The enum type is essentially a comma-separated list of strings, zero-indexed, and alphanumerical. I use the indexed property of my enum to function as the GenreId for each Upload object.

I declare it as a public enum instead of a class and create five options for a user to choose from.

Next I add GenreName as a property of my upload Model, making sure to a using directive for GenreName in my using directives above.

Display Enum Data in Dropdown

I make some small changes to my Create and Edit Views in the Uploads View folder, changing all instances of GenreId to GenreNames and amending the asp-items property to connect it to my enum.

            <div class="form-group">
                <label asp-for="GenreName" class="control-label"></label>
                <select asp-for="GenreName" class ="form-control" asp-items="Html.GetEnumSelectList<GenreName>()"></select>
            </div>

I make sure to add a using directive to bring in my Enums folder as well.

Before building the solution, I migrate my changes to the database and update it.

Finally, I build the solution and check that my new dropdown menu works.

A brief Note on Data Annotations

If you're like me, dear Coder, you might find the Pascal case of GenreName and SciFi in the dropdown to be off-putting from the end user's perspective.

We can fix these cosmetic issues by leveraging Data Annotations.

Though enums are alphanumerical, I can still use a hyphen within a data annotation to display the enum's value in the View. I simply add this using directive:

using System.ComponentModel.DataAnnotations;

and this display text above the index of my desired value:

[Display(Name = "Sci-Fi")]
SciFi,

The result is something like this on the page:

I simply use the same using directive and display syntax in my Upload model to clean up the Genre Name tag.

---

Finally, our bugs are fixed and the data displays nicely for the end user.

I hope my letters are finding you well, dearest Coder, and I look forward to your swift replies.

Until then, godspeed in your keystrokes.

Clickity Clacks,

Kasey