ASP.NET MVC Partial View en Controller

Probleem

Meestal hebben we in een view een model van doen die data bevat uit een database die in de view getoond moet worden. Standaard kan je in een partial view het model van de moederpagina aanspreken. Maar daarmee creëer je een hinderlijke afhankelijkheid. De partial view werkt alleen als in de moederpagina het juiste model aanwezig is. Het is soms beter om de controller het model voor de partial view te laten aanmaken.

In een CRUD scenario wordt links of rechts van het detailvenster dikwijls een lijst getoond van alle rijen uit de tabel. Die lijst moet herhaald worden op de Inserting, Editing, ReadingOne en Updating pagina. Voor een detailbeschrijving daarvan zie ASP.NET MVC Partial Views. Om de lijst maken lopen door een collectie rijen en genereren voor elke rij de nodige HTML. We willen niet het model van de bovenliggende pagina gebruiken maar voor de partial view een eigen model maken.

Design

Dat kunnen we door eerst langs de controller te passeren vooraleer de partial view in de bovenliggende pagina geladen wordt.

De Html.RenderAction() en Html.Action() methoden zitten in de ChildActionExtensions klasse (System.Web.Mvc.Html) in ASP.NET MVC. Beide methoden worden gebruikt voor het oproepen van actie-methoden in een controller en het resultaat te tonen in de bovenliggende view.

• @Html.Action() - roept de opgegeven actie-methode op en retourneert het resultaat als een HTML string.
• @{Html.RenderAction();} - roept de opgegeven actie-methode eop n maakt zet het resultaat inline in de bovenliggende view. Deze werkwijze is efficiënter als het om een grote hoeveelheid HTML gaat.

Oplossing

1. We passen de partial view ReadingAll.cshtml voor UnitBase Editing aan. Bovenaan voegen we de directive voor het model toe:

   @model IEnumerable<Webwinkel.Models.UnitBase>
   
   <div class="list">
       <!-- kijk eerst na als er objecten in het model staan -->
       @if (Model.Any())
               {
           <table>
               @foreach (var item in Model)
                   {
                   <tr>
                       <td>
                           <a href="/UnitBase/ReadingOne/@item.Id" class="tile">
                               <span class="icon-arrow-right"></span>
                               <span class="screen-reader-text">Select</span>
                           </a>
                       </td>
                       <td>
                           @item.Code
                       </td>
                       <td>
                           @item.Name
                       </td>
                   </tr>
               }
           </table>
       }
       else
       {
           <p>Geen basiseenheden ingevoerd in de UnitBase entiteit.</p>
       }
   </div>

2. We roepen de partial view in de bovenliggende pagina Editing.cshtml niet meer op met de Html.Partial methode maar passeren eerst langs de controller om het model te vullen met de Html.Action methode. Als parameter geven we de naam van de actiemethode, namelijk ReadingOne, mee die moet worden uitgevoerd. We volgen de naamgevingsafspraken van ASP.NET MVC en gebruiken dezelfde naam voor de actiemethode en voor de partial view.

   @*model IEnumerable<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" method="post">
           <header>
               <h2>Basiseenheid</h2>
               <div id="command-panel" class="command-panel">
                   <a href="/UnitBase/Inserting" class="tile">
                       <span class="icon-plus"></span>
                       <span class="screen-reader-text">Inserting</span>
                   </a>
               </div>
           </header>
               @Html.Action("ReadingAll");
       </form>
   </div>

3. Tenslotte voegen we de actiemethode ReadingAll in de UnitBaseController klasse toe. We maken een instantie van de DbContext/Dal en geven een referentie door naar de collectie die alle rijen uit de tabel UnitBase voorstelt:

   public ActionResult ReadingAll()
   {
       Models.Dal dal = new Models.Dal();
       return PartialView(dal.DbSetUnitBase);
   }