C# ASP.NET Core Simple Razor Page WebApp-向顶部菜单栏添加动态下拉列表_C#_Asp.net_Razor Pages

C# ASP.NET Core Simple Razor Page WebApp-向顶部菜单栏添加动态下拉列表

c# asp.net

C# ASP.NET Core Simple Razor Page WebApp-向顶部菜单栏添加动态下拉列表,c#,asp.net,razor-pages,C#,Asp.net,Razor Pages,我创建了一个非常简单的ASP.NET Core 3.1 WebApp，它使用Razor页面而不是MVC。我想在顶部菜单栏添加一个动态下拉列表，所有其他页面都可以共享该列表。我已经在_Layout.cshtml中添加了必要的HTML，因此我得到了一个很好的下拉框以及我的其他菜单内容（主页、关于等）-见下文添加填充my_Layout.cshtml文件下拉列表的代码时，我有哪些选项 <!DOCTYPE html> <html lang="en"> <head> .

我创建了一个非常简单的ASP.NET Core 3.1 WebApp，它使用Razor页面而不是MVC。我想在顶部菜单栏添加一个动态下拉列表，所有其他页面都可以共享该列表。我已经在_Layout.cshtml中添加了必要的HTML，因此我得到了一个很好的下拉框以及我的其他菜单内容（主页、关于等）-见下文

添加填充my_Layout.cshtml文件下拉列表的代码时，我有哪些选项

<!DOCTYPE html>
<html lang="en">
<head>
...
</head>
<body>
    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div class="container">
                <a class="navbar-brand" asp-area="" asp-page="/Index"><img src="images/Logo.png" alt="logo" height="50"></a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
                    <ul class="navbar-nav flex-grow-1">
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
                        </li>
                        <li class="nav-item dropdown ml-auto">
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownTZ" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Whisky
                            </a>
                            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                <a class="dropdown-item" href="#">Gin</a>
                                <a class="dropdown-item" href="#">Vodka</a>

                            </div>
                        </li>                        
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

    <footer class="border-top footer text-muted">
        <div class="container">
            XXX &copy; 2020&nbsp;-&nbsp;v1.1.30.1&nbsp;-&nbsp;your use of this website is subject to our <a asp-area="" asp-page="/TermsConditions">Terms & Conditions</a> 
        </div>
    </footer>

    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>

    @RenderSection("Scripts", required: false)
</body>
</html>


...


@RenderBody（）
XXX&复印件；2020年-v1.1.30.1-您对本网站的使用受我们的条款和条件约束
@RenderSection（“脚本”，必需：false）

一个合理的解决方案是创建一个视图组件，然后将其添加到_Layout.cshtml。我找到了一个很好的循序渐进的指南，它在路上帮助了我。基本上，我的解决方案涉及：

在名为“组件”的页面下创建文件夹

在“组件”下创建名为“TimeZoneControl”的子文件夹

在“TimeZoneControl”中添加名为“TimeZoneControlViewComponent.cs”的类

在“TimeZoneControl”中添加名为“Default.cshtm”的Razor视图

修改my_Layout.cshtml以包含我的时区控件视图组件

将MyWebApp添加到_ViewImports.cshtml的末尾，其中MyWebApp是我的Visual Studio webapp项目的名称

在代码方面：

TimeZoneControlViewComponent.cs-ViewComponents支持依赖项注入，因此可以将代码放入构造函数以支持数据库访问，如中所述

使用System.Collections.Generic；
使用Microsoft.AspNetCore.Mvc；
命名空间C19QuarantineWebApp.Pages.Components.TimeZoneControl
{
公共类时区控件组件：ViewComponent
{
公共时区控件组件（）{}
公共IViewComponentResult调用（字符串timeZoneId）
{
var时区=新列表（）；
时区.AddRange（新[]{“GMT”、“CET”、“IST”}）；
返回视图（“默认”，timeZones.ToArray（））；
}
}
}

Default.cshtml

@model string[]
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownTZ" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Time zones
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
    @foreach(var tz in Model) {<a class="dropdown-item" href="#">@tz</a>}
</div>

@model string[]
@foreach（模型中的var-tz）{}

\u Layout.cshtml-将原来的下拉列表（参见问题）替换为

在这种情况下，它给出：

<div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
<ul class="navbar-nav flex-grow-1">
   <li class="nav-item">
      <a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
   </li>
   <li class="nav-item">
      <a class="nav-link text-dark" asp-area="" asp-page="/About">About</a>
   </li>
   <li class="nav-item dropdown ml-auto">
      <vc:time-zone-control time-zone-id="xxx">
      </vc:time-zone-control>
   </li>
</ul>
</div>




家


关于

我很想收到有关此解决方案的意见。有没有更简单、更优雅的方法

合理的解决方案是创建视图组件，然后将其添加到_Layout.cshtml。我找到了一个很好的循序渐进的指南，它在路上帮助了我。基本上，我的解决方案涉及：