Étape 3 Controller, Vue et routage

using System.Linq;
using Mic.CookBook.Web.Database;
using Microsoft.AspNetCore.Mvc;

namespace Mic.CookBook.Web.Controllers
{
    public class RecipeController : Controller
    {
        private readonly CookBookContext cookBookContext;

        public RecipeController(CookBookContext cookBookContext)
        {
            this.cookBookContext = cookBookContext;
        }

        public IActionResult Index()
        {
            var list = cookBookContext.Recipes.ToList();
            return View(list);
        }
    }
}

Ajoutez une nouvelle vue dans le dossier Views/Recipe appelée Index.cshtml

@model IEnumerable<Mic.CookBook.Web.Models.Recipe>

@{
    ViewData["Title"] = "Recette";
}

<h1>Recettes</h1>
<table class="table">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Name)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Image)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Category)
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.Name)
                </td>
                <td>
                    <img src="@item.Image" style="max-width: 50px;" />
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Category)
                </td>
                <td>
                   <!-- Nous remplacerons ce commentaire plutard. -->
                </td>
            </tr>
        }
    </tbody>
</table>

Dans la vue layout Views/Shared/_Layout.cshtml, ajoutez le menu suivant

<li class="nav-item">
    <a class="nav-link text-dark" asp-area="" asp-controller="Recipe" asp-action="Index">Recettes</a>
</li>

Dans le controlleur RecipeController ajouter une nouvelle méthode :

public IActionResult Details(int id)
{
    var recipe = cookBookContext.Recipes.FirstOrDefault(r => r.Id == id);
    return View(recipe);
}

@model Mic.CookBook.Web.Models.Recipe

@{
    ViewData["Title"] = "Details";
}

<h1>@Model.Name</h1>

<div>
    <h4>Recette</h4>
    <hr />
    <dl class="row">
        <dt class = "col-sm-2">
            @Html.DisplayNameFor(model => model.Location)
        </dt>
        <dd class = "col-sm-10">
            @Html.DisplayFor(model => model.Location)
        </dd>
        <dt class = "col-sm-2">
            @Html.DisplayNameFor(model => model.Details)
        </dt>
        <dd class = "col-sm-10">
            @Html.DisplayFor(model => model.Details)
        </dd>
        <dt class = "col-sm-2">
            @Html.DisplayNameFor(model => model.Image)
        </dt>
        <dd class = "col-sm-10">
            <img src="@Model.Image" style="max-width:50vw;" />
        </dd>
        <dt class = "col-sm-2">
            @Html.DisplayNameFor(model => model.Category)
        </dt>
        <dd class = "col-sm-10">
            @Html.DisplayFor(model => model.Category)
        </dd>
        <dt class = "col-sm-2">
            @Html.DisplayNameFor(model => model.Population)
        </dt>
        <dd class = "col-sm-10">
            @Html.DisplayFor(model => model.Population)
        </dd>
        <dt class = "col-sm-2">
            @Html.DisplayNameFor(model => model.Latitude)
        </dt>
        <dd class = "col-sm-10">
            @Html.DisplayFor(model => model.Latitude)
        </dd>
        <dt class = "col-sm-2">
            @Html.DisplayNameFor(model => model.Longitude)
        </dt>
        <dd class = "col-sm-10">
            @Html.DisplayFor(model => model.Longitude)
        </dd>
    </dl>
</div>

<td>
      <a asp-action="Details" asp-controller="Recipe" asp-route-id="@item.Id" class="btn btn-info" >Détails</a>
</td>

Dans le fichier startup.cs, ajoutez deux nouvelles route

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
     // ...

    app.UseMvc(routes =>
    {
        routes.MapRoute(
            name: "recettes",
            template: "recettes",
            defaults: new { controller = "Recipe", action = "Index" });
        routes.MapRoute(
            name: "recette-details",
            template: "recette/{id}/{name}",
            defaults: new { controller = "Recipe", action = "Details" });
        // ... Laissez la route par défaut
    });
}

Ajoutez dans le controlleur RecipeController un nouveau paramètre optionel

public IActionResult Details(int id, string name = null)
{
     var recipe = cookBookContext.Recipes.FirstOrDefault(r => r.Id == id);
     return View(recipe);
}

Ajoutez dans la vue Views/Recipe/Details.cshtml, l'attribut name sur le lien pour se rendre sur la page détails :

<a asp-action="Details" asp-controller="Recipe" asp-route-id="@item.Id" asp-route-name="@item.Name" class="btn btn-info" >Détails</a>

Précédent Suivant