Mikmak View UnitBase ReadingOne View

1. de gekozen rij te updaten
2. de gekozen rij te inserten
3. de gekozen rij te deleten
4. de details van een andere rij te bekijken
5. te annuleren en terug naar Editing view te gaan

Probleem

In Mikmak UnitBase ReadingOne wireframe omzetten naar HTML hebben we gezien hoe de wireframe omzet naar html. We voegen nu de nodige attributen en Razor code toe om de details van de gekozen rij te tonen. Verder voegen de use cases toe die de gebruiker vanaf die pagina uitvoeren.

Design

1. Je hebt reeds de actiemethode ReadingOne in de UnitBaseController klasse toegevoegd. Hoe je dat doet lees je in Mikmak EF ReadOne actiemethode in UnitBaseController toevoegen.
2. We gebruiken de @model directive om de UnitBase instantie vanuit de actiemethode ReadingOne in de UnitBaseController klasse op te vangen. Boevenaan de pagina voegen we de directive toe:

   @model Webwinkel.Models.UnitBase

3. De volgende use cases moeten we toevoegen. We kiezen ervoor om hiervoor een a html element te gebruiken en geen html button. Een button vereist een form html element. Vermits we geen gegevens naar de server moeten sturen - behalve natuurlijk de request url met de uit te voeren actiemethode en eventueel de Id van de gekozen rij - kunnen we hiervoor een get gebruiken.
   1. Inserting

      <a href="/UnitBase/Inserting" class="tile">
          <span class="icon-plus"></span>
          <span class="screen-reader-text">Inserting</span>
      </a>

   2. Updating - hier moeten we de Id van de te updaten rij meegeven

      <a href="/UnitBase/Updating/@Model.Id" class="tile">
      <span class="icon-pencil"></span>
      <span class="screen-reader-text">Updating</span>
      </a>

   3. ReadingOne - dat wordt in de partial view ReadingAll.cshtml gedaan, zie Mikmak Views Refactoren met Partial Views
   4. Delete - hier moeten we de Id van de te deleten rij meegeven

      <a href="/UnitBase/Delete/@Model.Id" class="tile">
          <span class="icon-remove"></span>
          <span class="screen-reader-text">Delete</span>
      </a>

   5. Annuleren

      <a href="/UnitBase/Cancel" class="tile">
          <span class="icon-close"></span>
          <span class="screen-reader-text">Annuleren</span>
      </a>

      Vergeet niet de methode Cancel in de UnitBaseController aan te maken. Deze methode doet hetzelfde als InsertingCancel methode. Het is miscchien een beter idee om deze methode de refactoren en te veralgemenen naar Cancel.
4. Nu moeten we nog de input html elementen aanpassen. We voegen het attribuut readonly toe en vullen de waarden voor het value attribuut in met de waarden van de UnitBase instantie.

   <fieldset>
       <div>
           <label for="UnitBaseCode">Code</label>
           <input id="UnitBaseCode" name="UnitBaseCode" class="text"
                   style="width: 22.5%;" type="text" value="@Model.Code" readonly />
       </div>
       <div>
           <label for="UnitBaseName">Nom</label>
           <input id="UnitBaseName" name="UnitBaseName" class="text"
                   style="width: 32.5%;" type="text" value="@Model.Name" readonly />
       </div>
       <div>
           <label for="UnitBaseDescription">Nom</label>
           <textarea id="UnitBaseDescription" name="UnitBaseDescription" class="text"
                       style="width: 32.5%;" type="text" value="" readonly>@Model.Description</textarea>
       </div>
   </fieldset>
   

Oplossing

De volledige code voor ReadingOne.cshtml:

@model Webwinkel.Models.UnitBase
@{
    Layout = "~/Views/Shared/MasterLayout.cshtml";
}

<div class="floor" id="flat-entity-floor">
    <div class="control-panel">
        <a href="/Home/Index" class="tile">
            <span class="icon-menu2"></span>
            <span class="screen-reader-text">Home</span>
        </a>
        <h1>MikMak</h1>
    </div>
    <form class="showroom" action="/UnitBase/Insert" method="post">
        <header>
            <h2>Details basiseenheid</h2>
            <div id="command-panel" class="command-panel">
                <a href="/UnitBase/Updating/@Model.Id" class="tile">
                    <span class="icon-pencil"></span>
                    <span class="screen-reader-text">Updating</span>
                </a>
                <a href="/UnitBase/Inserting" class="tile">
                    <span class="icon-plus"></span>
                    <span class="screen-reader-text">Inserting</span>
                </a>
                <a href="/UnitBase/Delete/@Model.Id" class="tile">
                    <span class="icon-remove"></span>
                    <span class="screen-reader-text">Delete</span>
                </a>
                <a href="/UnitBase/Cancel" class="tile">
                    <span class="icon-close"></span>
                    <span class="screen-reader-text">Annuleren</span>
                </a>
            </div>
        </header>
        @Html.Action("ReadingAll")
        <div class="detail">
            <fieldset>
                <div>
                    <label for="UnitBaseCode">Code</label>
                    <input id="UnitBaseCode" name="UnitBaseCode" class="text"
                           style="width: 22.5%;" type="text" value="@Model.Code" readonly />
                </div>
                <div>
                    <label for="UnitBaseName">Nom</label>
                    <input id="UnitBaseName" name="UnitBaseName" class="text"
                           style="width: 32.5%;" type="text" value="@Model.Name" readonly />
                </div>
                <div>
                    <label for="UnitBaseDescription">Nom</label>
                    <textarea id="UnitBaseDescription" name="UnitBaseDescription" class="text"
                              style="width: 32.5%;" type="text" value="" readonly>
                        @Model.Description
                    </textarea>
                </div>
            </fieldset>
            <div class="feedback">
            </div>
        </div>
    </form>
</div>