DEV Community

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

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

piaomu profile image Kasey Wahl ・3 min read

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:

Blank Dropdown 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.

Enum Folder

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.

GenreName enum

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

Updated Uploads Model

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>
Enter fullscreen mode Exit fullscreen mode

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

@using ToonSpace.Enums

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.

It 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;
Enter fullscreen mode Exit fullscreen mode

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

[Display(Name = "Sci-Fi")]
SciFi,
Enter fullscreen mode Exit fullscreen mode

The result is something like this on the page:
Data Annotations

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

Final Upload Model


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

All Done

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

Discussion (0)

Forem Open with the Forem app