Dette er første opgave i opgave-serien ItemRazor.
Her skal vi lave det første projekt med Razor Pages og få lavet en simpel side der kan vise Computer Items i en tabel:
Dette er første opgave i opgave-serien ItemRazor.
Her skal vi lave det første projekt med Razor Pages og få lavet en simpel side der kan vise Computer Items i en tabel:
Step 1
(ItemRazorV1)
Opret et nyt projek af typen: ASP.net Core Web App med navnet: ItemRazorV1.
Step 2 (Afprøv)
Kør projektet og verificer at test siden vises i Browseren.
Step 3 (Mappen Models)
Add en ny folder (mappe) med navnet: Models.
Hint: højreklik på projektet vælg Add -> New Folder.
Step 4 (Class Item)
Add en ny class Item til mappen Models. Klassen Item skal have følgende properties: Id (int), Name (string) og Price (double) samt diverse constructors (incl. default-konstruktøren).
Step 5 (Mappen Pages/Item)
Add en ny folder (mappe) med navnet: Item til mappen Pages
Step 6 (GetAllItems)
Add en ny Razor Pages (af typen empty) til mappen Item. Giv siden navnet: GetAllItems.
Step 7 (GetAllItems.cshtml.cs)
Tilføj en property List<Models.Item> Items til class GetAllItemsModel i filen GetAllItems.cshtml.cs. Items skal have en private set metode og skal initialiseres med en liste der indeholder et antal Item-objekter ala:
public List<Models.Item> Items { get; private set; } = new List<Models.Item>()
{
new Models.Item(1, "PC", 5999),
new Models.Item(2, "Skærm", 1999),
new Models.Item(3, "Tastatur", 999)
};
Step 8 (GetAllItems.cshtml)
Indsæt kode i GetAllItems.cshtml der lister alle Item-objekterne fra Items listen i en tabel ala:
Step 9 (_Layout.cshtml)
Indsæt et list-item-tag <li> med et anchor-tag <a> der router til den nye side ala:
<li class="nav-item">
<a class="nav-link" asp-area="" asp-page="/Item/GetAllItems">Items</a>
</li>
Step 10 (Afprøv)
Afprøv at den nye side virker og at der kan navigeres til den via linket i menuen
God fornøjelse!
Henrik Høltzer