ASP.NET Core - MVC. Drop down populate issue - asp.net-mvc

Question

I'm using vs 2017 and chrome.
I have an ASP.Net Core MVC app. It has a drop down that isn't showing the items correctly. The items displayed should be: Comedy, Western and Romantic.
Here's the debug image. The items shows the array and the text {MvcMovie.Modesl.Genre} and as I click each, the item text shows as I want.
I select the genres from the database and return them as as List and cast it to a SelectList as that is what is it is rendered as HTML a element with the collection of SelectListItem objects.
However, when I look at the Raw View, I only see the text {MvcMovie.Modesl.Genre} which is what is being shown in the drop down.
I populate the movieGenreVM and return it as a view in the Index action method.
public IActionResult Index(string movieGenre, string searchStringEntered)
{
// A list of genre objects.
SelectList genresList;
// A list of movie objects.
List<Movie> moviesList;
// Instantiate the View model.
var movieGenreVM = new MovieGenreViewModel();
// Get a list of genres from the database.
genresList = new SelectList(GetGenres(movieGenre));
// Get a list of movies from the database.
moviesList = GetMovies(searchStringEntered);
// Sets the models property which is then used in the dropdown of Genres.
movieGenreVM.genres = genresList;
// Creates a List object.
// Movie is populated from the database and used to generate an HTML table of loaded movies.
movieGenreVM.movies = moviesList;
// Passing the MovieGenreViewModel.
// Return the IActionResult - the Index.cshtml. A view template to generate an HTML response to the browser.
return View(movieGenreVM);
}
namespace MvcMovie.Models
{
public class MovieGenreViewModel
{
// A list of movies.
public List<Movie> movies;
// A SelectList containing the list of genres.
public SelectList genres;
// Contains the selected genre.
public string movieGenre { get; set; }
}
}
The genre models is:
public class Genre
{
public string MovieGenre { get; set; }
// Constructor.
public Genre()
{
}
public Genre(string a_MovieGenre)
{
MovieGenre = a_MovieGenre;
}
}
Here's the population of the genre list code:
// Create a list of genres.
private List<Genre> _genre = new List<Genre>();
public List<Genre> Genre
{
get
{
return _genre;
}
}
public List<Genre> GetGenres(string movieGenre)
{
Boolean errorSw = false;
// Declare the reader and initialize.
SqlDataReader GenresDataReader = null;
try
{
// Open the connection.
dbFunc.OpenDB();
// Get the list of distinct Genres by executing a stored procedure.
SqlCommand GenresCmd = new SqlCommand("dbo.SelectGenres", dbFunc.objConn);
GenresCmd.Parameters.Clear();
GenresCmd.CommandType = CommandType.StoredProcedure;
GenresCmd.Parameters.Add("#SearchText", SqlDbType.VarChar).Value = movieGenre;
// Set the reader.
GenresDataReader = GenresCmd.ExecuteReader();
// Loop thru the results returned.
while (GenresDataReader.Read())
{
// Add to the list of genres - creates a new row for the collection.
Genre.Add(new Genre(GenresDataReader["Genre"].ToString()));
}
}
catch (Exception ex)
{
errorSw = true;
}
finally
{
if (GenresDataReader != null)
{
GenresDataReader.Close();
}
dbFunc.CloseDB();
}
// Return the list of genre objects.
return Genre;
}
Here's the view:
#model MvcMovie.Models.MovieGenreViewModel
#{
ViewData["Title"] = "Index";
}
<h2>List of Movies</h2>
<p>
<a asp-action="Create">Create New</a>
</p>
<form asp-controller="Movies" asp-action="Index" method="get">
<p>
#* A dropdown. *#
<select asp-for="movieGenre" asp-items="Model.genres">
<option value="">All</option>
</select>
Title: <input type="text" name="searchStringEntered">
<input type="submit" value="Filter" />
</p>
</form>
#* Shows the list of movies. *#
<table class="table">
<thead>
<tr>
<th>
#Html.DisplayNameFor(model => model.movies[0].Title)
</th>
<th>
#Html.DisplayNameFor(model => model.movies[0].ReleaseDate)
</th>
<th>
#Html.DisplayNameFor(model => model.movies[0].Genre)
</th>
<th>
#Html.DisplayNameFor(model => model.movies[0].Price)
</th>
<th>
#Html.DisplayNameFor(model => model.movies[0].Rating)
</th>
<th></th>
</tr>
</thead>
<tbody>
#foreach (var item in Model.movies) {
<tr>
<td>
#Html.DisplayFor(modelItem => item.Title)
</td>
<td>
#Html.DisplayFor(modelItem => item.ReleaseDate)
</td>
<td>
#Html.DisplayFor(modelItem => item.Genre)
</td>
<td>
#Html.DisplayFor(modelItem => item.Price)
</td>
<td>
#Html.DisplayFor(modelItem => item.Rating)
</td>
<td>
<a asp-action="Edit" asp-route-id="#item.ID">Edit</a> |
<a asp-action="Details" asp-route-id="#item.ID">Details</a> |
<a asp-action="Delete" asp-route-id="#item.ID">Delete</a>
</td>
</tr>
}
</tbody>
</table>
This tutorial is using Entity Framework but I am converting it to using ADO.net and stored procedures. The EF version of the drop down works fine.
Here is the the EF versions Index action method. The genre is just the text - no Id associated with it.
public async Task<IActionResult> Index(string movieGenre, string searchStringEntered)
{
IQueryable<string> genreQuery = from m in _context.Movie
orderby m.Genre
select m.Genre;
var movies = from m in _context.Movie
select m;
if (!String.IsNullOrEmpty(searchStringEntered))
{
movies = movies.Where(s => s.Title.Contains(searchStringEntered));
}
if (!String.IsNullOrEmpty(movieGenre))
{
movies = movies.Where(x => x.Genre == movieGenre);
}
// Instantiate the model.
var movieGenreVM = new MovieGenreViewModel();
// The SelectList of genres is created by projecting the distinct genres.
// Sets the models property which is then used in the dropdown of Genres.
movieGenreVM.genres = new SelectList(await genreQuery.Distinct().ToListAsync());
// Creates a List object.
// Movie is populated from the database and used to generate an HTML table of loaded movies.
movieGenreVM.movies = await movies.ToListAsync();
return View(movieGenreVM);
}

Answer 1

From your screenshot, it is clear that your SelectList is missing the DataTextField and DataValueField. So the SELECT tag helper do not know which property should be used for the text and which should be used for Value.
The solution is to specifiy it when you create the SelectList object.Since your Genre entity class has only one property MovieGenre, you can use that for both Text and Value
var generesList = new SelectList(GetGenres(movieGenre),"MovieGenre","MovieGenre");
var vm=new MovieGenreViewModel { genres= generesList};
return View(vm);
Now in your view, you can use Select tag helper with this genres property
#model MovieGenreViewModel
<select asp-for="movieGenre" asp-items="#Model.genres"></select>
The select tag helper will use the DataValueField property value for the option value attribute and DataTextField property value for the option text.
Or Since you only have one property in your enter code hereGenre class, you can pass the list of strings to the SelectList constructor. The below will also work.
var gList=GetGenres(movieGenre);
var generesList = new SelectList(gList.Select(a=>a.MovieGenre));
var vm=new MovieGenreViewModel { genres= generesList};
return View(vm);
Here is a post explaining different options to use the SELECT tag helper, for your reference
Select Tag Helper in ASP.NET Core MVC

Answer 2

This is an example of how I do it:
var items = GetItemsFromDB();
var vals = new List<SelectListItem> {new SelectListItem {Selected = true, Text = "--Select an Item--", Value = "0"}};
vals.AddRange(items.Select(item => new SelectListItem
{
Selected = false, Text = item.Type, Value = item.Id.ToString()
}));
var result = new SelectList(vals, "Value", "Text");
As you can see when i convert it to a SelectList I specify the Value and Text as dataValueField and dataTextField.
In your case you need properties for these values and specify them when you "cast it" using the SelectList constructor.
In my view I do this:
<select asp-for="Model.ItemId" asp-items="Model.MyItemSelectList"></select>
Where Model.MyItemSelectList can be a List of SelectListItem
Another way to bind it to a collection is like this:
<select asp-for="Model.MyItemId">
<option value="">-- Select Item --</option>
#{
foreach (var item in Model.MyItems)
{
<option value="#item.Key">#item.Value</option>
}
}
</select>
Where item has Key and Value properties. The properties can be names whatever you want. In this case "item" has those properties.