I dette indlæg vil jeg kort ridse op, hvordan man kan lave et partial view med en dropdown liste, som man kan bruge på tværs af siderne i applikationen. Fordelen ved denne tilgang er at der kun er ét sted man skal rette, hvis der er rettelser til hvordan dropdown listen skal vises.
Lad os lave et eksempel hvor der skal laves en dropdown liste med butikker. Til det har vi en Shop klasse, som ser således ud:
public class Shop
{
public int Id { get; set; }
public string Name { get; set; }
}
Det partielle view skal have en ViewModel, som skal bestå af en liste med de objekter, som skal vises i dropdown'en, det vil sige en liste af Shop objekter i vores tilfælde, samt en property til at holde den værdi man vælger i dropdown'en, således at vi kan "fange" værdien når der postes på siden, som benytter det partielle view.
public class ShopDropdownViewModel
{
public ShopDropdownViewModel()
{
this.Shops = new List<Shop>();
this.SelectedShop = new Shop();
}
public IEnumerable<Shop> Shops { get; set; }
public Shop SelectedShop { get; set; }
}
Nu har vi en model som vores partielle view kan bruge. Derfor opretter vi nu et partial view, ved højre klikke på 'Shared' under Views og vælge 'Add -> View'. Det er god stil at starte filnavne på partial views med underscore. Et passende navn kunne f.eks. være '_ShopDropdown'. I Template vælger vi 'Empty (without model)' og vælg 'Create as a partial view'. Visual Studio laver nu en ny tom fil. Øverst i denne fil skal vi angive hvilken type view'et forventer at få som model. Derfor tilføjer vi nedenstående som øverste linje i filen:
@model YourNamespace.Models.ShopDropdownViewModel
Nu skal vi tilføje koden, som generer dropdownlisten. Det klares ret nemt vha. en html-helper:
@Html.DropDownListFor(m => m.SelectedShop, new SelectList(Model.Shops, "Id", "Name"))
Hvis vi kigger på syntaxen, betyder den første del 'm => m.SelectedShop' at den værdi man vælger i dropdown'en skal indsættes i SelectedShop property'en på vores ViewModel klasse. Herefter danner vi et nyt SelectList objekt, hvor vi giver listen med Shops, samt to tekststrenge som angiver navnet på property'erne i listens objekter, som peger på hhv. værdien der skal bruges som value i de enkelte option-elementer og teksten som skal vises i option-elmenterne.
Nu er det partielle view klar til brug. Vi kan nemt bruge det i andre views ved at generere et ShopDropdownViewModel objekt, hvor vi populerer listen med Shops, med de butikker vi gerne vil vise i dropdown'en, i controlleren. Dét objekt vil typisk være en del af det pågældende views ViewModel. Når det er på plads er det nemt at kalde det partielle view i det pågældende view.
@Html.Partial("_ShopDropdown",Model.ShopDropdownViewModel)
Det første parameter er navnet på det partielle view - det vil sige filnavnet uden .cshtml - og det andet parameter er ViewModel objektet som det partielle view skal bruge til at danne dropdownlisten.