I have the following line:
<link href="<%= Links.Content.Site_css %>" rel="stylesheet" type="text/css" />
which is rendered to
<link href="Views/Shared/%3C%25=%20Links.Content.Site_css%20%25%3E" rel="stylesheet" type="text/css" />
So expression is not executed. If I remove quotes:
<link href=<%= Links.Content.Site_css %> rel="stylesheet" type="text/css" />
expression is executed but markup becomes xhtml incompatible. What is the right way to fix this problem?
Just remove the runat="server" on your tag and it should fix it.
Use single quotes instead of double quotes.
<link href='<%= Links.Content.Site_css %>' rel="stylesheet" type="text/css" />
For that special case, I'd use Css helper method from MVC futures assembly:
<%:Html.Css(Links.Content.Site_css) %>
This might be a workaround
<link href=<%= '"' + Links.Content.Site_css + '"' %> rel="stylesheet" type="text/css" />
(I have no experience with ASP, sorry if that's just invalid syntax)
Related
Should I use
<link href="#Url.Content("~/Styles/style.css")" rel="stylesheet" />
or
<link href="#Href("~/Styles/style.css")" rel="stylesheet" />
or
<link href="~/Styles/style.css" rel="stylesheet" />
for referencing StyleSheets, JavaScripts and images?
Is there any difference between above three?
I am trying to create a rails app and I have couple of css and js files to be added to rails app pipeline. These are;
<link href="assets/plugins/pace/pace-theme-flash.css" rel="stylesheet" type="text/css" />
<link href="assets/plugins/boostrapv3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="assets/plugins/font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css" />
<link href="assets/plugins/jquery-scrollbar/jquery.scrollbar.css" rel="stylesheet" type="text/css" media="screen" />
<link href="assets/plugins/bootstrap-select2/select2.css" rel="stylesheet" type="text/css" media="screen" />
<link href="assets/plugins/switchery/css/switchery.min.css" rel="stylesheet" type="text/css" media="screen" />
<link href="assets/plugins/codrops-stepsform/css/component.css" rel="stylesheet" type="text/css" media="screen" />
<link href="assets/plugins/bootsclertrap-datepicker/css/datepicker3.css" rel="stylesheet" type="text/css" media="screen">
<link href="assets/plugins/summernote/css/summernote.css" rel="stylesheet" type="text/css" media="screen">
<link href="assets/plugins/bootstrap-daterangepicker/daterangepicker-bs3.css" rel="stylesheet" type="text/css" media="screen">
<link href="assets/plugins/bootstrap-timepicker/bootstrap-timepicker.min.css" rel="stylesheet" type="text/css" media="screen">
<link href="assets/plugins/codrops-dialogFx/dialog.css" rel="stylesheet" type="text/css" media="screen" />
<link href="assets/plugins/codrops-dialogFx/dialog-sandra.css" rel="stylesheet" type="text/css" media="screen" />
<link href="pages/css/pages-icons.css" rel="stylesheet" type="text/css">
<link class="main-stylesheet" href="pages/css/themes/simple.css" rel="stylesheet" type="text/css" />
<link class="main-stylesheet" href="assets/css/style.css" rel="stylesheet" type="text/css" />
as in the theme I am trying to use. But if I only separate these css js and image, the problem is some of the css files are using img files inside their directory.For instance, select2.css uses background: url('select2.png') right top no-repeat; Or bootstrap min (I know I can add gem for this) uses url path to src:url(../fonts/glyphicons-halflings-regular.eot). So should I go over css and js files and search for their dependents?
I am so stuck in to designing this in a rails way. Thank you
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>
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>
Hi making my first page using Struts2.
This is the easy code :
<%# taglib prefix="s" uri="/struts-tags" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/interfaccia.css" />
<link rel="stylesheet" type="text/css" href="css/links.css" />
<link rel="stylesheet" type="text/css" href="css/fonts.css" />
<link rel="stylesheet" type="text/css" href="css/profile.css" />
<link rel="stylesheet" type="text/css" href="css/affitta.css" />
<title>
Struts2 - The Sinfonet Portal
</title>
</head>
<body>
<s:div cssStyle="contenitore">
<s:div cssStyle="header">
<s:div cssStyle="header1">
<img src="img/logosw.png" alt="Logo Sinfonet" />
</s:div>
<s:div cssStyle="header2">
<img src="img/band1.jpg" alt="Flag 1" class="photoband" />
<img src="img/band2.jpg" alt="Flag 2" class="photoband" />
<img src="img/band3.jpg" alt="Flag 3" class="photoband" />
</s:div>
</s:div>
<s:div cssStyle="center">
<s:div cssStyle="menu">
<s:div cssStyle="menu_table">
<s:label cssStyle="menu_title" value="Login" />
<s:label cssStyle="menu_span" value="Username" />
<s:textfield />
<s:label cssStyle="menu_span" value="Password" />
<s:textfield />
</s:div>
</s:div>
</s:div>
</s:div>
</body>
</html>
I don't know why it doesnt get the right CSS style (in fact the page looks strange).
What am I wrong?
Have you checked that all of your CSS files are served properly (i.e., they aren't resulting in 404 errors)?
You could try out your page with <div instead of <s:div and see what you get.
I was having a same problem, after parsing through struts css seem to vanish.
Solution: Just add folder name before style in href.
e.g:
Before:
href="style.css"
After:
href="foldername/style.css"
Seems to be nothing Struts2-specific. As Steven answered, check that you get the css-files served if you enter the URL they should be at directly. If not, it may be that you'll have to take a look in your WebContent/WEB-INF/web.xml file if you're directing the requests wrong.
Try something like this
<link href="<s:url value="css/interfaccia.css"/>" rel="stylesheet" type="text/css"/>
You Have to mention the whole path in every page
like..
<link rel="stylesheet" type="text/css" href="<s:url value="/css/style.css" />" />
for images
<img id="logo" src="<s:url value="/images/logo.png" />" />