---
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.
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>
|
No comments:
Post a Comment