I have the following ASP.NET MVC page written in razor:
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>SelectorTests</title>
<link href="#{ Url.Content("~/Content/themes/base/jquery-ui.css"); }" rel="stylesheet" type="text/css" />
<script src="#{ Url.Content("~/Scripts/jquery-1.4.4.min.js"); }" type="text/javascript"></script>
<script src="#{ Url.Content("~/Scripts/jquery-ui.min.js"); }" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('h1').css('background-color', 'purple');
});
</script>
</head>
<body>
<div>
<h1>My Header</h1>
foobar
</div>
</body>
</html>
URL.Content isn't working properly. When I do a View Source in FF, the relevant lines come back as
<link href="" rel="stylesheet" type="text/css" />
<script src="" type="text/javascript"></script>
<script src="" type="text/javascript"></script>
Please assist.
You're using curly braces when there is no need to.
<link href="#{ Url.Content("~/Content/themes/base/jquery-ui.css"); }" rel="stylesheet" type="text/css" />
Should be:
<link href="#Url.Content("~/Content/themes/base/jquery-ui.css")" rel="stylesheet" type="text/css" />
You need only wrap code in curly braces when there is no return value. For example if you were declaring a variable. You would not need curly braces to then output the contents of the variable.
#{
var foo = "bar";
}
<p>#foo</p>
Rich
Try the following
<link href="#Url.Content("~/Content/themes/base/jquery-ui.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui.min.js")" type="text/javascript"></script>
Related
I'm trying to use JQuery UI slider in on of my carousel's items.
I attached JQuery UI files (css and js) and it's not showing up.
$("#slider").slider();
<div id="slider"></div>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
the link and script are at the bottom of my body tag. tried to move them to head and still not working.
The console shows:
jquery-3.3.1.slim.min.js:2 jQuery.Deferred exception: $(...).slider is not a function TypeError: $(...).slider is not a function
head tag:
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.6.2/bootstrap-slider.js"></script>-->
<script src="bootstrap/js/bootstrap.js"></script>
<script src="jScripts/JavaScript.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js"></script>
<!--<link href="Style/reset.css" rel="stylesheet" type="text/css" />-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
<link href="bootstrap/css/bootstrap-reboot.css" rel="stylesheet" />
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" />
<link rel="shortcut icon" href="#">
<!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.6.2/css/bootstrap-slider.css" />-->
<link href="styles/myStyle.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Assistant" rel="stylesheet">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
You must define jquery-UI first.
When you calling $("#slider").slider();
'.slider()' function is not exist yet
Try to include jquery-UI library first.
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<div id="slider"></div>
$("#slider").slider();
I'd purchased this Metronic Theme and I'm trying to implement it in VS 2013 ASP.NET MVC. I did tried but all went wrong, is there any one who can guide me with this
Just put blank page content to _Layout.cshtml.
For example i copied Assets to under Content folder so i changed link like that:
<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")*#
<!-- BEGIN GLOBAL MANDATORY STYLES -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all" rel="stylesheet" type="text/css" />
<link href="~/Content/assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="~/Content/assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css" />
<link href="~/Content/assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="~/Content/assets/global/plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css" />
<link href="~/Content/assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css" rel="stylesheet" type="text/css" />
<!-- END GLOBAL MANDATORY STYLES -->
<!-- BEGIN THEME STYLES -->
<link href="~/Content/assets/global/css/components.css" id="style_components" rel="stylesheet" type="text/css" />
<link href="~/Content/assets/global/css/plugins.css" rel="stylesheet" type="text/css" />
<link href="~/Content/assets/admin/layout/css/layout.css" rel="stylesheet" type="text/css" />
<link id="style_color" href="~/Content/assets/admin/layout/css/themes/darkblue.css" rel="stylesheet" type="text/css" />
<link href="~/Content/assets/admin/layout/css/custom.css" rel="stylesheet" type="text/css" />
<!-- END THEME STYLES -->
<link rel="shortcut icon" href="favicon.ico" />
and javascripts are below the page (just before closing body tag):
#*#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)*#
<!-- BEGIN JAVASCRIPTS(Load javascripts at bottom, this will reduce page load time) -->
<!-- BEGIN CORE PLUGINS -->
<!--[if lt IE 9]>
<script src="../../assets/global/plugins/respond.min.js"></script>
<script src="../../assets/global/plugins/excanvas.min.js"></script>
<![endif]-->
<script src="~/Content/assets/global/plugins/jquery.min.js" type="text/javascript"></script>
<script src="~/Content/assets/global/plugins/jquery-migrate.min.js" type="text/javascript"></script>
<!-- IMPORTANT! Load jquery-ui.min.js before bootstrap.min.js to fix bootstrap tooltip conflict with jquery ui tooltip -->
<script src="~/Content/assets/global/plugins/jquery-ui/jquery-ui.min.js" type="text/javascript"></script>
<script src="~/Content/assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="~/Content/assets/global/plugins/bootstrap-hover-dropdown/bootstrap-hover-dropdown.min.js" type="text/javascript"></script>
<script src="~/Content/assets/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script>
<script src="~/Content/assets/global/plugins/jquery.blockui.min.js" type="text/javascript"></script>
<script src="~/Content/assets/global/plugins/jquery.cokie.min.js" type="text/javascript"></script>
<script src="~/Content/assets/global/plugins/uniform/jquery.uniform.min.js" type="text/javascript"></script>
<script src="~/Content/assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js" type="text/javascript"></script>
<!-- END CORE PLUGINS -->
<script src="~/Content/assets/global/scripts/metronic.js" type="text/javascript"></script>
<script src="~/Content/assets/admin/layout/scripts/layout.js" type="text/javascript"></script>
<script src="~/Content/assets/admin/layout/scripts/quick-sidebar.js" type="text/javascript"></script>
<script src="~/Content/assets/admin/layout/scripts/demo.js" type="text/javascript"></script>
<script>
jQuery(document).ready(function () {
Metronic.init(); // init metronic core components
Layout.init(); // init current layout
QuickSidebar.init(); // init quick sidebar
Demo.init(); // init demo features
});
</script>
<!-- END JAVASCRIPTS -->
and to show views content in layout put RenderBody here:
<!-- BEGIN PAGE CONTENT-->
<div class="row">
<div class="col-md-12">
#RenderBody()
</div>
</div>
<!-- END PAGE CONTENT-->
You can check http://www.aspnetzero.com/
It's an ASP.NET Startup project which uses Metronic as UI theme.
It's not a simple startup template but also a strong architecture and framework.
I'm creating mobile app with HTML/CSS/JS (phoneap, jquery mobile) and I'm converting code which is here https://build.phonegap.com/apps.
I need to achieve this behaviour:
after clicking on the link, which links on a external page, I need to open a question for selection a browser.
This si my code:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script src="https://www.paypalobjects.com/js/external/dg.js" type="text/javascript"></script>
<script type="text/javascript" src="js/datapicker/jquery.datetimepicker.js"></script>
<script src="js/jPayPalCart.js" type="text/javascript"></script>
<script type="text/javascript" src="js/phonegap-1.2.0.js"></script>
<link rel="stylesheet" href="js/datapicker/jquery.datetimepicker.css" />
<link rel="stylesheet" href="css/jquery.mobile-1.1.1.css" />
<script type="text/javascript">
function openDialog() {
window.open('http://apache.org', '_blank', 'location=yes');
}
</script>
<link rel="stylesheet" type="text/css" href="css/jquery-ui-1.10.4.custom.css">
<link rel="stylesheet" type="text/css" href="css/jquery.timepicker.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!-- Start of first page -->
<div data-role="page" id="findShop">
<div data-role="content">
<div class="container" data-role="content" role="main">
<div class="row main-page">
<div class="col-xs-12 title">
Die vielleicht beste Pizza der Stadt!
Open in web browser
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Does anyone know where could be problem
can you guys tell me why my slider is not working
i have included all the resources in the js fiddle then also its not working
providing fiddle link below
http://jsfiddle.net/YakV7/2/
actual demo
http://tympanus.net/Development/ParallaxContentSlider/
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cslider.js"></script>
<script type="text/javascript">
$(function() {
$('#da-slider').cslider();
});
</script>
What do you mean by these lines?
<link rel="stylesheet" type="text/css" href="css/demo.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/modernizr.custom.28468.js"></script>
<script type="text/javascript" src="js/jquery.cslider.js"></script>
Change it to the actual path.
<link rel="stylesheet" type="text/css" href="http://tympanus.net/Development/ParallaxContentSlider/css/demo.css">
<link rel="stylesheet" type="text/css" href="http://tympanus.net/Development/ParallaxContentSlider/css/style.css">
<script type="text/javascript" src="http://tympanus.net/Development/ParallaxContentSlider/js/modernizr.custom.28468.js"></script>
<script type="text/javascript" src="http://tympanus.net/Development/ParallaxContentSlider/js/jquery.cslider.js"></script>
Or add:
<base href="http://tympanus.net/Development/ParallaxContentSlider/" />
Same working fiddle: http://jsfiddle.net/YakV7/7/
I have a layout page thusly
<!DOCTYPE html>
<html>
<head>
<title>#ViewBag.Title</title>
<script src="#Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
<link href="#Url.Content("~/content/main_layout.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/content/menu.css")" rel="stylesheet" type="text/css" />
#RenderSection("JS", required:false)
#RenderSection("CSS", required:false)
</head>
<body>
#RenderBody()
</body>
</html>
And then a view like so
#{
ViewBag.Title = "Home";
Layout = "~/views/shared/_layout.cshtml";
}
#using RS.Common.HtmlHelpers;
#section JS
{
<script src="#Url.Content("~/scripts/fue.js")" type="text/javascript"></script>
<script src="#Url.Content("~/scripts/jquery.flexslider-min.js")" type="text/javascript"></script>
}
#section CSS
{
<link href="#Url.Content("~/content/hp.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/content/hp_form.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/content/flexslider.css")" rel="stylesheet" type="text/css" />
}
<h4>Test!</h4>
The page loads fine as I expect. However, I am getting 3 warnings:
Validation (XHTML 1.0 Transitional): Element 'link' cannot be nested within element 'link'
This error, one for each of the tags in the CSS section on the view.
It is only really an annoyance at this stage, but I wondered what the cause (and thus solution) for this error might be?
You have specified HTML5 DOCTYPE and yet trying to validate as XHTML 1.0 Transitional. I suppose that the final rendered HTML looks like this:
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<script src="/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<link href="/content/main_layout.css" rel="stylesheet" type="text/css" />
<link href="/content/menu.css" rel="stylesheet" type="text/css" />
<script src="/scripts/fue.js" type="text/javascript"></script>
<script src="/scripts/jquery.flexslider-min.js" type="text/javascript"></script>
<link href="/content/hp.css" rel="stylesheet" type="text/css" />
<link href="/content/hp_form.css" rel="stylesheet" type="text/css" />
<link href="/content/flexslider.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h4>Test!</h4>
</body>
</html>
You might want to invert the order of the two RenderSection in your layout so that the links and scripts are grouped together. Or you might also consider moving the script declarations to the end of the page:
Like this:
<!DOCTYPE html>
<html>
<head>
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/content/main_layout.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/content/menu.css")" rel="stylesheet" type="text/css" />
#RenderSection("CSS", required:false)
</head>
<body>
#RenderBody()
<script src="#Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
#RenderSection("JS", required:false)
</body>
</html>