Is it possible to scaffold CRUD razor pages that implement a dropdownlist for display/selection of dependent entities?

Question

I'm working with VS 2022 for Mac 17.6. My current project is Razor WebApp with .NET 7.0 and EntityFramework with SQLite.

This is my DataModel:

public class Role
{
    public int Id { get; set; }
    public string? Description { get; set; }
}

public class EventTemplate
{
    public int Id { get; set; }
    public int Parent { get; set; }
    public int Predecessor { get; set; }
    public string? Identification { get; set; }
    public string? Description { get; set; }
    public Role? Role { get; set; }
}

From my understanding, this code is sufficient to establish a 1:1 relationship from EventTemplate to Role. Am I right here?

Now I want to scaffold CRUD pages, where "Role" is either shown in clear text (Description) or where users can pick a role from a DropDownList. I could work my way to code this functionality myself, but from what I have understood, scaffolding should save me this coding.

Is that possible, and if so, how is it done? Do I have to change my DataModel, or how?

Thanks in advance, Tobias

I tried scaffolding in the Pages/EventTemplates folder.

VS automatically has built the usual pages, but the "Role" item of the "EventTemplate" entities is neither shown nor editable.

Answer 1

You need to manually create Foreign Key property in EventTemplate model, So that scaffold will generate dropdown list in create page.

public class EventTemplate
    {
        public int Id { get; set; }
        public int Parent { get; set; }
        public int Predecessor { get; set; }
        public string? Identification { get; set; }
        public string? Description { get; set; }
        public Role? Role { get; set; }
        public int RoleId { get; set; }
    }

Generated chtml code

//......
<div class="form-group">
     <label asp-for="EventTemplate.RoleId" class="control-label"></label>
     <select asp-for="EventTemplate.RoleId" class ="form-control" asp-items="ViewBag.RoleId"></select>
</div>
//.......

But in my opinion, This generated dropdown list is not friendly, So you can change

ViewData["RoleId"] = new SelectList(_context.role, "Id", "Id");

to

ViewData["RoleId"] = new SelectList(_context.role, "Id", "Description");

in Create.cshtml.cs

Then the page will show like: