No changes to the code, shown below.
Upgraded bootstrap from 3.2 to 4.3.1.
Now, the menu
- shows as a line on the left
- hamburger menu doesn't show regardless of window size
- expands and collapses similar to the hamburger menu
I've updated the navbar-inverse to navbar-dark, but can't find any other changes to make.
Collapsed
Expanded
Before upgrading, correct
#using Portal.Helpers;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center For People In Need #ViewBag.Title</title>
#Styles.Render("~/Content/css")
#RenderSection("styles", required: false)
</head>
<body>
<div class="navbar navbar-dark bg-dark navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src="/Content/Logo.png" alt="l" class="logo" />
#*<img src="/Content/Logo.png" alt="logo" class="logo" />*#
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
#{var UserRoles = Roles.GetRolesForUser();}
#if (UserRoles.Contains("ClientUser") || UserRoles.Contains("ClientAdmin")) {
<li class="#Html.SelectedClass(TempData["activemenu"], "Clients")">
#Html.ActionLink("Clients", "Index", "Clients")
</li>
}
...
There are so many changes in Bootstrap v.4, It's better to read its documentation in order to fix problems:
Bootstrap Navs and Bootstrap Navbar can help you.
Related
I am testing a simple .NET 6 web app (razor pages only, no MVC), and run into problem with submenu.
TEST ENVIRONMENT:
OS: Windows 11
IDE: Visual Studio 2022
Bootstrap V4
Browser: Chrome
PROBLEM DESCRIPTION:
After creating the web app, I added a dropdown menu item called "Services" with 3 submenu items (see _layout.cshtml file content at the end of this post). Each submenu maps to a razor page.
When I tested the app, the dropdown menu did not work at all, all razor pages were working fine when tested with urls. Previously, I was able to use same method to implement submenu items within a .NET 5 MVC app.
QUESTION:
The submenu implementation followed the example at the bootstrap website. What is wrong in my _layout.cshtml file?
Are there differences in the way of how _layout.cshtml works in .NET 5 and .NET 6?
TEST CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - RazorSubmenu</title>
<!-- Bootstrap CSS file -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css">
<!-- Bootstrap Font Icon CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.5.0/font/bootstrap-icons.css">
<!-- Font Awesome library -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
<link rel="stylesheet" href="~/RazorSubmenu.styles.css" asp-append-version="true" />
</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">RazorSubmenu</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 justify-content-between">
<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">
Services
<div class="dropdown-menu">
<a class="dropdown-item" asp-area="" asp-page="/Services/Item1">Item 1</a>
<a class="dropdown-item" asp-area="" asp-page="/Services/Item3">Item 2</a>
<a class="dropdown-item" asp-area="" asp-page="/Services/Item3">Item 3</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Privacy</a>
</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">
© 2022 - RazorSubmenu - <a asp-area="" asp-page="/Privacy">Privacy</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>
#await RenderSectionAsync("Scripts", required: false)
</body>
</html>
You add js reference by local file. .NET 5 default Bootstrap version is Bootstrap v4.x, but .NET 6 default version is Bootstrap v5.x.
So you need download Bootstrap version 4.x or just use jsDelivr:
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
So I am using asp.net razor pages and I want to pass a property from one of my page models to be used in the asp-route-id tag helper in the _layout page. I tried injecting the specific page model onto the _layout page and accessing it through #Model tag, when i use this and hover over the nav bar, the route id i want to show comes up, but when i click on it i get this error:
and if I use viewdata, it disappears after clicking on a nav item and becomes null.
_layout.cshtml(shared)
#model VescovererWebApp.Pages.AccountModel
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - VescovererWebApp</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
</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 id="logo" src="~/Logo/vescoverer.png" /></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">
<partial name="_LoginPartial" />
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a id="cu" class="nav-link text-dark" asp-area="" asp-page="/Account" asp-route-id="#Model.currentUserID">Account</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Vescover" asp-route-id="#Model.currentUserID">Vescover</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Vescovered" asp-route-id="#Model.currentUserID">Vescovered</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Verify" asp-route-id="#Model.currentUserID">Verify</a>
</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">
© 2021 - VescovererWebApp - <a asp-area="" asp-page="/Privacy">Privacy</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>
<style>
#logo {
height: 40px;
width: 40px;
}
</style>
try to use AccountModel as a base class
public class VescoveredModel : AccountModel
or you can create interface IAccountModel
public class AccountModel:IAccountModel
and
public class VescoveredModel : IAccountModel
and change layout model
#model VescovererWebApp.Pages.IAccountModel
you have two chose:
1.with button
<form method="post" asp-page="Order" asp-page-handler="Details">
<input type="hidden" name="Id" value="#item.Id">
<input type="submit" value="Show" >
</form>
2.with tag a
add #addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers to _ViewImports.cshtml
and use
<a asp-page="/Supplier" asp-route-id="#item.Id">Click</a>
I have watched a few tutorials on how to get the DateTimePicker working and I cannot get it to work.
However, I did notice my application has a basic built-in calendar. Please see below:
I want to know how I can customize this to format the time so it is only 20-30 minute intervals of each hour and limited the booking time from 9 am - 5 pm?
Also, I would like to be able to change the 01/01/0001 00:00 to be at least starting from this year onwards!
Here is my shared layout page which I have removed previous code in the scripts section that I was trying to get to work
I would like to point out to the viewer I have tried this many ways installing packages etc and it never showed up on my www root file. This template came with these styles etc already linked
Layout Page
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Bootstrap 5 CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-
+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"
crossorigin="anonymous">
<!------ Come back to. Change layout using the cdn instead of installing the layout-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-
icons#1.3.0/font/bootstrap-icons.css">
<link rel="stylesheet" href="~/css/site.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-
icons#1.4.0/font/bootstrap-icons.css">
<link rel="stylesheet" type="text/css"
href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.css">
</head>
<body>
<partial name="_NavBar" /> #*Created a partial to make the _layout page more nicer for
presentation purposes*#
<div class="container">
<!-- AMC Any alert defined in controller is rendered here -->
<partial name="_Alert" />
<main role="main" class="pb-3">
#RenderBody()
</main>
</div>
<footer class="border-top footer text-muted">
<div class="container">
© #DateTime.Now.Year - SolutionName- <a asp-controller="Home" asp-action="Privacy">Privacy</a>
</div>
</footer>
<!-- Bootstrap 5 JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<!-- JQuery Needed for .NET Validation -->
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
<!------- Allowing me to use Fonts -->
<script src="https://kit.fontawesome.com/7bdf81a9a5.js" crossorigin="anonymous"></script>
<!-------- Allowing me to use datatable.net tables -->
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.js"></script>
View page for creating appointment:
<h4>Create Appointment</h4>
<hr />
<div class="row">
<div class="col-md-4">
<form asp-action="CreateAppointmentBooking">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<input type="hidden" asp-for="PatientId" class="form-control" />
<label asp-for="StartDateTimeBooking" class="control-label"><i class="bi bi-book" id="datepicker"></i> Book Appointment</label>
<input asp-for="StartDateTimeBooking" class="form-control" id="datepicker" />
<span asp-validation-for="StartDateTimeBooking" class="text-danger"></span>
</div>
<div class="form-group mt-3">
<label asp-for="NameOfDoctor" class="control-label"><i class="bi bi-person"></i>Name Of Doctor</label>
<select asp-for="NameOfDoctor" asp-items="Html.GetEnumSelectList<PatientHut.Data.Models.Doctor>()" class="form-control">
<option>Select Doctor</option>
</select>
<span asp-validation-for="NameOfDoctor" class="text-danger"></span>
</div>
<div class="form-group mt-3">
<label asp-for="PreferenceOfAttendence" class="control-label"><i class="bi bi-info-square"></i> Appointment Preference</label>
<select asp-for="PreferenceOfAttendence" asp-items="Html.GetEnumSelectList<PatientHut.Data.Models.PreferenceOfAttendance>()" class="form-control">
<option>Select choice of appointment</option>
</select>
<span asp-validation-for="PreferenceOfAttendence" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="DetailOfBooking" class="control-label"><i class="bi bi-card-text"></i> Reason For Booking</label>
<textarea rows="5" asp-for="DetailOfBooking" class="form-control"></textarea> <!------ Text box created here-->
<span asp-validation-for="DetailOfBooking" class="text-danger"></span>
</div>
<div class="form-group">
<input type="submit" value="Create" class="btn btn-primary" />
<a class="btn btn-secondary" asp-action="Details" asp-route-id=#Model.PatientId>Cancel</a>
</div>
</form>
</div>
</div>
#section Scripts {
#{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
<script>
$(document).ready(function ()
{
$("#datetimepicker").datetimepicker(
{
showTodayButton: true,
showClose: true,
showClear: true,
toolbarPlacement: 'top',
stepping: 30
});
});
</script>
}
I wrote a demo based on your question, you can refer to it.
Model:
public class Test
{
[BindProperty]
public DateTime? RegisterDate { get; set; }
}
View:
#model WebApplication53.Models.Test
#{
}
<div class="form-group">
<label asp-for="RegisterDate" class="control-label"></label>
<div class='input-group date' id='datepicker'>
<input asp-for="RegisterDate" type="text" class="form-control" value="#DateTime.Now.ToString("yyyy-MM-ddThh:mm")" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<span asp-validation-for="RegisterDate" class="text-danger"></span>
</div>
#section Scripts
{
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">
<
<script>
$(function () {
$('#datepicker').datetimepicker();
});
</script>
}
Result:
In addition, the installation package you mentioned does not appear in the www directory, you should use the library to add the required dependency packages, like this:
Then search for the dependencies you need and then download it and it will be displayed in your www directory.
I have an MVC 5 application that I created with bootstrap. Now I had to create an MVC 4 application and copied my _layout.cshtml file over to it and made the modifications that I needed. I, further, added bootstrap to the project. However, my menu bar is not showing up. All I get is this pic:
This is kind of what I was expecting. (this is a pic of the app I copied the code from):
Here is my _layout file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div id="wrapper">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
#*<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>*#
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Interactive Courses", "Index", "PTEInteractiveCourse")</li>
<li>#Html.ActionLink("Tracking Classes", "Index", "PTETrackingClass")</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year.ToString() Securities Training Corporation. All rights reserved.</p>
</footer>
</div>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
I am following this tutorial: pluralsight.com/training/Player?author=scott-allen&name=mvc4-building-m6-ajax&mode=live&clip=0&course=mvc4-building. When I added autocomplete functionality I had a problem with layout of my form. Before searching it looks like this http://i.stack.imgur.com/RH2WM.png. When I start typing in search form I get expected list but it does not look good: http://i.stack.imgur.com/TWbea.png. Here is my Index.cshtml
#model IEnumerable<MvcApp.Models.Car>
<p>
#Html.ActionLink("Create New", "Create")
</p>
<form method="get" action="#Url.Action("Index")" data-mz-ajax="true" data-mz-target="#carsList">
<input type="search" name="searchString" data-mz-autocomplete="#Url.Action("AutoComplete")" />
<input type="submit" name="Search By Name" value="Search" />
</form>
#Html.Partial("_Cars", Model)
This is my _Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>#Page.Title</title>
#RenderSection("head", required: false)
#Styles.Render("~/Content/bootstrap")
#Styles.Render("~/Content/css")
</head>
<body>
<header>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="row">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Główna","Index","Home")</li>
<li>#Html.ActionLink("O stronie", "About", "Home")</li>
<li>#Html.ActionLink("Kontakt","Contact","Home")</li>
<li>#Html.ActionLink("Lista samochodów","Index","Cars")</li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron" id="header-jumbotron">
<h2>ABC</h2>
</div>
</header>
#RenderBody()
#Scripts.Render("~/bundles/mz")
#Scripts.Render("~/bundles/bootstrap")
I guess this is problem with css but I do not have any experience with it. How can I improve it? I want that list would like in that pluralsight tutorial (or google search)
I don't see your target (unless I am missing something). Try this:
<div id="carsList">
<form method="get" action="#Url.Action("Index")" data-mz-ajax="true" data-mz-target="#carsList">
<input type="search" name="searchString" data-mz-autocomplete="#Url.Action("AutoComplete")" />
<input type="submit" name="Search By Name" value="Search" />
</form>
</div>
In the jquery you could set whether to replace or append to div. You could also move the div where desired.