Mikmak View UnitBase Updating View

Op deze pagina kan de beheerder de details van een rij uit de tabel wijzigen. Hij heeft dan de keuze om:

de gewijzigde detailsgegeven naar de tabel weg te schrijven en de tabel te updaten
de details van een andere rij te bekijken
te annuleren en terug naar Editing view te gaan

Probleem

We gebruiken de ReadingOne.cshtml pagina als basis. We kopiëren de code uit Views/UnitBase/ReadingOne.cshtml en kopiëren dat in een nieuw bestand met de naam Views/UnitBase/Updating.cshtml.

Design

Je hebt reeds de actiemethode Updating in de UnitBaseController klasse toegevoegd. Hoe je dat doet lees je in Mikmak EF Updating actiemethode in UnitBaseController toevoegen.
We gebruiken de @model directive om de UnitBase instantie vanuit de actiemethode Updating in de UnitBaseController klasse op te vangen. Daarom hebben bovenaan de pagina de directive:
```
@model Webwinkel.Models.UnitBase
```
We wijzigen het action attribuut van de Form in overeenstemming met de use case:
```
    <form class="showroom" action="/UnitBase/Update" method="post">
```
Voor de Annuleren en Reading One use case kiezen we voor een a html element en geen html button. Een button vereist een form html element. Vermits we geen gegevens naar de server moeten sturen - behalve eventueel de Id - kunnen we hiervoor een get gebruiken.
1. ReadingOne - dat wordt in de partial view ReadingAll.cshtml gedaan, zie Mikmak Views Refactoren met Partial Views
2. 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.
Voor de Update use case gebruiken we een submit html button omdat de we gewijzigde gegevens naar de server moeten sturen. Dat doen we best met een post en daarvoor hebben we een form html element nodig. De Id van de te updaten rij geven we mee als waarde van het value attribuut.
```
<button type="submit" name="UnitBaseId" id="Id" value="@Model.Id" class="tile">
    <span class="icon-disk"></span>
    <span class="screen-reader-text">Update</span>
</button>
```

Nu moeten we nog de input html elementen aanpassen. We verwijderen het attribuut readonly en voegen het attribuut required waar nodig 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" required  />
    </div>
    <div>
        <label for="UnitBaseName">Nom</label>
        <input id="UnitBaseName" name="UnitBaseName" class="text"
                style="width: 32.5%;" type="text" value="@Model.Name" required  />
    </div>
    <div>
        <label for="UnitBaseDescription">Nom</label>
        <textarea id="UnitBaseDescription" name="UnitBaseDescription" class="text"
                    style="width: 32.5%;" type="text" value="" >@Model.Description</textarea>
    </div>
</fieldset>

Oplossing

De volledige code voor Updating.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>Basiseenheid wijzigen</h2>
            <div id="command-panel" class="command-panel">
                <a href="/UnitBase/Update/@Model.Id" class="tile">
                    <span class="icon-disk"></span>
                    <span class="screen-reader-text">Updating</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" required  />
                </div>
                <div>
                    <label for="UnitBaseName">Nom</label>
                    <input id="UnitBaseName" name="UnitBaseName" class="text"
                           style="width: 32.5%;" type="text" value="@Model.Name" required  />
                </div>
                <div>
                    <label for="UnitBaseDescription">Nom</label>
                    <textarea id="UnitBaseDescription" name="UnitBaseDescription" class="text"
                              style="width: 32.5%;" type="text" value="" >@Model.Description</textarea>
                </div>
            </fieldset>
            <div class="feedback">
            </div>
        </div>
    </form>
</div>

2015-12-06 16:22:48