Detail form display mode

laptop

1200.00

High qualitty laptop

<detail-form asp-for="@Model" 
             all-properties="true" 
             edit-mode-default="false"/>
/*
 DetailWidthsAsString in ColumnLayout specifies percentage width 
 for different device screen widths, while WidthsAsString
 percentage width when shown in-line within a collection control.
 Oder specify the order columns are rendered. Higher Order come first.
 All setting, included Display/Name may be overriden by providing
 a column definition TagHelper within the control definition.
*/
public class SimpleProductViewModel 
{
    public int? Id { getset; }
    [MaxLength(128)]
    [ColumnLayout(DetailWidthsAsString = "100 50")]
    [Required]
    [Display(Name = "Name", Order = 400)]
    public string Name { getset; }
    [ColumnLayout(DetailWidthsAsString = "60 30")]
    [Display(Name = "Price", Order = 300)]
    public decimal Price { getset; }
    [Display(Name = "Cur", Order = 280)]
    [ColumnLayout(WidthsAsString = "10", DetailWidthsAsString = "40 20")]
    public Currency ChosenCurrency { getset; }
    [ColumnLayout(DetailWidthsAsString = "20")]
    [Display(Name = "Av", Order = 230)]
    public bool Available { getset; }
 
}   
 
public class SimpleProductViewModelDetailSimpleProductViewModel
{
    [MaxLength(256)]
    [Display(Name = "Description", Order = 100)]
    [ColumnLayout(DetailWidthsAsString = "80")]
    [DisplayFormat(NullDisplayText = "no description available")]
    public string Description { getset; }
}
public async Task<IActionResult> Show(int? id)
{
    if (!id.HasValue) id = 1;
    var model = await repository
        .GetById<SimpleProductViewModelDetailint>(id.Value);
    return View(model);
    
}

Fork me on GitHub