1. In the solution folder there is an application called FilmsRUsOnline and what we are going to do is to allow the user to filter items e.g. such as on the genre of the film.
2. To allow the project to be able to filter by genre we need a new property for the FilmViewModel class indicating their current genre. This tells the view about the “current genre”.
   
namespace FilmsRUsOnline.Models
{
 public class FilmsViewModel
 {
  public IEnumerable Films { get; set; }
  public PaginationInfo PaginationInfo { get; set; }
  public string CurrentGenre { get; set; }
 }
}

3. View code file.
4. We need to edit the view List.cshtml so as to display the current genre or “All Films”, if no genre is selected.
   
@section header {
 Films R Us : @(Model.CurrentGenre ?? "All") Films
}

5. View code file.
6. We need to enhance the List() action method.
   • It needs to take a “genre” parameter.
   • Needs to filter on that genre.
   • Pass the genre information into the FilmsViewModel.
   • This is the new List() action method:
     
public ViewResult List(string genre, int pageNumber = 1)
{
 // If the URL specifies a genre, only show films in that genre.
 var filmsToShow = (genre == null)
  ? filmsRepository.Films
  : filmsRepository.Films.Where(x => x.Genre == genre);
  FilmsViewModel vm = new FilmsViewModel()
  {
   Films = filmsToShow.Skip((pageNumber - 1) * PageSize)
     .Take(PageSize)
     .ToList(),
   PaginationInfo = new PaginationInfo
   {
     CurrPage = pageNumber,
     ItemsPerPage = PageSize,
     NumItems = filmsToShow.Count()
   },
  // Pass "current genre" info to view.
  CurrentGenre = genre
 };
 return View(vm);
}

7. View code file.
8. We can now run the application with various URL’s; the only way for the user to specify a genre is via a genre parameter. This is in the query string For example, localhost:54420/?genre=Childrens.
   

1. This is our current URL schema. But it makes no mention of genre or page-number.
   
routes.MapRoute(
   name: "Default",
   url: "{controller}/{action}/{id}",
   defaults: new { controller="Films", action="List", id=UrlParameter.Optional }
);

2. ASP.NET MVC encourages you to define a logical URL schema – This is the logical URL schema we want.
   
3. To implement the URL schema, modify RouteConfig.cs in App_Start as follows.
   
public class RouteConfig
{
 public static void RegisterRoutes(RouteCollection routes)
 {
  routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
  routes.MapRoute( // Match the empty URL (i.e. ~/).
  name: null,
  url: "",
  defaults: new { controller="Films", action="List", genre=(string)null, pageNumber=1 }
  );
 routes.MapRoute( // Match ~/PageNumber2, ~/PageNumber123, but not ~/PageNumberXYZ
  name: null,
  url: "PageNumber{pageNumber}",
  defaults: new { controller="Films", action="List", genre=(string)null },
  constraints: new { pageNumber=@"\d+" }
 );
 routes.MapRoute( // Match ~/Childrens or anything without another /
  name: null,
  url: "{genre}",
  defaults: new { controller="Films", action="List", pageNumber=1 }
 );
 routes.MapRoute( // Match ~/Childrens/PageNumber2
  name: null,
  url: "{genre}/PageNumber{pageNumber}",
  defaults: new { controller="Films", action="List" },
  constraints: new { pageNumber=@"\d+" }
 );
 routes.MapRoute( // Most generic route
  name: null,
  url: "{controller}/{action}/"
 );
 }
}

4. View code file.
5. We need to now incorporate the schema – any hyperlink generated by our application must retain the “genre” information. Hence we need to update the pagination information.
   
@Html.PaginationLinks(Model.PaginationInfo,
   x => Url.Action("List",
   new {pageNumber=x, genre=Model.CurrentGenre}))

6. View code file.

1. Our application currently allows the user to view films by genre by specifying an appropriate URL but in real life the user won’t know what URL’s to enter. Hence we can improve the user experience by providing navigation links.
2. To achieve navigation, we’ll define a new controller names NavigationController and this will have a DisplayMenu() method.
   
public class NavigationController : Controller
{
 public string DisplayMenu()
 {
  return "Hi from Nav";
 }
}

3. ASP.NET MVC allows a view to invoke a controller action method directly.
   • Html.Action() – Returns the child actions; outputs as string, which can be manipulated.
   • Html.RenderAction() – Pipes the string returned by the action method directly to the HTML response stream.
   • We can use this in the layout page (_layout.cshtml) to output the navigation menu.
     
<nav>
 @Html.Action("DisplayMenu", "Navigation")
</nav>

4. View code file.
5. This is now how the application will appear –
   
6. The navigation controller needs to render many links now. So lets define a new model class to represent a navigation link calling this NavigationLink and indicate whether or not a link is selected.
   
using System.Web.Routing;
namespace FilmsRUsOnline.Models
{
 public class NavigationLink
 {
  public string Text { get; set; }
  public RouteValueDictionary RouteValues { get; set; }
  public bool IsSelected { get; set; }
 }
}

7. View code file.
8. We can now enhance the navigation controller – creating links for all the genres and return the navigation links.
   
public class NavigationController : Controller
{
 // Needs the repository to get genres.
 private IFilmsRepository filmsRepository;
 // DI injects repository for us.
 public NavigationController(IFilmsRepository filmsRepository)
 {
  this.filmsRepository = filmsRepository;
 }
 // Action method now takes a string and returns a ViewResult.
 public ViewResult DisplayMenu(string genre)
 {
  Func<string, NavigationLink> makeLink = genreName => new NavigationLink
  {
   Text = genreName ?? "Home",
   RouteValues = new RouteValueDictionary(new { controller="Films",
   action="List",
   genre=genreName,
   pageNumber=1 }),
   IsSelected = (genreName == genre)
  };
  // Put a Home link at the top.
  List<NavigationLink> links = new List<NavigationLink>();
  links.Add(makeLink(null));
  // Add a link for each distinct genre.
  var genres = filmsRepository.Films.Select(x => x.Genre);
  foreach (string genreName in genres.Distinct().OrderBy(x => x))
   links.Add(makeLink(genreName));
  // Return the information to the default view.
  return View(links);
 }
}

9. View code file.
10. The DisplayMenu() action method relates to partial page content, so it would be smart to associate this with a partial view using IEnumerable<FIlmsRUsOnline.Models.NavigationLink>.



11. Here is the implementation of the partial view.
    
@model IEnumerable<FilmsRUsOnline.Models.NavigationLink>
@{
 Layout = null;
}
@foreach (var link in Model) {
 @Html.RouteLink(link.Text,
   link.RouteValues,
   new Dictionary<string, object> {
   { "class", link.IsSelected ? "selectedMenu" : "unselectedMenu" }
 })
}

12. View code file.

In the next tutorials we will enhance the application further by introducing the idea of state management and creating a checkout system.