#

 

Wenn man gemischte Daten aus mehren Tabellen und Klassen in ASP.Net MVC darstellen möchte, dann muss man im Controller ein ViewModel übergeben anstatt einer View.

Ein ViewModel entspricht einfache einer Query oder Datenabfrage in SQL Server, Access und SQL Datenbanken.

 

In diesem Beispiel werden alle Artikel eines speziellen Herstellers dargestellt.

Das heißt, man muss den Hersteller als Model anbinden und zudem die Artikel als Model laden.

 

 

Zunächst muss man zwei Datenmodels haben

Hier die Artikel

    public class Artikel

    {

        public int IDArtikel { get; set; }

        public string Title { get; set; }

        public string Text_Content { get; set; }

    }

 

Und die Hersteller

    public class Hersteller

    {

        public int IDHersteller { get; set; }

        public string Name { get; set; }

    }

 

 

ViewModels

Das ViewModel besteht aus mehreren einzelnen Teilmengen ähnlich wie Tabellen

        public Models.Hersteller Hersteller{ get; set; }

        public List<Models.Artikel> Artikel_Liste { get; set; }

 

Diese werden verbunden im einer DataViewModel

using System;

using System.Collections.Generic;

using System.Linq;

using System.Threading.Tasks;

 

namespace ArtikelWeb.ViewModels

{

    public class Artikel_Hersteller_ViewModel

    {

        public Models.Hersteller Hersteller{ get; set; }

        public List<Models.Artikel> Artikel_Liste { get; set; }

    }

}

 

ViewModels werden am Besten in einem eigenen Unterordner zusammengestellt

 

Controller

 

Im Controller muss nun anstatt einer View eine ViewModel erstellt und übergeben werden.

Zunächst werden die einzelnen Elemente aus der Daten-Model-Klasse erstellt.

Hersteller hersteller = new Hersteller { Name = "Bosch" };

    List<Artikel> artikel_Liste = new List<Artikel>

    {

        new Artikel {Title="Bohrmaschine A"},

        new Artikel {Title="Akkuschrauber B"}

    };

 

Dann wird ein neues viewModel erstellt

ViewModels.Artikel_Hersteller_ViewModel viewModel = new ViewModels.Artikel_Hersteller_ViewModel();

 

 

Die Elemente werden in die neue ViewModel geladen

viewModel.Hersteller = hersteller ;

viewModel.Artikel_Liste = artikel_Liste ;

 

 

Und dann wird das ViewModel bestehend aus gemischten Daten mit der return Zeile übergeben

return View(viewModel );

 

ArtikelController.cs C# Code

public IActionResult Detail()

{

    //--------< Detail() >------------

    Hersteller hersteller = new Hersteller { Name = "Bosch" };

    List<Artikel> artikel_Liste = new List<Artikel>

    {

        new Artikel {Title="Bohrmaschine A"},

        new Artikel {Title="Akkuschrauber B"}

    };

   

 

    ViewModels.Artikel_Hersteller_ViewModel viewModel = new ViewModels.Artikel_Hersteller_ViewModel();

    viewModel.Hersteller = hersteller ;

    viewModel.Artikel_Liste = artikel_Liste ;

    return View(viewModel );

    //--------</ Detail() >------------

}

 

 

View

In der View als Anzeige

Über die @model Zeile wird das ViewModel eingebunden ansatt dem einfachen Model.

@model ArtikelWeb.ViewModels.Artikel_Hersteller_ViewModel 

 

Beim durchlaufen der RazorView Zeilen (HTML/Server) wird dann über @Model.Hersteller.xxx die einzelne Unterkomponente angesprochen.

Dabei durchläuft man dann per RazorView die kompletten Listen mit @foreach(artikel in Liste){ .. }

@foreach (Artikel artikel in Model.Artikel_Liste )

 

{

    <li>@artikel.Title  </li>

}

 

 

View Code-Seite von Detail.cshtml, RazorView, Serverseitiger Code gemischt mit HTML

 

@model ArtikelWeb.ViewModels.Artikel_Hersteller_ViewModel 

@{

    ViewData["Title"] = "Detail";

    Layout = "~/Views/Shared/_Layout.cshtml";

}

 

<h2>@Model.Hersteller.Name </h2>

 

@foreach (Artikel artikel in Model.Artikel_Liste )

 

{

    <li>@artikel.Title  </li>

}

 

 

 

 

 

Ergebnis Ausgabe

Wenn man dann im Browser die URL eingibt, welche die Controller Action aufruft, dann wird der Hersteller und darunter die Artikel aufgelistet

 

http://localhost:53428/artikel/Detail

Bosch

·  Bohrmaschine A

·  Akkuschrauber B

Mobile

.

123movies