I have updated from Bootstrap 3 to Bootstrap 4 now the Razor View will not render properly as seen here in this image:
As you can see all Bootstrap styling is gone and the navbar has disappeared. This was fine with Bootstrap 3.
This is just the standard login page that comes with an MVC project, so I have not added anything fancy to it.
My bundle is as follows:
using System.Web;
using System.Web.Optimization;
namespace FoodSnap
{
public class BundleConfig
{
// For more information on bundling, visit https://go.microsoft.com/fwlink/?LinkId=301862
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js",
"~/Scripts/jquery-ui-{version}.js"));
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",
"~/Content/themes/base/jquery-ui.css"));
}
}
}
In my view I have rendered as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</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("FoodSnap_TEST", "LogIn", "Account", 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>*#
<li>#Html.ActionLink("Pre-Registration", "Index", "PreRegistration")</li>
<li>#Html.ActionLink("Roles", "Index", "Role")</li>
<li>#Html.ActionLink("FoodSnap", "Index", "FoodSnap")</li>
<li>#Html.ActionLink("Review", "Create", "FoodSnap")</li>
</ul>
#Html.Partial("_LoginPartial")
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - FoodSnap_TEST</p>
</footer>
</div>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
I have tried numerous things including CDN's and the result is the same. Has anyone seen this before?
Bootstrap 4 is almost a complete rewrite of Bootstrap 3 which means:
None of the Bootstrap 3 code is compatible with Bootstrap 4.
Read the docs to migrate:
https://getbootstrap.com/docs/4.0/migration/
Related
Basically what the title says. I have a view named books in which the search bar works perfectly and gives results. This is not happening in the _Layout shared view. I've tried several scripts and stuff but to no avail. Any advice?
This is the _Layout
<!DOCTYPE html>
#model IEnumerable<GoodReads.Models.Libro>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<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("Nombre de aplicación", "Index", "Home", new { area = "" }, new { #class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Inicio", "Index", "Home")</li>
<li>#Html.ActionLink("Registrar Turno", "AltaTurno", "Turno")</li>
<li>#Html.ActionLink("Buscar Libros", "Books", "Libro")</li>
<li>
#using (Html.BeginForm(FormMethod.Get))
{
<div>
#Html.TextBox("parametro")
<input type="submit" id="btnSearch" value="Some text"/>
</div>
}
</li>
</ul>
</div>
</div>
</div>
<div id="Books">
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer></footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
This is the Books view
#model IEnumerable<GoodReads.Models.Libro>
#{
/**/
ViewBag.Title = "Books";
}
<head>
<link href="#Url.Content("~/Content/Style.css")" rel="stylesheet" type="text/css" />
</head>
<body>
#foreach (var item in Model)
{
<div style="margin-left: 350px; margin-top: 50px;">
<h1 class="title-font">
#item.Title
<small class="year-font">(#item.Year)</small>
</h1>
</div>
<div style="margin-left: 350px; margin-top: 10px;">
<p style="font-size: 22px;">by #item.Author</p>
</div>
<div style="margin-left: 350px; margin-top: 10px;">
<p style="font-size: 22px;">#item.ISBN</p>
</div>
}
</body>
The Controller for Books (The conection to the database is made through instead of doing it directly in the controller)
// GET: Libro
public ActionResult Index()
{
return View();
}
public ActionResult Books(string parametro)
{
List<Libro> listalibros = ADLibros.BuscarLibro(parametro);
return View(listalibros);
}
The problem is your form. You don't set its action. If you don't tell it it will use the default which is the controller that renders the page. So when your Books controller renders the page this works because the default controller will be the books controller. You need to specify the action of your get form explicitly. To see the problem use your browser developer tools to inspect the form for the books page and the other pages.
To fix (assuming your controller for books is called BooksController) change the form code in your _Layout page to this
#using (Html.BeginForm("books", "books", FormMethod.Get))
{
<div>
#Html.TextBox("parametro")
<input type="submit" id="btnSearch" value="Some text" />
</div>
}
We are using an overload of Html.BeginForm with 3 arguments. The first is the actionName, the second is the controllerName and the 3rd is the FormMethod.
I wanted to add paging to my website so I installed the "PagedList.Mvc"
then I made some changes to model like for example changing the type from IEnumerable to IPagedList :
public IPagedList <Product> Products.
but I don't think changing model property has anything to do with the problem of layout disappearance.
And in controller part, I just added some properties to send through ViewModel to "Index" page, which I don't think has anything to do with the main problem.
i also added some <p> and <div> elements to the "Index" page which i don't think it has anything to do with layout problem since its universal to all pages.
I didn't touch the _layout.cshtml page :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</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 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("Shop by Category", "Index",
"Categories")</li>
<li>#Html.ActionLink("View All Our Products", "Index",
"Products")</li>
</ul>
#using (Html.BeginForm("Index", "Products", FormMethod.Get, new
#class = "navbar-form navbar-left"}))
{
<div class="form-group">
#Html.TextBox("Search",null,new {#class="form-
control",#placeholder="Search Products"})
</div>
<button type="submit" class="btn btn-default">Submit</button>
}
#Html.Partial("_LoginPartial")
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
the layout also is mentioned in _ViewStart.cshtml
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
but at the end what could be the reason that index page is looking like this, stripped away from menu, links, search box ...
i'm sure the link between "_layout page" and "views" is broken , but which factors beside #RenderBody( which already is there) are involved, I don't know.
btw. in the controller, I removed all viewbag and I'm using ViewModel , could it be a reason?
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>
I'm working with ASP.NET MVC 5 web apps and can't get DevExpress 17.1's file upload control to work properly. Or to be more precise, I've done everything their instructions describe to integrate their software (I've tried both using their templates and integrating manually) but when I use a file upload control the browse button does nothing.
The control appears properly in my Razor view, but none of the features are active. Clicking the browse button does nothing, clicking add, upload, etc. all do nothing. I'm using the example straight out of their documentation:
#using System.Web.UI.WebControls
#using DevExpress.Web.Mvc.UI
#model dynamic
#{
ViewBag.Title = "title";
}
#using (Html.BeginForm()) {
#Html.DevExpress().UploadControl(
settings => {
settings.Name = "uploadControl";
settings.FileInputCount = 2;
settings.ShowAddRemoveButtons = true;
}).GetHtml()
}
I feel like I must be missing something obvious, but I've got all their scrips, all their style sheets, everything integrated as near as I can tell. Can anyone suggest what might be going wrong?
Ok, I found the answer after creating sample apps and doing file-by-file compares. I thought I'd post it here for other unfortunate souls. The trick is that the ordering of things in the shared layout file (~/Views/Shared/_Layout.cshtml) is extremely finicky. Consider the following:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</title>
#Html.DevExpress().GetStyleSheets(
new StyleSheet { ExtensionSuite = ExtensionSuite.NavigationAndLayout },
new StyleSheet { ExtensionSuite = ExtensionSuite.Editors }
)
#Html.DevExpress().GetScripts(
new Script { ExtensionSuite = ExtensionSuite.NavigationAndLayout },
new Script { ExtensionSuite = ExtensionSuite.Editors }
)
#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 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>
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
Whenever my inclusion of the scripts and style sheets for DevExpress was otherwise than precisely that ordering, I had failures. I don't understand what was going wrong, but I doubt I'll be the only person to run into this.
Hope it helps!
I am a newb in using jquery in MVC, please bear with me. I cannot seem to display the jquery-ui slider control in my mvc page. I have tried to implement the following articles which I have found on the web:
How to add jQueryUI library in MVC 5 project?
jQuery UI with MVC 4
JQuery UI datepicker in Asp.Net MVC
http://blog.falafel.com/three-steps-use-jquery-ui-asp-net-mvc-5/
However, when I run the code, nothing shows. I have created a small little test project, and am trying to implement the slider on the about page. Here is my code:
In the About.cshtml:
#{
ViewBag.Title = "About";
}
<h2>#ViewBag.Title.</h2>
<h3>#ViewBag.Message</h3>
<p>Use this area to provide additional information.</p>
<div style="border: none; height: 20px;" id="slider">
</div>
#section Scripts{
<script type="text/javascript">
$(document).ready(function () {
$("#slider").slider();
});
</script>
}
In the BundleConfig.cs file:
using System.Web;
using System.Web.Optimization;
namespace TestApp
{
public class BundleConfig
{
// For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-1.10.2.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
"~/Scripts/jquery-ui-1.11.4.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.validate*"));
// 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"));
bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
"~/Content/themes/base/jquery-ui.css",
"~/Content/themes/base/jquery-ui.all.css"
//"~/Content/themes/base/jquery.ui.core.css",
//"~/Content/themes/base/jquery.ui.resizable.css",
//"~/Content/themes/base/jquery.ui.selectable.css",
//"~/Content/themes/base/jquery.ui.accordion.css",
//"~/Content/themes/base/jquery.ui.autocomplete.css",
//"~/Content/themes/base/jquery.ui.button.css",
//"~/Content/themes/base/jquery.ui.dialog.css",
//"~/Content/themes/base/jquery.ui.slider.css",
//"~/Content/themes/base/jquery.ui.tabs.css",
//"~/Content/themes/base/jquery.ui.datepicker.css",
//"~/Content/themes/base/jquery.ui.progressbar.css",
//"~/Content/themes/base/jquery.ui.theme.css"
));
}
}
}
In the Global.asax.cs file:
using System.Web.Mvc;
using System.Web.Optimization;
using System.Web.Routing;
namespace TestApp
{
public class MvcApplication : System.Web.HttpApplication
{
protected void Application_Start()
{
AreaRegistration.RegisterAllAreas();
FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
RouteConfig.RegisterRoutes(RouteTable.Routes);
BundleConfig.RegisterBundles(BundleTable.Bundles);
}
}
}
and in the _Layout.cshtml file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</title>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jqueryui")
#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 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>
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
#Styles.Render("~/Content/themes/base/css")
#RenderSection("scripts", required: false)
</body>
</html>
I have also created a screenshot of my Solution Explorer in case it may help:
Solution Explorer screenshot
I think it must be something small, but I am struggling to find the problem. I would appreciate it if anyone can point out what I should change in order to see and use the jquery-ui slider, or any other jquery controls in my site.
I found my mistake. I did not add/include the Jquery-ui.css file in the content folder. Once it was included I could see the Jquery control.
The link below explained and helped a lot in finding my mistake:
asp-net-mvc-4-jquery-datepicker
Hopefully this post can help someone else too.