剃刀页面中的多级下拉列表

Question

I have two tables , 'projectstatus' and 'developmentstatus'.

public class ProjectStatus
{
    public int ProjectStatusID { get; set; }
    public string Status { get; set; }
}

public class DevelopmentStatus
{
    public int DevelopmentStatusID { get; set; }
    public string Status { get; set; }
}

what I have to achieve is a Multi level dropdown list which contain these two tables as it's dropdown and also the table items as sub dropdown items.

Following code is the view of the dropdown now.

  <div class="form-group">
            <label asp-for="ProjectStatus" class="control-label">Project Status</label>
      
                        @Html.DropDownList("ProjectStatus", (IEnumerable<SelectListItem>)ViewBag.ProjectStatus, null, new { @class = "form-control" })
            
                        @Html.DropDownList("DevelopmentStatus", (IEnumerable<SelectListItem>)ViewBag.DevelopmentStatus, null, new { @class = "form-control" })
     
        </div>

Answer 1

Here is a demo:

js and css:

    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet" />
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
<!-- MDB -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.6.0/mdb.min.css" rel="stylesheet" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.6.0/mdb.min.js"></script>

Action:

public IActionResult TestMultilevel()
        {
            ViewBag.ProjectStatus = new List<ProjectStatus> { new ProjectStatus { ProjectStatusID = 1, Status = "s1" }, new ProjectStatus { ProjectStatusID = 2, Status = "s2" }, new ProjectStatus { ProjectStatusID = 3, Status = "s3" } };
            ViewBag.DevelopmentStatus = new List<DevelopmentStatus> { new DevelopmentStatus { DevelopmentStatusID = 11, Status = "s11" }, new DevelopmentStatus { DevelopmentStatusID = 12, Status = "s12" }, new DevelopmentStatus { DevelopmentStatusID = 13, Status = "s13" } };
            return View();
        }

view:

<div class="dropdown">
    <button class="btn btn-primary dropdown-toggle"
            type="button"
            id="dropdownMenuButton"
            data-mdb-toggle="dropdown"
            aria-expanded="false">
        Dropdown button
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">

        <li>
            <a class="dropdown-item" href="#">
                ProjectStatus &raquo;
            </a>
            <ul class="dropdown-menu dropdown-submenu">
                @foreach (var i in ViewBag.ProjectStatus)
                {
                <li>
                    <a class="dropdown-item" href="#">@i.Status</a>
                </li>
                } 
            </ul>
        </li>
        <li>
            <a class="dropdown-item" href="#">
                DevelopmentStatus &raquo;
            </a>
            <ul class="dropdown-menu dropdown-submenu">
                @foreach (var i in ViewBag.DevelopmentStatus)
                {
                    <li>
                        <a class="dropdown-item" href="#">@i.Status</a>
                    </li>
                }
            </ul>
        </li>
    </ul>
</div>


<style>
    .dropdown-menu li {
        position: relative;
    }

    .dropdown-menu .dropdown-submenu {
        display: none;
        position: absolute;
        left: 100%;
        top: -7px;
    }

    .dropdown-menu .dropdown-submenu-left {
        right: 100%;
        left: auto;
    }

    .dropdown-menu > li:hover > .dropdown-submenu {
        display: block;
    }
</style>

result:

I set the href to defalu # ,you can change it to the value you want.