Published using Google Docs
ASPNET MVC 4 MvcMusicStore Tutorial 2
Updated automatically every 5 minutes

ASP NET MVC 4 MvcMusicStore Tutorial Part 2

STEPS

1) Continue from the previous tutorial.

2) Create Model Class

2-1) Go to Solution Explorer. Right-click models, select Add New Class

2-2) Name the file “Genre.cs”

2-3) Add data item to Genre Model

2-4) Repeat the same steps to create “Album.cs”

3) Modify StoreController.cs to work with the Data Models

3-1) Add the Namespace for the Data Models

3-2) Change the codes so that a Model Object is created and displayed in View

4) Build the project

5) Create Details View

5-1) Right-click within the Details method and select “Add View…” from the context menu.

5-2) Define View settings

5-3) Edit Details.cshtml (refer highlighted codes)

6) Test Run

7) Create Browse View

7-1) Right-click in the Browse method and select “Add View…” from the context menu

7-2) Define View settings

7-3) Edit Browse.cshtml (refer highlighted codes)

8) Test Run

9) Edit the Store Index Page

9-1) Change the codes for Index method

9-2) Generate the View for Index method

9-3) Edit Index.cshtml to display list items

10) Test Run

11) Change Genre list into hyperlinks

11-1) Edit Index.cshtml to display hyperlinks

12) Test Run

STEPS

1) Continue from the previous tutorial.

Refer http://visualstudio-steps.blogspot.com/2014/09/aspnet-mvc-4-mvcmusicstore-1.html 

2) Create Model Class

2-1) Go to Solution Explorer. Right-click models, select Add New Class

2-2) Name the file “Genre.cs”

2-3) Add data item to Genre Model

Genre.cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

namespace MvcMusicStore.Models

{

    public class Genre

    {

        public string Name { get; set; }

    }

}

2-4) Repeat the same steps to create “Album.cs”

Album.cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

namespace MvcMusicStore.Models

{

    public class Album

    {

        public string Title { get; set; }

        public Genre Genre { get; set; }

    }

}

3) Modify StoreController.cs to work with the Data Models

3-1) Add the Namespace for the Data Models

StoreController.cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using MvcMusicStore.Models;

…

Info:

Add a “using” statement to the top of the StoreControllers class to include the MvcMusicStore.Models namespace, so we don’t need to type MvcMusicStore.Models.Album every time we want to use the album class.

3-2) Change the codes so that a Model Object is created and displayed in View

Find Browse and Details method in StoreController.cs

Replace codes for the methods with the following codes (refer highlighted codes)

StoreController.cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using MvcMusicStore.Models;

namespace MvcMusicStore.Controllers

{

    public class StoreController : Controller

    {

        //

        // GET: /Store/

        public string Index()

        {

            return "Hello from Store.Index()";

        }

        //

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

        public ActionResult Browse(string genre)

        { 

            var genreModel = new Genre { Name = genre }; 

            return View(genreModel); 

        }       

        //

        // GET: /Store/Details/5

        public ActionResult Details(int id)

        {

            var album = new Album { Title = "Album " + id };

            return View(album);

        }

    }

}

4) Build the project

Info:

We need to build the project so that Visual Studio knows about our newly created Album class.

5) Create Details View

5-1) Right-click within the Details method and select “Add View…” from the context menu.

5-2) Define View settings

Notice that a folder “Store” and a file “Details.cshtml” are created in the Solution Explorer.

The codes are shown in the Editor Window

5-3) Edit Details.cshtml (refer highlighted codes)

Details.cshtml

@model MvcMusicStore.Models.Album

@{

    ViewBag.Title = "Details";

}

<h2>Album: @Model.Title</h2>

6) Test Run

Append Store/Details/5 to the localhost URL

7) Create Browse View

7-1) Right-click in the Browse method and select “Add View…” from the context menu

7-2) Define View settings

7-3) Edit Browse.cshtml (refer highlighted codes)

Browse.cshtml

@model MvcMusicStore.Models.Genre

@{

    ViewBag.Title = "Browse";

}

<h2>Browsing Genre: @Model.Name</h2>

8) Test Run

Append Store/Browse?Genre=Disco to the localhost URL

9) Edit the Store Index Page

9-1) Change the codes for Index method

StoreController.cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using MvcMusicStore.Models;

namespace MvcMusicStore.Controllers

{

    public class StoreController : Controller

    {

        //

        // GET: /Store/

        public ActionResult Index()

        {

            var genres = new List<Genre>{

                new Genre { Name = "Disco"},

                new Genre { Name = "Jazz"},

                new Genre { Name = "Rock"}

            };

            return View(genres);

        }       

        //

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

        public ActionResult Browse(string genre)

        {

            var genreModel = new Genre { Name = genre };

            return View(genreModel);

        }

        //

        // GET: /Store/Details/5

        public ActionResult Details(int id)

        {

            var album = new Album { Title = "Album " + id };

            return View(album);

        }

    }

}

9-2) Generate the View for Index method

9-3) Edit Index.cshtml to display list items

Index.cshtml

@model IEnumerable<MvcMusicStore.Models.Genre>

@{

    ViewBag.Title = "Store";

}

<h3>

    Browse Genres</h3>

<p>

    Select from @Model.Count() genres:</p>

<ul>

    @foreach (var genre in Model)

{

        <li>@genre.Name</li>

}

</ul>

Info:

We’re using an IEnumerable<Genre> rather than a List<Genre> since it’s more generic, allowing us to change our model type later to any object type that supports the IEnumerable interface

10) Test Run

Append Store/ to the localhost URL

11) Change Genre list into hyperlinks

11-1) Edit Index.cshtml to display hyperlinks

Index.cshtml

@model IEnumerable<MvcMusicStore.Models.Genre>

@{

    ViewBag.Title = "Store";

}

<h3>

    Browse Genres</h3>

<p>

    Select from @Model.Count() genres:</p>

<ul>

    @foreach (var genre in Model)

    {

        <li>@Html.ActionLink(genre.Name, "Browse", new { genre = genre.Name })</li>

    }

</ul>

12) Test Run