Uncategorized

Selectable Enum Dropdown List Using TagHelpers

This post is going to look into how populate a dropdown list with the contents of an enum using a TagHelper and an HTML Helper.

In case you aren’t familiar with TagHelpers, TLDR:

TagHelpers use server-side code to render HTML concisely and is readable for those not familiar with Razor markup.

If you want to learn more, checkout the docs here.

Alright, let’s dive in with our setup!

Enum:

public enum DogName
{
       Fido,
       Buddy,
       Bear
}

Model:

public class Dog
{
      public DogName DogName{ get; set; }
}

Make sure both the class and property are public.

View:

In the beginning of your view, be sure to bind the Model:

@model RescueShare.Models.Dog

Then, using our <select> TagHelper in our Razor View to create the actual dropdown:

<select asp-for="DogName"
asp-items="Html.GetEnumSelectList<DogName>()">
</select>

The asp-for attribute binds the values to the DogName property. Then, asp-items populuates the dropdown with values from our DogName enum using our GetEnumSelectList HTML Helper.

Here are the major benefits for using a TagHelper in this scenario:

  1. Ability to access server-side data
  2. Concise and easy to read
  3. Works with Intellisense

And that’s it! We have gone through how to successfully bind a <select> TagHelper to an enum in a Razor View using an HTML Helper for an ASP.NET Core MVC app!

Web App Series

Basics of .NET Web Apps – Part 3: MVC

Welcome back! Now that we have our environment set up, this post is going to go into more detail about the MVC (Model-View-Controller) design pattern and how it helps us write clear and reusable code.

If this is the first post of the series you are reading, everything should make just as much sense to you as it would if you were following along. However, if you need help setting up your environment, feel free to check out the first two posts here and here.

Let’s dive in!

First, what is a design pattern? A Design Pattern is a commonly used solution to commonly encountered problems. The problem MVC handles, is how to separate business logic from what the end user sees. The reason I’m choosing to use MVC is because it is relatively simple to understand and implement and has a solid community around it (MVC has been around since the 70s but has been an official project type if ASP.NET for about 10 years).

Let’s break it up.

M (Model) – The model is where you hold your business logic and data.

V (View) – The view is what the end user sees and interacts with. We will be setting up our views using Razor syntax.

C (Controller) – The controller is how the model and view communicate and decides which view to render to the user.

The flow looks a little like this:

The Controller renders data from the Model to the View, deciding which view the user needs to see. The user sees the View and sends requests back to the Controller. The Controller then updates the Model. The Model accesses data from the database and sends the data back to the Controller that sends the data up to the View for the user.

Here is a way to visualize:

MVCFlow

Let’s walk through an example using our handy Dog class.

First, let’s create out Model.

We set up our dog class in Part 2 and it looked a little like this:

namespace RescueShare.Models
{
public class Dog
{
public string ID { get; set; }
public string Name { get; set; }
public string Breed { get; set;}
}
}

This class is going to be our Model (conveniently positioned in the Models folder). Notice we have our 3 properties. We could also add some basic functions but we’ll leave it at the properties for now.

Next up is our Controller.

You should already have a “Controllers” folder if you’ve installed MVC as discussed in Part 1 but if not, go ahead and create a folder under your solution called “Controllers”.

Right click on this folder and hit Add -> Controller .

Select MVC Controller with Views…

2019-07-08_1547

On the next screen, we are going to tell the Controller which Model we want it to be tied to. In this example, we will be using the Dogs Model:

2019-07-08_1551

It will also ask for your DbContext and what you want to name the Controller. Naming convention for Controllers is [Model] + ‘s’. So, since our Model is called “Dog”, our Controller will be called “Dogs”.

And, create!

Take a minute to look around at what just got created:

  1. Brand new Controller class with several built in HTTP requests
  2. A new Views folder named after our model with 5 built in Views (Create, Edit, Delete, Details, Index)
  3. Click into one of the Views, your Model is already wired up and looks like this:
@model RescueShare.Models.Dog

Woo! Now we have used the MVC design pattern!

Now we’ll walk through how these parts interact with the user.

On our Create Dog page

2019-07-08_2123

we see our Name and Breed fields. The Controller grabs these from the Model then displays them to the View. If we remove either of those fields from the Model and refresh, the Controller will see that change and update the View.

Now, we can enter some values into the fields. Once saved, the Controller will take these values and bring them to the Model. The Model checks to see if it needs to do anything with these values and if not, stores them in the database.

Here are the 3 main files interacting on this page using MVC:

2019-07-08_2129

And there you have it! The very basics of MVC.