MVC.NET Core / Razor: Submit value from Select box to DB

Question

The form is defined in Add.cshtml:

@using bendinsnMusicApp.Models
@model Album

<h2>Add Album</h2>

<form action="Add" method="post">
    Title: <input type="text" name="Title" value="" autofocus />
    <span asp-validation-for="Title" class="text-danger"></span><br />
    Price: <input type="number" name="Price" value="" />
    <span asp-validation-for="Price" class="text-danger"></span><br />
    Artist: <select name="Artist">
        @foreach (Artist artist in ViewBag.Artists)
        {
            <option [email protected]>@artist.Name</option>
        }
    </select>
    <span asp-validation-for="Artist"></span><br />
    Genre: <select name="Genre">
    @foreach (Genre genre in ViewBag.Genres)
    {
        <option [email protected]>@genre.Name</option>
    }
    </select>
    <span asp-validation-for="Genre"></span><br />

    <input type="submit" value="Submit" />
</form>

The error occurs in the following action in my controller, AlbumsController.cs:

[HttpPost]
public IActionResult Add(Album a)
{
    var albums = _context.Albums;
    albums.Add(a);
    _context.SaveChanges();
    var albums2 = _context.Genres.ToList();
    ViewBag.Artists = _context.Artists.ToList();
    ViewBag.Genres = _context.Genres.ToList();
    return View("Index", albums2);
}

Specifically, when attempting to save the changes, the update fails because the foreign keys of the Album object, ArtistID and GenreID, are both 0 every time, and Artist and Genre are both null. For completeness, here is the Album class:

public class Album
{
    public int AlbumID { get; set; }
    public string Title { get; set; }
    [Required]
    [DataType(DataType.Currency)]
    public decimal Price { get; set; }

    public int ArtistID { get; set; }
    public Artist Artist { get; set; }
    public int GenreID { get; set; }
    public Genre Genre { get; set; } 
}

It seems that some error is preventing the form from properly submitting the Artist and Genre fields, both of which are select elements. Further, I expect that even if the actual content of those elements was submitted, it would not include the FK values.

Note that ViewBag.Artists and ViewBag.Genres are defined as _context.Artists.ToList() and _context.Genres.ToList() respectively in the action to render the view. Each Genre and Artist includes a Name and [class]ID, and Artist has an associated text field called Bio as well.

The Albums table includes fields for AlbumID, ArtistID, GenreID, Price, and Title. The first three are ints, the second is a decimal, and the last is nvarchar.

What needs to be done to:

A) Submit the content of the select elements along with the rest of the form?

B) Use the ArtistID and GenreID values (ints in their respective classes) as arguments for filling the Albums table?

jolyeons jolyeons · Accepted Answer · 2016-10-19T17:13:23

The name of each select input needs to correspond to the field in the Model that the value will fill in when the Model Binding occurs.

Change the code:

<select name="Artist">

to

<select name="ArtistID">

and the same for the Genre select, name="GenreID"

That will allow the Model Binding to pick up those values correctly, and then you can use them in the Controller as you need.

MVC.NET Core / Razor: Submit value from Select box to DB

1 Answers