【发布时间】：2021-09-07 03:34:07
【问题描述】：
我有一个电影教程的工作示例。 Get started with ASP.NET Core MVC
我添加了功能，现在有 2 个下拉框（过滤器）和一个搜索字符串框。我不知道如何让我的显示器在输出视图的顶部均匀分布这 3 个搜索框（见下图）
出于编辑目的（因为我不知道自己在做什么）我创建了一个~Views\Shared\_My_Layout.cshtml 并在_ViewStart.cshtml 中引用了它
@{
ViewBag.Title = "Home Page";
Layout = "~/Views/Shared/_My_Layout.cshtml";
}
我已经对此进行了测试，并且可以正常工作。所以我所有的实验都是使用这个文件完成的，而不是在 VS 2019 中关闭的默认 _Layout.cshtml。
注意：我注意到 _ViewStart path/URL ref 和我的 Windows 路径之间的 / \ 冲突。但正斜杠仅在_ViewStart.cshtml 中有效。此外，我对文件进行了外观更改并更改了输出，因此我确信这是可行的。
我正在编辑_My_Layout.cshtml，但可以看到“全部”和“标题”标签（见下图）来自~Views\Movies\Index.cshtml
但是我可以看到_My_Layout 中的以下代码主要负责浏览器显示：
<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-controller="Movies" asp-action="Index">testbase1</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>
这是从我原来的 _Layout.cshtml 复制的，因为我正在试验的文件开始看起来很糟糕。
我研究了 Navbar 文档 (getbootstrap.com) 并在 _My_Layout.cshtml 中尝试了许多实验性编辑，但没有取得任何突破。我已经尝试对以<button class="navbar-toggler"> 开头的代码行进行各种更改。根据文档将参数更改为 target 和 aria 控件。
我用谷歌搜索，找不到任何与我的示例相近的东西。大多数是网页而不是网络应用程序输出。
有人知道有帮助的解决方案或文档吗？
[问题编辑]
我的开发工具输出。 [
我很确定上面的代码 (_My_Layout.cshtml) 是相关部分。这些行引用 bootstrap.Bootstrap Navbar form-inline 但我在我的示例中找不到任何关于如何使用它的指南。
我已经下载了最新的引导程序 5.02，并在 Layout 中引用了它。我还打算看看编辑引导网格，因为我觉得我的应用程序上的按钮/字段宽度是由预设的列参数格式化的。只是预感。
***彻底改变思路*** 我已经从 _My_Layout 中删除了所有冗余代码并测试了每一行。结论是'@Renderbody()' 是关于数据库表输出/显示的唯一相关语句。因此表格输出显示和过滤框只能从视图索引中更改。问题是如何在保留功能的同时做到这一点？
'<!DOCTYPE html>
<html lang="en">
<head>
<!-- for this file _My_Layout.cshtml using files from a working dir-->
<link rel="stylesheet" href="~/wrk/bootstrap.min.css" />
<link rel="stylesheet" href="~/wrk/site.css" />
</head>
<body>
<header>
<div class="container">
<!-- this code determines position & appearance of testbase1 Home Privacy Hello xxx@email Logout-->
<!-- testbase1 controlled by Movies, Privacy by Home, login controlled by asp-area Identity-->
<nav class="navbar navbar-expand-lg navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3" />
<a class="navbar-brand" asp-area="" asp-controller="Movies" asp-action="Index">testbase1</a>
<nav class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
<ul class="navbar-nav flex-grow-1">
<!-- this code for separation (spacing) of login text at top of page -->
<li class="nav-item"></li>
</ul>
<partial name="_LoginPartial" />
</nav>
</div>
</header>
<!-- this code responsible for main output - without it no body to page. Top & bottom bar navigation links only -->
<div class="container">
<main role="main" class="pb-6">
@RenderBody()
</main>
</div>
<!-- removed js script source refs leaving self explainatory footer code-->
<footer class="border-top footer text-muted">
<div class="container">
© 2021 - testbase1 - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</div>
</footer>
<!-- required for Edit functionality -->
@await RenderSectionAsync("Scripts", required: false)
</body>
</html>'
使用以下代码成功回答了这个问题。我将显示代码封装在一个容器中，并保留了 asp 输入类型。 “隐藏”输入类型是必需的，否则我在过滤器框旁边得到了幻像链接，使它们与列边界不对齐。感谢Zhi 提供意见。
<form asp-controller="Movies" asp-action="Index" method="get">
<container>
<div class="row">
<div class="col-sm-4">
<input type="submit" value="Filter"/>
Title: <input type="text" asp-for="SearchString" />
</div>
<div class="col-sm-4">
<input type="hidden" value="" class="btn btn-default"/>
<select asp-for="MovieGenre" asp-items="Model.Genres">
<option value="">All</option>
</select>
</div>
<div class="col-sm-4">
<input type="hidden" value="" class="btn btn-default" />
<select asp-for="MovieRating" asp-items="Model.Rating">
<option value="">All</option>
</select>
</div>
</div>
</container>
</form>
【问题讨论】：
标签： html bootstrap-4 asp.net-core-mvc