Problem populating dropdown boxes in an ASP.NET MVC 3 Application

Question

I have completed the new tutorial (musicstore) on MVC 3 over on www.asp.net. It all went fine except for the part where two dropdown boxes should be populated from the database - and they are not.

I followed the tutorial and double checked my code. I think the problem may be using the editorstemplate folder. No idea really since Im new to MVC. So whats the problem or how can I debug it?

==============

Edit 1

okay so here is some of the code for album.cshtml which is in the /views/shared/editortemplates/ folder

   @model MvcMusicStore.Models.Album
<p> @Html.LabelFor(model => model.Genre) @Html.DropDownList("GenreId",
new SelectList(ViewBag.Genres as System.Collections.IEnumerable,
"GenreId", "Name", Model.GenreId))
</p>
<p> @Html.LabelFor(model => model.Artist) @Html.DropDownList("ArtistId",
new SelectList(ViewBag.Artists as System.Collections.IEnumerable,
"ArtistId", "Name", Model.ArtistId))
</p>

which I believe is populated from:

public ActionResult Edit(int id)
{ ViewBag.Genres = storeDB.Genres.OrderBy(g => g.Name).ToList(); ViewBag.Artists = storeDB.Artists.OrderBy(a => a.Name).ToList();
var album = storeDB.Albums.Single(a => a.AlbumId == id);
return View(album);
}

I don't get any errors apart from the fact the dropdowns are not populated...

==============

Edit 2

so I have edit.cshtml in the /views/storemanager/edit.cshtml and then I have album.cshtml in /views/shared/editortemplates/album.cshtml. The dropdowns are supposed to be populated from album.cshtml into edit.cshtml. I put the code from album.cshtml directly into edit.cshtml and it works fine. So I think the problem is that the editortemplates/album.cshtml is not working i.e. populating the edit.cshtml page. So what gives? Thanks...

==============

Edit 3

Ok I found the problem, I got the working source from CodePlex. It seems I didnt have the create.cshtml and edit.cshtml pages setup properly. Anyway all fixed now so thanks...

Solution

I would recommend you working with view models and avoid using any ViewBag. So you start by defining a view model:

public class AlbumViewModel
{
    public string GenreId { get; set; }
    public IEnumerable<Genre> Genres { get; set; }

    public string ArtistId { get; set; }
    public IEnumerable<Artist> Artists { get; set; }

    public Album Album { get; set; }
}

and then inside your controller action you would populate this view model:

public ActionResult Edit(int id)
{
    var model = new AlbumViewModel
    {
        Genres = storeDB.Genres.OrderBy(g => g.Name),
        Artists = storeDB.Artists.OrderBy(a => a.Name),
        Album = storeDB.Albums.Single(a => a.AlbumId == id)
    };
    return View(model);
}

and finally in your editor template (~/Views/Shared/EditorTemplates/AlbumViewModel.cshtml):

@model MvcMusicStore.Models.AlbumViewModel
<p> 
    @Html.LabelFor(model => model.GenreId) 
    @Html.DropDownListFor(x => x.GenreId, new SelectList(Model.Genres, "GenreId", "Name"))
</p>

<p> 
    @Html.LabelFor(model => model.ArtistId) 
    @Html.DropDownListFor(x => x.ArtistId, new SelectList(Model.Artists, "ArtistId", "Name"))
</p>

Comments

[codys-hole]

why do this? isn't viewbag just a wrapper for viewdata except for the dynamic type? @Darin Dimitrov

[Matthijs Wessels]

I think the ViewModel approach is preferred over using ViewData/ViewBag because ViewModels are strongly typed. Some references on the topic: nerddinnerbook.s3.amazonaws.com/Part6.htm and stackoverflow.com/questions/1004948/…