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.
Related
I am working on an MVC application, and I am trying to add links to the navigation bar including a dropdown menu and a search form. But whenever I add the dropdown-items and the form to the navbar I am getting this error
An unhandled exception occurred while processing the request.
XmlException: '.', hexadecimal value 0x00, is an invalid character. Line 1, position 1.
AspNetCoreGeneratedDocument.Views_Shared__Layout.b__35_1() in _Layout.cshtml
When I remove the added code the program runs perfectly
_layout.cshtml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - eTickets</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
<link rel="stylesheet" href="~/eTickets.styles.css" asp-append-version="true" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.4.1/font/bootstrap-icons.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.1/css/bootstrap.min.css" integrity="sha512-6KY5s6UI5J7SVYuZB4S/CZMyPylqyyNZco376NM2Z8Sb8OxEdp02e1jkKk/wZxIEmjQ6DRCEBhni+gpr9c4tvA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</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-fluid">
<a class="navbar-brand" asp-area="" asp-controller="Movies" asp-action="Index">eTickets</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 dropdown">
<a class=" nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="button" data-bs-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<i class="badge-info bi-gear"></i>Management</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" asp-controller="Cinemas" asp-action="Index"> <i class="bi bi-camera-reels"></i> Cinemas</a>
<a class="dropdown-item" asp-controller="Producers" asp-action="Index"> <i class="bi bi-headset"></i> Produers</a>
<a class="dropdown-item" asp-controller="Actors" asp-action="Index"> <i class="bi bi-person-square"></i> Actors</a>
</div>
</li>
<li class="navbar-nav flex-grow-1">
<a class="nav-link text-dark" asp-controller="Movies" asp-action="Index"><i class="badge-info bi-film"></i>Movies</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0" asp-controller="Movies" asp-action="Filter" style="padding-right:25px;">
<input name="searchString" type="text" class="form-control" placeholder="Search movie..." />
<button class="btn btn-outline-success my-2 my-sm-0" type="submit"><i class="bi bi-search"></i></button>
</form>
</div>
</div>
</nav>
</header>
<div class="container-fluid">
<main role="main" class="pb-3">
#RenderBody()
</main>
</div>
<footer class="border-top footer text-muted">
<div class="container">
© 2022 - eTickets - <a asp-area="" asp-controller="Home" asp-action="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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.1/js/bootstrap.min.js" integrity="sha512-ewfXo9Gq53e1q1+WDTjaHAGZ8UvCWq0eXONhwDuIoaH8xz2r96uoAYaQCm1oQhnBfRXrvJztNXFsTloJfgbL5Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
#await RenderSectionAsync("Scripts", required: false)
</body>
</html>
What could be the problem, I'm using bootstrap 5.1.3 I also added the popper.js package and also the bootstrap package but the error still pops up.
I have solved the problem, instead of using the div tag I replaced it with the ul tag
<ul class="navbar-nav flex-grow-1">
<li class="nav-item dropdown">
<a class=" nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="button" data-bs-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<i class="badge-info bi-gear"></i>Management</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" asp-controller="Cinemas" asp-action="Index"> <i class="bi bi-camera-reels"></i> Cinemas</a></li>
<li><a class="dropdown-item" asp-controller="Producers" asp-action="Index"> <i class="bi bi-headset"></i> Produers</a></li>
<li><a class="dropdown-item" asp-controller="Actors" asp-action="Index"> <i class="bi bi-person-square"></i> Actors</a></li>
</ul>
</li>
<li class="navbar-nav flex-grow-1">
<a class="nav-link text-dark" asp-controller="Movies" asp-action="Index"><i class="badge-info bi-film"></i>Movies</a>
</li>
and on the form I replaced the form tag with the div tag as follows
<div class="form-inline my-2 my-lg-0" asp-controller="Movies" asp-action="Filter" style="padding-right:25px;">
<input name="searchString" type="text" class="form-control" placeholder="Search movie..." />
<button class="btn btn-outline-success my-2 my-sm-0" type="submit"><i class="bi bi-search"></i></button>
</div>
Refer to the https://getbootstrap.com/docs/5.1/components/dropdowns/
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.
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.
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>
Question background:
I have a MVC site that implements BootStrap. Currently each page is based on a MasterLayout view page. This master contains a dropdown list that will be populated with the cart items in the sites shopping cart along with the carts total monetary value. Please note currently the details in the dropdown are fixed values in the HTML:
What I'm after:
I've tried searching for this but cant seem to find exactly the answer. I want to be able to populate the dropdown in the navbar with the cart contents each time a page is loaded. To do this I need a method to extract the cart item objects which are stored in a SESSION object variable. Currently my MasterLayout view is just that, its a view that has no controller associated with it.
How do I go about assigning some sort of method to my MasterLayout so I can pass the cart items model to the view which in-turn will be set to the dropdown each time the page is loaded?.
Here's the HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
#Styles.Render("~/Content/bootstrap.css")
#Styles.Render("~/Content/Styles.css")
#Scripts.Render("~/bundles/modernizr")</script>
</head>
<body>
<div class="navbar navbar-fixed-top">
<nav class="navbar navbar-default" role="navigation" id="nav">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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 logo">HS<b>WH</b></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Products</li>
<li>About Us</li>
<li>Contact</li>
</ul>
<form class="navbar-form pull-right">
<input type="text" class="form-control" placeholder="Search this site..." id="searchInput">
<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
</form>
<form class="navbar-form pull-right">
<div class="btn-group btn-group-cart">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="pull-left"><i class="fa fa-shopping-cart icon-cart"></i></span>
<span class="pull-left">Shopping Cart: 2 item(s)</span>
<span class="pull-right"><i class="fa fa-caret-down"></i></span>
</button>
<ul class="dropdown-menu cart-content" role="menu">
<li>
<a href="detail.html">
<b>Penn State College T-Shirt</b>
<span>x1 $528.96</span>
</a>
</li>
<li>
<a href="detail.html">
<b>Live Nation ACDC Gray T-Shirt</b>
<span>x1 $428.96</span>
</a>
</li>
<li class="divider"></li>
<li>Total: $957.92</li>
</ul>
</div>
</form>
</div>
</div>
</nav>
</div>
#RenderBody()
<footer>
<div class="container">
<div class="row">
<div class="col-sm-12 textAlignCenter">
<h5>Copyright © 2014 - Test Site</h5>
</div>
</div>
</div>
</footer>
<script>
$(document).ready(function () {
$('.dropdown-toggle').dropdown('toggle')
});
</script>
</body>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</html>
I would probably do this using a child action invoked from the master layout.
#Html.Action("Cart")
On server side create action returns PartialViewResult, which render your cart model.
At front-end render your partial via #Html.Action("YourPartialCart",'CartController') or ajax call.
All Views have a controller associated with them because the views are inherits. E.g. when you create a view you set it's Layout to be equal to the master.cshtml file.
Your view has a Model associated with it.
You can tackle this a couple of ways.
The simplest would be to use something like HttpContext.Current.Items, which is a request unique collection of shared data accessible from anywhere during an HttpRequest.
The next would be to use inheritance on your models. For example, Create Models like this
MasterModel
-> CartPageModel (inherits MasterModel)
-> AccountSettingsModel (inherits MasterModel)
etc.
Then on your master page set the model to MasterModel via the #Model MasterModel code, and on your view it would be #Model CartPageModel.
In your controller the code will populate values on the base model MasterModel and it's derrived type CartPageModel.