Dieses Code Beispiel zeigt, wie man in ASP.Net Core MVC
eine DropDown Liste anzeigt
Vorgabe:
In der angebundenen Datenbank gibt es eine kleine
Tabelle mit Auswahltexten mit der Bezeichung tblBase_Produktgruppen.
Die Auswahl-Tabelle besitzt eine ID und einen kurzen
Text als Inhalt.
Diese Tabelle soll in der Eingabe-Ansicht als Dropdown
Liste angezeigt werden und mit der Auswahl ein Wert eingegeben werden.
ViewModel, Daten-Klassen erweitern
Um eine DropDown-Liste in ein Formular einzufügen muss
man das Model um eine ViewModel erweitern.
Deshalb erstellt man unter /Viewodels->Add->New Item.. eine neue Klasse.
Controller
Der Controller ermittelt in
der Methode New() welche Daten an die Anzeige übergeben werden sollen.
Da hier kombinierte Daten aus
mehreren Tabellen zur Anzeige gebracht werden, muss man über eine ViewModel Datei
die Daten dynamisch vor der Übergabe zusammenstellen.
Die ViewModel ViewModel_Artikel_New
enthält Artikel als leeres Konstrukt und eine Liste mit Produktgruppen.
Die Liste Produktgruppen für
das Dropdown-Feld muss man hier zuvor erstellen und füllen.
Laden der Auswahl-Liste für
Produktgruppen
|
IEnumerable<ModelBase_Produktgruppe
> produktgruppen = _context.tblBase_Produktgruppen.ToList();
|
Dann erstellt man ein neues,
leeres ViewModel und übergibt in diese die Produktliste. Die Artikel müssen hier
nicht geladen werden.
|
public IActionResult New()
{
//----<
New() >----
//*leeres
eingabe-formular fuer neuen Datensatz
IEnumerable<ModelBase_Produktgruppe > produktgruppen =
_context.tblBase_Produktgruppen.ToList();
ViewModels.ViewModel_Artikel_New
viewModel = new
ViewModels.ViewModel_Artikel_New
{
Produktgruppen =
produktgruppen
};
return View(viewModel);
//----</
New() >----
}
|
Datei: Controller/ArtikelController.cs
oder Controller_Artikel.cs
ViewModel,
Übergabe-Daten:
Die Daten welche vom Controller
zur View übergeben werden, können nur durch eine kombinierte Zusammenstellung
in einer ViewModel erstellt werden.
Datei: ViewModels/ViewModel_Artikel_New.cs
|
using System;
using System.Collections.Generic;
using ArtikelWeb.Models;
namespace ArtikelWeb.ViewModels
{
public class ViewModel_Artikel_New
{
public Model__Artikel Artikel { get; set; }
public IEnumerable<
ModelBase_Produktgruppe> Produktgruppen{ get; set; }
//*public List<ArtikelWeb.Models.Produktgruppen>
Produktgruppe { get; set; }
}
}
|
View
Anzeige
Anzeige in der View mit
In der View bindet man
zunächst die ViewModel mit den zusammengestellten Daten ein.
|
@model
ArtikelWeb.ViewModels.ViewModel_Artikel_New
|
Dann lädt man die Daten in ein
SELECT Html Element.
Der Begriff asp-for
definiert, welches Feld als Value Feld gebunden werden soll
|
asp-for="Artikel.IDProduktgruppe"
|
Der Teil asp-items definiert die zu ladende Liste.
Dabei wird mit SelectList(Tabelle,ID,Anzeigetext) die Liste geladen
|
asp-items="@(new
SelectList(Model.Produktgruppen,"IDBase_Produktgruppe", "Produktgruppe"))"
|
Select Element
|
<select asp-for="Artikel.IDProduktgruppe" class="form-control"
asp-items="@(new
SelectList(Model.Produktgruppen,"IDBase_Produktgruppe", "Produktgruppe"))"></select>
|
Datei:
/Views/Artikel/New.cshtml
Wichtig ist hier in ASP.Net
Core:
|
<label asp-for="Artikel.IDProduktgruppe" class="control-label"></label>
<select asp-for="Artikel.IDProduktgruppe" class="form-control"
asp-items="@(new
SelectList(Model.Produktgruppen,"IDBase_Produktgruppe", "Produktgruppe"))"></select>
|
Datenbank,
DbContext, DbSet
In der Datenbank SQL Server
sind über die app_DBContext die Tabellen tbl_Artikel, tblBase_Hersteller und
tblBase_Produktgruppen als DbSet angebunden.
Unter SQL Server verwende ich
immer das Kürzel tbl zur Kennzeichnung von Tabellen und tblBase_ für Stammdaten-Tabellen
und tblSys_ für Systemtabellen.
Unter ASP.Net Core MVC wandle
ich die Kennzeichung um in Model_ und ModelBase_ damit die Zuordnung eindeutig
bleibt.
|
using Microsoft.EntityFrameworkCore;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
namespace ArtikelWeb.Models
{
public class app_DbContext : DbContext
{
public
app_DbContext(DbContextOptions<app_DbContext> options)
: base(options)
{ }
public DbSet<Model__Artikel>
tbl_Artikel { get; set; }
public
DbSet<ModelBase_Hersteller> tblBase_Hersteller { get; set; }
public
DbSet<ModelBase_Produktgruppe> tblBase_Produktgruppen { get; set; }
protected override void OnModelCreating(ModelBuilder
modelBuilder)
{
modelBuilder.Entity<Model__Artikel>().ToTable("tbl_Artikel");
modelBuilder.Entity<ModelBase_Hersteller>().ToTable("tblBase_Hersteller");
modelBuilder.Entity<ModelBase_Produktgruppe>().ToTable("tblBase_Produktgruppen");
}
}
}
|
DropDown-Tabelle
Die Tabelle, welche die
Auswahlliste als DropDown Element enthält, besteht in diesem Fall aus einem ID Feld
und einem Text-Feld
|
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Threading.Tasks;
namespace ArtikelWeb.Models
{
public class ModelBase_Produktgruppe
{
[Key]
public int IDBase_Produktgruppe { get; set; }
public String Produktgruppe { get; set; }
}
}
|
Komplette View New
|
@model
ArtikelWeb.ViewModels.ViewModel_Artikel_New
@*ArtikelWeb.Models.Artikel*@
@{
ViewData["Title"] = "New";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>New</h2>
<h4>Artikel</h4>
<hr />
<div class="row">
<div class="col-md-4">
<form asp-action="New">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="Artikel.Title" class="control-label"></label>
<input asp-for="Artikel.Title" class="form-control" />
<span asp-validation-for="Artikel.Title" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Artikel.Text_Content" class="control-label"></label>
<input asp-for="Artikel.Text_Content" class="form-control" />
<span asp-validation-for="Artikel.Text_Content" class="text-danger"></span>
</div>
<div class="form-group">
@*<label asp-for="IDProduktgruppe"
class="control-label"></label>
<input
asp-for="IDProduktgruppe" class="form-control" />
<span
asp-validation-for="IDProduktgruppe"
class="text-danger"></span>*@
<label asp-for="Artikel.IDProduktgruppe" class="control-label"></label>
<select asp-for="Artikel.IDProduktgruppe"
class="form-control"
asp-items="@(new SelectList(Model.Produktgruppen,"IDBase_Produktgruppe", "Produktgruppe"))"></select>
</div>
<div class="form-group">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</form>
</div>
</div>
<div>
<a asp-action="Index">Back to List</a>
</div>
|
Controller C# Datei
|
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using ArtikelWeb.Models;
using Microsoft.EntityFrameworkCore; //*DbContext or ApplicationDbContext
namespace ArtikelWeb.Controllers
{
public class ArtikelController : Controller
{
private readonly app_DbContext _context;
//ctor
public
ArtikelController(app_DbContext context)
{
_context = context;
}
protected override void Dispose(bool disposing)
{
_context.Dispose();
}
..
..
public IActionResult New()
{
//----< New() >----
//*leeres
eingabe-formular fuer neuen Datensatz
IEnumerable<ModelBase_Produktgruppe
> produktgruppen = _context.tblBase_Produktgruppen.ToList();
ViewModels.ViewModel_Artikel_New
viewModel = new
ViewModels.ViewModel_Artikel_New
{
Produktgruppen = produktgruppen
};
return View(viewModel);
//----</ New() >----
}
}
}
|