I have a working example of the movies tutorial. Get started with ASP.NET Core MVC
I have added functionality to now have 2 drop down boxes (filters) and a search string box. I can't work out how to get my display to have these 3 search boxes evenly spaced across the top of the output view (see image below)
For editing purposes (cause I don't know what I'm doing) I have created a ~Views\Shared\_My_Layout.cshtml and referenced it in _ViewStart.cshtml
@{
ViewBag.Title = "Home Page";
Layout = "~/Views/Shared/_My_Layout.cshtml";
}
I have tested this and it works. So all my experiments have been done using this file rather than the default _Layout.cshtml which is closed in VS 2019.
Note: I noticed the / \ conflict here between _ViewStart path/URL ref and my Windows path. But forward slashes only work in _ViewStart.cshtml. Besides, I made a cosmetic change in the file and changed the output so am confident that this is working.
I am editing _My_Layout.cshtml but can see that the "All" & "Title" labels (see image below) come from ~Views\Movies\Index.cshtml
However I can see that the following code in _My_Layout is largely responsible for the browser display:
<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>
This has been copied from my original _Layout.cshtml because the file that I'm experimenting on is beginning to look ratty.
I have studied Navbar docs (getbootstrap.com) and tried many experimental edits in _My_Layout.cshtml without making any break through. I have tried various changes to the code line beginning with <button class="navbar-toggler">. Changing parameters as per the docs to target and aria controls.
I have googled and can't find anything close to my example. Most are web pages not web app output.
Does anyone know a solution or docs that would help?
[Question Edit]
My dev tools output.
[
I'm pretty sure the code above (_My_Layout.cshtml) is the relevant section. These lines reference bootstrap.Bootstrap Navbar form-inline But I can't find any guides on how to use this in my example.
I have downloaded latest bootstrap 5.02 and am referencing this in Layout. I was also going to take a look at editing the bootstrap grid because I get the feeling that the button/field widths on my app are being formatted by pre-set column parameters. Just a hunch.
*** Complete change of thinking *** I have edited out all redundant code from _My_Layout and tested every line. Conclusion is that '@Renderbody()' is the only relevant statement concerning database table output/display. Therefore table output display & filter boxes can only be changed from view index. The question is how to do this while retaining functionality?
'<!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>'
Successfully answered this question using the following code. I enclosed the display code in a container and retained the asp input types. The 'hidden' input types were required otherwise I got phantom links beside the filter boxes making them out of alignment with the column boundary. Thanks to Zhi for input.
<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>
