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.

[![enter image description here](https://i.stack.imgur.com/cbhNy.png)](https://i.stack.imgur.com/cbhNy.png)

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. 

[![enter image description here](https://i.stack.imgur.com/AMv8Z.png)](https://i.stack.imgur.com/AMv8Z.png)

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.

[![enter image description here](https://i.stack.imgur.com/YLySx.png)](https://i.stack.imgur.com/YLySx.png)

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:

```html
@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);
    }

```

[![enter image description here](https://i.stack.imgur.com/v7ixe.jpg)](https://i.stack.imgur.com/v7ixe.jpg)

[![enter image description here](https://i.stack.imgur.com/O7ohg.png)](https://i.stack.imgur.com/O7ohg.png)