I am trying to add a drop down on the nav bar for this MVC project and getting a "does not contain a definition for bootstrap error." Sorry if this question is stupid but this is my first time creating a website using ASP and MVC.
Whenever I run it I get an Exception of type 'System.Web.HttpCompileExpection' occured in System.Web.dll but was not handled in uesr code.
Here is my _LoginPartial view
#using Microsoft.AspNet.Identity
#if (Request.IsAuthenticated)
{
using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm", #class = "navbar-right" }))
{
#Html.AntiForgeryToken()
<ul class="nav navbar-nav navbar-right">
<li>
#using (var dd = Html.Bootstrap().Begin(new DropDown("Manage")))
{
#dd.ActionLink("Account", "Manage", "Account", routeValues: null, htmlAttributes: new { title = "Manage" })
#dd.Action("Posts", "Manage", "Book", routeValues: null, htmlAttributes: new { title = "Manage" })
}
</li>
<li>Log off</li>
</ul>
}
}
else
{
<ul class="nav navbar-nav navbar-right">
<li>#Html.ActionLink("Log in", "Login", "Account", routeValues: null, htmlAttributes: new { id = "loginLink" })</li>
</ul>
}
Here is the head of my _layout.cshtml
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - Books4CSUSM</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
Here is the body of my _layout.cshtml
<body>
<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>
#Html.ActionLink("Books4CSUSM", "Index", "Home", null, new { #class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
<li>#Html.ActionLink("Contact", "Contact", "Home")</li>
<li>#Html.ActionLink("Books", "Index", "Book")</li>
</ul>
#Html.Partial("_LoginPartial")
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - Books4CSUSM</p>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
Based on the included code, I assume this reference Html.Bootstrap() is the issue. Bootstrap() is defined as an extension method of HtmlHelper, but MVC can't find it, hence this exception. Add a using statement to add the namespace where the bootstrap framework is defined.
I figured this out. I did not install TwitterBootstrapMVC with nuget. I installed TwitterBootstrap 3 and just used the regular syntax for html.
<li class="dropdown">
Manage <b class="caret"></b>
<ul class="dropdown-menu">
<li>#Html.ActionLink("Manage Account", "Manage", "Account", routeValues: null, htmlAttributes: new { title = "Manage" })</li>
<li class="divider"></li>
<li>#Html.ActionLink("Manage Posts", "Manage", "Book", routeValues: null, htmlAttributes: new { title = "Manage" })</li>
</ul>
</li>
<li>Log off</li>
</ul>
Thanks for your help.
Related
I have an error when trying to run my MVC ASP.NET C# web application for the shared layout razor page.
The error I faced is at the code:
<div class="navbar navbar-inverse navbar-fixed-top height5">
<div class="navbar-header">
<button type="button" class="btn" data-toggle="collapse" data-target=".navbar-collapse" id="make-small-nav">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
#if (System.Configuration.ConfigurationManager.AppSettings["Applicant Tracking System"].ToLower().ToString() == "true")
{
#Html.ActionLink("Applicant Tracking System" + #System.Configuration.ConfigurationManager.AppSettings[""], "Index", "Home", new { area = "" }, new { #class = "navbar-brand" })
}
else
{
#Html.ActionLink(#System.Configuration.ConfigurationManager.AppSettings["Applicant Tracking System"], "Index", "Home", new { area = "" }, new { #class = "navbar-brand" })
}
</div>
<div style="float:right">
#if (Session["username"] != null)
{
<text> Welcome, #Session["username"].ToString()!</text><span>
#Html.ActionLink(" ", "Index", "Home", new { area = "" }, new { #class = "fa fa-sign-out fa-2x" })
</span>
}
</div>
</div>
I was expecting to make a menu button to hover down the side bar menu for the code:
<div class="maincover LeftBar">
<div class="navbar-collapse collapse">
<div class="nav navbar-nav">
<div class="Ul-span">MASTER MAINTENANCE</div>
<div class="list-group">
<a class="list-group-item" role="button" href="#Url.Action("PositionList", "Position")"><span class="fa fa-file"></span> <b>MM POSITION</b></a>
</div>
<div class="list-group">
<a class="list-group-item" role="button" href="#Url.Action("CandidateList", "Candidate")"><span class="fa fa-file"></span> <b>MM CANDIDATE</b></a>
</div>
<div class="Ul-span">INTERVIEW TRACKING</div>
<div class="list-group">
<a class="list-group-item" role="button" href="#Url.Action("Index", "Interview")"><span class="fa fa-file"></span> <b>INTERVIEW</b></a>
</div>
</div>
</div>
</div>
Is there any ways to fix this issue?
possible null return System.Configuration.ConfigurationManager.AppSettings[KeyName] If KeyName Not Exists In AppSettings
Please Check your web.config appsettings section.
My bootstrap icons are not shown on my mvc website. I tried to find an issue but failed every time. Below are some configurations which might be helpful in order to find the issue. If anything else is required then please let me know.
BundleConfig.vb:
Imports System.Web
Imports System.Web.Optimization
Public Module BundleConfig
' For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862
Public Sub RegisterBundles(ByVal bundles As BundleCollection)
bundles.Add(New ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"))
' Use the development version of Modernizr to develop with and learn from. Then, when you're
' ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
bundles.Add(New ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"))
bundles.Add(New ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js",
"~/Scripts/respond.js"))
bundles.Add(New StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css"))
End Sub
End Module
This is full _Layout.vbhtml code:
<!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")
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script language="javascript">
$(document).ready(function () {
$(".flash").prepend("<span class='glyphicon glyphicon-flash'></span> ")
$(".user").prepend("<span class='glyphicon glyphicon-user'></span> ")
$(".file").prepend("<span class='glyphicon glyphicon-file'></span> ")
});
</script>
<style type="text/css">
.jumbotron {
min-height: 300px;
position: relative;
background: url("/Images/Chorus_logo_140.png") center center;
width: 100%;
height: 100%;
background-size: cover;
overflow: hidden;
}
</style>
</head>
<body>
<div class="container">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Home", "Index", "Home", Nothing, New With {.class = "user"})</li>
<li>#Html.ActionLink("Services", "Index", "Services", Nothing, New With {.class = "flash"})</li>
<li>#Html.ActionLink("Program log", "Index", "ProgramLog", Nothing, New With {.class = "file"})</li>
<li>#Html.ActionLink("EMS Data Quality", "Index", "EmsDataQuality", Nothing, New With {.class = "file"})</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"><span class="glyphicon glyphicon-flash"></span> Documentation<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>#Html.ActionLink("Changelog", "Index", "ChangeLog", Nothing, New With {.class = "home"})</li>
<li>#Html.ActionLink("Data Flow", "DataFlow", "ChangeLog", Nothing, New With {.class = "home"})</li>
<li>Page 1-3</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
<!-- end navbar -->
#*<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Home", "Index", "Home", New With {.area = ""}, Nothing)</li>
<li>#Html.ActionLink("API", "Index", "Help", New With {.area = ""}, Nothing)</li>
</ul>
</div>*#
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>#DateTime.Now.Year - SABP Development team</p>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required:=False)
</body>
</html>
Files Structure:
The DOM must be loaded to interact with it.
Putting your script in the <head> tag will run it before the DOM is loaded.
Adding it just before the </body> tag has the benefit of having the DOM available.
But if you insist to add it to the <head> tag, then you must amend your script e.g.:
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script language="javascript">
function AddIcon () {
$(".flash").prepend("<span class='glyphicon glyphicon-flash'></span> ")
$(".user").prepend("<span class='glyphicon glyphicon-user'></span> ")
$(".file").prepend("<span class='glyphicon glyphicon-file'></span> ")
}
document.addEventListener("DOMContentLoaded", AddIcon);
</script>
here you go
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script language="javascript">
function AddIcon() {
$(".flash").prepend("<span class='glyphicon glyphicon-flash'></span> ")
$(".user").prepend("<span class='glyphicon glyphicon-user'></span> ")
$(".file").prepend("<span class='glyphicon glyphicon-file'></span> ")
}
document.addEventListener("DOMContentLoaded", AddIcon);
</script>
<style type="text/css">
.jumbotron {
min-height: 300px;
position: relative;
background: url("/Images/Chorus_logo_140.png") center center;
width: 100%;
height: 100%;
background-size: cover;
overflow: hidden;
}
</style>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Home", "Index", "Home", null, new { #class = "user" })</li>
<li>#Html.ActionLink("Services", "Index", "Services", null, new { #class = "flash" })</li>
<li>#Html.ActionLink("Program log", "Index", "ProgramLog", null, new { #class = "file" })</li>
<li>#Html.ActionLink("EMS Data Quality", "Index", "EmsDataQuality", null, new { #class = "file" })</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"><span class="glyphicon glyphicon-flash"></span> Documentation<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>#Html.ActionLink("Changelog", "Index", "ChangeLog", null, new { #class = "home" })</li>
<li>#Html.ActionLink("Data Flow", "DataFlow", "ChangeLog", null, new { #class = "home" })</li>
<li>Page 1-3</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - - SABP Development team</p>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
there.. I'am really confused about Layout and PartialLayout.
I don't know what wrong I'am doing.
When I login as Admin I can se all links even this Admin links ("Register", "Role", "Department" and "Manage") plus Logout link. So far so good.
But when I click any link of Admin links then my Layout changes as I'am not Admin I mean I see only "Home" , "About" "kontakt" ANd very confusing my logout link changes to Login after all I'am logged. So I'am logged but shows me Login instead.
Then if I click "Home"..or About.. then I see all links again and Logout link.
Please I'am new to this staffs and show me by coding if it's Ok, becouse I couldn't fix this problem in many hours ...
Here is my one of the admin html "Role"
#model IEnumerable<MyApiDemo.Models.RoleViewModel>
#{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<p>
#Html.ActionLink("Create New", "Create")
</p>
<table class="table">
<tr>
<th>
#Html.DisplayNameFor(model => model.Name)
</th>
<th></th>
</tr>
#foreach (var item in Model) {
<tr>
<td>
#Html.DisplayFor(modelItem => item.Name)
</td>
<td>
#Html.ActionLink("Edit", "Edit", new { id=item.Id }) |
#Html.ActionLink("Details", "Details", new { id=item.Id }) |
#Html.ActionLink("Delete", "Delete", new { id=item.Id })
</td>
</tr>
}
</table>
In my Index.cshtml , _Layout is included.
Here is my _Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<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>
#Html.ActionLink("Application namn", "Index", "Home", new { area = "" }, new { #class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
<li>#Html.ActionLink("Contact", "Contact", "Home")</li>
#Html.Partial("_LoginPartial")
</ul>
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year</p>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
And this is my _LoginPartial.cshtml
#using Microsoft.AspNet.Identity
#if (Request.IsAuthenticated && ViewData.ContainsKey("FullName"))
{
using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm", #class = "navbar-right" }))
{
#Html.AntiForgeryToken()
<ul class="nav navbar-nav navbar-right">
#if (HttpContext.Current.User.IsInRole("Admin"))
{
<li>#Html.ActionLink("Register", "Register", "Account", routeValues: null, htmlAttributes: new { id = "registerLink" })</li>
<li>#Html.ActionLink("Role", "Index", "Role")</li>
<li>#Html.ActionLink("Department", "Index", "Department")</li>
<li>#Html.ActionLink("Manage", "Pass", "Account")</li>
}
<li>
#Html.ActionLink("Welcome back " + (ViewData["FullName"]) + "!", "Index", "Manage", routeValues: null, htmlAttributes: new { title = "Manage" })
</li>
<li>Logout</li>
</ul>
}
}
else
{
<ul class="nav navbar-nav navbar-right">
<li>#Html.ActionLink("Login", "Login", "Account", routeValues: null, htmlAttributes: new { id = "loginLink" })</li>
</ul>
}
I'm pretty new to CSS and Bootstrap in general.
I have created a standard mvc web app.
I have the standard _layout partial view with the part code shown.
<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>
#Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { #class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
<li>#Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
#Html.Partial("_LoginPartial")
</div>
</div>
</div>
In the _LoginPartial view, part code is show:
<ul class="nav navbar-nav navbar-right">
<li>#Html.ActionLink("Register", "Register", "Account", routeValues: null, htmlAttributes: new { id = "registerLink" })</li>
<li>#Html.ActionLink("Log in", "Login", "Account", routeValues: null, htmlAttributes: new { id = "loginLink" })</li>
</ul>
I am trying to add a logo to be placed before the Application name ActionLink. The image is too large and does not size down to the navbar-header's size and the Register and Login text is no longer at the bottom of the navbar.
Its probably something simple, but I cannot figure it out.
I have followed:
https://www.youtube.com/watch?v=4dG2ke1JUNs
but that does not work as in the video.
I have also tried: Brand Image too big and not aligned on Bootstrap navbar
but then the image doesn't show.
Any ideas? As said, I'm new to css and bootstrap and have tried using the Developer Tools but cannot figure out why its not working.
Thanks.
I am new to Orchard and to ASP.NET MVC. I am trying to override the login process for users so that instead of going to a dedicated login page (the default process) they get a drop down form from the user menu that logs them in. I have created overrides in my custom theme for LogOn.cshtml and User.cshtml. The code is as follows:
//User.cshtml
#using System.Web.Mvc;
#using Orchard.ContentManagement;
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<ul class="nav navbar-nav pull-right">
#if (WorkContext.CurrentUser != null) {
<li class="dropdown">
<button id="userDropdown" class="btn btn-primary navbar-btn dropdown-toggle" data-toggle="dropdown">
Welcome #Html.ItemDisplayText(WorkContext.CurrentUser) <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
#Html.ActionLink(T("Change Password").ToString(), "ChangePassword", new { Controller = "Account", Area = "Orchard.Users" })
</li>
<li>
#Html.ActionLink(T("Sign Out").ToString(), "LogOff", new { Controller = "Account", Area = "Orchard.Users", ReturnUrl = Context.Request.RawUrl }, new { rel = "nofollow" })
</li>
#if (AuthorizedFor(Orchard.Security.StandardPermissions.AccessAdminPanel)) {
<li class="divider"></li>
<li>
#Html.ActionLink(T("Dashboard").ToString(), "Index", new { Area = "Dashboard", Controller = "Admin" })
</li>
}
</ul>
</li>
}
else {
<li class="dropdown">
<button class="btn btn-primary navbar-btn dropdown-toggle" data-toggle="dropdown">
Sign In <span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li>
#Display.LogOn()
</li>
</ul>
</li>
}
</ul>
</div>
//LogOn.cshtml
#using System.Web.Mvc;
#using Orchard.ContentManagement;
<div>
#using (Html.BeginFormAntiForgeryPost(Url.Action("LogOn", new { ReturnUrl = Request.QueryString["ReturnUrl"] }))) {
<fieldset class="login-form group">
<legend>#T("Account Information")</legend>
<div class="form-group">
<label for="username-email">#T("Username")</label>
#Html.TextBox("userNameOrEmail", "", new { id = "username-email", autofocus = "autofocus", #class = "validate[required]" })
#Html.ValidationMessage("userNameOrEmail")
</div>
<div class="form-group">
<label for="password">#T("Password")</label>
#Html.Password("password", null, new { #class = "validate[required]" })
#Html.ValidationMessage("password")
</div>
<div class="checkbox">
<label class="forcheckbox" for="remember-me">
#Html.CheckBox("rememberMe", new { id = "remember-me" }) #T("Remember Me")
</label>
</div>
<div class="form-group">
<button class="primaryAction" type="submit">#T("Sign In")</button>
</div>
</fieldset>
}
</div>
The form displays fine in the dropdown, but when the submit button is clicked, I get a HTTP 404 error: Requested URL: /OrchardLocal/Contents/Item/LogOn.
I'm afraid that the default login process requires a separate view. I've been trying to figure out which existing override to use, but I'm just not seeing it. Any help would be greatly appreciated. Thanks.
You should be able to login properly by changing your form from
#using (Html.BeginFormAntiForgeryPost(Url.Action("LogOn", new { ReturnUrl = Request.QueryString["ReturnUrl"] })))
to something like this:
#using ( Html.BeginForm("LogOn", "Account", new { area = "Orchard.Users" /*other route values here*/ }, FormMethod.Post) )
{
#Html.AntiForgeryToken()
// ... your stuff here
}
This is the same for every other controller action. If in doubt: specify the area explicitly.