23 Feb 2021
It can be extremely infuriating to stumble over something so seemingly simple as the Select List control, and having to spend time trying to make it work, instead of focusing on what really matters in the given moment – be it learning a new tech or developing your web app.
ASP.NET Core MVC made is somewhat easier to deal with select lists. Previously in .NET Framework, you had quite a few ways of supplying data to your Select Lists, to the point where it just got ridiculous and it seemed like the bloody thing just wanted to kill you.
Now a lot of ambiguity seems to have been removed, and Tag Helpers for MVC and Razor Pages are much easier to use. Let’s have a look at how you can set default option for Select List control in ASP.NET Core MVC or Razor Pages.
Below is an example code that does several things that are very important if you want to use Select List control:
asp-itemsspecifies the data source to be used to populate collection of
asp-forspecifies both the selected value (YES, THAT’S WHAT WE WANT!) and the name of the form element that’s going to be used for POSTing the data back to your controller
The most confusing bit here is
asp-for="Country" – while it refers to the View Model
Country, you need to
Model. prefix. On the contrary, you DO WANT to have that prefix for
Consistency? Yeah nah, Microsoft knows better. 🤦
Just remember - values of both attributes refer to fields in your View Model. So in this instance, your View Model will look like this:
Every time you pass the View Model to the View, you need to populate the fields. Below is the code that’s used to set required data on the View Model.
There are several things to watch out for.
You may not have many items in your Select List and thus decide not to bother with
attribute. Most likely, that’s not a good decision. It’s much easier to delegate control rendering
to Razor templating engine than trying to set selected option yourself.
Second, you want to make sure that you supply a collection of
attribute, otherwise you’re going to get a compilation error looks something like this:
implicitly convert type 'Whichever wrong type you used' to
explicit conversion exists (are you missing a cast?)
Third, try to avoid using
TempData and alike as the way to pass data from
Controller to the View, and just use View Models. This way you will avoid a lot of cryptic errors,
and get the compile time type checking out of the box.
Also, you always want to pay close attention to how you pass data to tag helpers, so they render correctly in all scenarios: on the first page load, during POST back that fails validation, or when populating forms with data from existing objects/DB.
Hopefully, this article shows how to use Select List control in your ASP.NET Core apps and saves you some time in the future by showing you the most frequent mistakes developers make.
Download fully tested and 100% working Visual Studio solution with the source code used in this article for FREE – just enter your name and email in the form below, and I’ll send you the download link right away.
You will also get access to all the source code for all existing and new articles on the site, and access to my mailing list, which receives handy timesaving tips on .NET Core programming.