Music Store Tutorial: Store View

I am wanting to add another bit on to the index page of the store view on the music store tutorial.

The code from the tutorial gives the user the option to select from 8 genre's. However, I would like to modify it so that it says select from X number of genres or Y number of artists.

I am not too sure how I would go about doing this so any help would be very much appreciated.

Thanks

Re: Music Store Tutorial: Store View

The best way to use two or more models in a view is to use a "ViewModel". The ViewModel can encompass as many individual models as you want. Give this a try:

Create a folder on your project called ViewModels

Create a new class in the ViewModels folder, name it IndexViewModel.cs

Open IndexViewModel.cs and stick this code inside the class

public List<Genre> Genres { get; set; }
public List<Artist> Artists { get; set; }

public IndexViewModel(var _genres, var _artists)
{
Genres = _genres;
Artists = _artists;
}

You'll also want to add using MvcMusicStore.Models; to the top of the class to include the models. Save the class.

Open your controller and add "using MvcMusicStore.ViewModels;" to the top (without the quotes)

find the Index action. Add the artists model to it

public ActionResult Index()
{
    var genres = new List<Genre>
    {
        new Genre { Name = "Disco"},
        new Genre { Name = "Jazz"},
        new Genre { Name = "Rock"}
    };
 
 var artists = new List<Artist>
 {
 new Artist { Name = "Metallica" },
 new Artist { Name = "ShineDown" },
 new Artist { Name = "Aerosmith" }
 };

 var vModel = new IndexViewModel(genres, artists);

    return View(vModel);
 }



Then, in your Index view, replace @model IEnumerable<MvcMusicStore.Models.Genre> with @model ViewModels.IndexViewModel

Change the View to:

<h3>Browse Genres</h3>
<p>
    Select from @Model.Genres.Count()
genres:</p>
<ul>
    @foreach (var genre in Model.Genres)
    {
        <li>@genre.Name</li>
    }
</ul>

<h3>Browse Artists</h3>
<p>
    Select from @Model.Artists.Count()
genres:</p>
<ul>
    @foreach (var artist in Model.Artists)
    {
        <li>@artist.Name</li>
    }
</ul>

And that's it. You should read up on viewmodels. The tutorial for the music store does a terrible job of explaining it.

HOPE THIS HELPS!!! Also, sorry for the formatting of the post, but it auto-formats things and I'm not willing to parse through the HTML.

Re: Music Store Tutorial: Store View

Thanks for your quick response.

I added the IndexViewModel.cs and put the code in. Including the using statement.

But I get an error:

Error 1 Expected class, delegate, enum, interface, or struct

it has the red line underneath the two "Lists" and also underneath the "IndexViewModel"

Do you have any idea what this error means?

Just to add I am very new to this so forgive me if I seem a little slow!

Once again thanks for your response.

Re: Music Store Tutorial: Store View

Try this instead

public IndexViewModel(List<Genre> _genres, List<Artist> _artists)
{
Genres = _genres;
Artists = _artists;
}

Re: Music Store Tutorial: Store View

I get the same error but only under IndexViewModel

Re: Music Store Tutorial: Store View

add a using statement. like using MVCmusicStore.Models;

Thanks

Re: Music Store Tutorial: Store View

Can you post your entire viewmodel class AND the Index() actionresult. Also, remember to include the Models library in your viewmodel, and also include the ViewModels library in your controller (using MvcMusicStore.Models....... using MvcMusicStore.ViewModels)

Re: Music Store Tutorial: Store View

I have mate. I did it the first time too.

Re: Music Store Tutorial: Store View

Below is the code. Just to let you know I have adapted the music store tutorial to a movie store. Hope this is not a problem. Everything still works correctly other than this problem.

This is the ViewModel which I added.

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using Component2.Models;

public IndexViewModel

(List<Genre> _genres, List<Director> _directors)

{

Genres = _genres;

Directors = _directors

;}

and this is my entire store controller:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using Component2.ViewModels;

using Component2.Models;

namespace Component2.Controllers

{

// // GET: /Store/

public class StoreController : Controller

{

MovieStoreEntities storeDB = new MovieStoreEntities();

public ActionResult

Index()

{

var genres = new List<Genre>

{

new Genre { Name = "Horror"},

new Genre { Name = "Comedy"},

new Genre { Name = "Action"}

};

var directors = new List<Director>

{new Director { Name = "Michael Bay"},

new Director { Name = "Franco Zeffirelli"},
new Director { Name = "Jay Roach"}

};

var vModel = new IndexViewModel(genres, Director);

return View(vModel);

}

// // GET: /Store/Browse?genre=Horror

public ActionResult Browse(string genre)

{

// Retrieve Genre and its Associated Movies from database

var genreModel = storeDB.Genres.Include("Movies") .Single(g => g.Name == genre);

return View(genreModel);

}

// // GET: /Store/Details/5

public ActionResult Details(int id)

{

var movie = storeDB.Movies.Find(id);

return View(movie);

}

// // GET: /Store/GenreMenu

[ChildActionOnly]

public ActionResult GenreMenu()

{

var genres = storeDB.Genres.ToList();

return PartialView(genres);

}

And this is the Index view:

@model ViewModels.IndexViewModel

@{ViewBag.Title ="Store";}

<p>

Select from @Model.Count() Genre's:

</p>

<ul>

@foreach (var genre in Model)

{

<li>

@Html.ActionLink(genre.Name, "Browse", new

{ genre = genre.Name })

</li>
}

</ul>

<h3>Browse Directors</h3>

<p>

Select from @Model.Directors.Count() genres:

</p>
<ul>

@foreach (var director in Model.Directors)

{

<li>@director.Name</li>

}

</ul>

Thanks

Re: Music Store Tutorial: Store View

I see two problems.

1) you didn't declare your variables in the IndexViewModel. See my next post for the complete viewmodel (page 2)

var vModel = new IndexViewModel(genres, Director);

should be....

var vModel = new IndexViewModel(genres, directors);

Re: Music Store Tutorial: Store View

THIS is what your viewmodel should look like....

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Component2.Models;

public class IndexViewModel {
public List<Genre> Genres { get; set; }
public List<Artist> Directors { get; set; }

    public IndexViewModel(List<Genre> _genres, List<Director> _directors) {
      Genres = _genres;
      Directors = _directors;
    }
}

Re: Music Store Tutorial: Store View

I have edited the IndexViewModel to this:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using Component2.Models;

public class IndexViewModel
{

public List<Genre> Genres { get; set; }

public List<Director> Directors { get; set; }

}

And now there are no errors.

However, I am still getting an error on the controller:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using Component2.ViewModels;

using Component2.Models;

namespace Component2.Controllers

{

// // GET: /Store/

public class StoreController : Controller

{

MovieStoreEntities storeDB = new MovieStoreEntities();

public ActionResult Index()

{

var genres = new List<Genre>

{

new Genre { Name = "Horror"},

new Genre { Name = "Comedy"},

new Genre { Name = "Action"}

};

var directors = new List<Director>

{

new Director { Name = "Michael Bay"},

new Director { Name = "Franco Zeffirelli"},

new Director { Name = "Jay Roach"}

};

var vModel = new IndexViewModel (genres, Directors);

return View(vModel);

}

The bit in "Directors" in italics and underlined is where the error is:

Error 1 The name 'Directors' does not exist in the current context

I don't understand this error as I thought I had declared the model at the top and declared it in the viewmodel. Or am I completely missing something?

Re: Music Store Tutorial: Store View

You're still doing the viewmodel incorrectly. See my last post, copy and paste it into your viewmodel.

And for the underlined "Director", see my other last page on page 1. It's "directors", not "Directors". Programming is case-sensitive when it comes to most variables.

Re: Music Store Tutorial: Store View

Ah sorry didnt see you post regarding the view model.

I edited the code and perfect no errors.

But when I run the project and click on "Store" I get the following error:

Server Error in '/' Application.

Compilation Error

Description: An error occurred during the compilation of a resource required to service this request. Please review the following specific error details and modify your source code appropriately.

Compiler Error Message: CS0246: The type or namespace name 'ViewModels' could not be found (are you missing a using directive or an assembly reference?)

Source Error:

Line 27:     
Line 28:     
Line 29: public class _Page_Views_Store_Index_cshtml : System.Web.Mvc.WebViewPage<ViewModels.IndexViewModel > {

When I go back to my project two errors appear. One the same as the above error and the other is:

Error 1 The type or namespace name 'ViewModels' could not be found (are you missing a using directive or an assembly reference?)

Error 2 foreach statement cannot operate on variables of type 'ViewModels.IndexViewModel' because 'ViewModels.IndexViewModel' does not contain a public definition for 'GetEnumerator'

Below is the code for the Store index page:

@model ViewModels.IndexViewModel

@{ViewBag.Title ="Store";}

<p>Select from @Model.Count() Genre's:</p>

<ul>

@foreach (var genre in Model)

{

<li>

@Html.ActionLink(genre.Name,"Browse", new { genre = genre.Name })

</li>

}

</ul>

<h3>Browse Directors</h3>

<p>

Select from @Model.Directors.Count() genres:

</p>

<ul>

@foreach (var director inModel.Directors)

{
<li>@director.Name</li>

}

</ul>

The two parts in italics and underlined are the errors.

Re: Music Store Tutorial: Store View

Sorry, you got that error because we didn't include the namespace in your viewmodel. Below is what your viewmodel should finally look like.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Component2.Models;

namespace Component2.ViewModels {

public class IndexViewModel {
public List<Genre> Genres { get; set; }
public List<Artist> Directors { get; set; }

    public IndexViewModel(List<Genre> _genres, List<Director> _directors) {
      Genres = _genres;
      Directors = _directors;
    }
}
}

Lastly, @model ViewModels.IndexViewModel should be @model Component2.ViewModels.IndexViewModel

I should start copying and pasting code from VS instead of going off memory :P

Re: Music Store Tutorial: Store View

I really appreciate all this mate.

The viewmodel is now ok but I am still getting some errors in the controller:

Error 1 'Component2.ViewModels.IndexViewModel' does not contain a definition for 'Count' and no extension method 'Count' accepting a first argument of type 'Component2.ViewModels.IndexViewModel' could be found (are you missing a using directive or an assembly reference?)

Error 2 foreach statement cannot operate on variables of type 'Component2.ViewModels.IndexViewModel' because 'Component2.ViewModels.IndexViewModel' does not contain a public definition for 'GetEnumerator'

Below is the code:

@model Component2.ViewModels.IndexViewModel

ViewBag.Title ="Store";

}

<p>

Select from @Model.Count() Genre's:

</p>

<ul>
@foreach (var genre in Model)

Re: Music Store Tutorial: Store View

When you use a ViewModel, you reference it by using @Model.VariableName

So for "Select from @Model.Count() Genre's:"

it's actually

Select from @Model.Genres.Count() Genre's:

and

for "@foreach (var genre in Model)"

it's actually

@foreach (var genre in Model.Genres)

Re: Music Store Tutorial: Store View

Ah yes I understand.

Wow thank you very much for that mate. Works fine.

I've made the director names into action links so they work in the same way that genre links work.

Am I right in think that I need to add code into the store controller under the browse part. The same way it has for the genres. Or do I need to edit it completely?

Re: Music Store Tutorial: Store View

To get it up and running, I would suggest creating 2 new actionresults in your controller.

Call one "BrowseGenres" and the other "BrowseDirectors".

Just take the code from "Browse" and stick it into BrowseGenres.

We would do this because your View currently has no way to tell the difference between genres and directors, so having each point to their own actionresult is eaiest.

Be sure to makre any posts as the answer if you are satisfied.

Re: Music Store Tutorial: Store View

However when I click on the directors name I get an error. This links to the browse view which has nothing to do with the director. Please could you explain what need to add?

Below is the code I have inserted into the controller:

// // GET: /Store/Browse?genre=Horror
public ActionResult Browsegenre (string genre)

{

// Retrieve Genre and its Associated Movies from database

var genreModel = storeDB.Genres.Include("Movies")

.Single(g => g.Name == genre);

returnView(genreModel);

}

public ActionResult browsedirector (string director)

{
// Retrieve Director and its Associated Movies from database

var directorModel = storeDB.Directors.Include("Movies")

.Single(g => g.Name == director);

return View(directorModel);

}

Below is the browse view code:

@model Component2.Models. Genre

@{ViewBag.Title = "Browse Movies";

}

<h3><em>@Model.Name</em> Movies</h3>

@ foreach (var movie in Model.Movies)

{

<li>

<span>@movie.Title</span>

</a>

</li>

}

</ul>

</div>