why in aspx ~ not working when i try to use it in JS
<script type="text/javascript" src="~/js/jQuery/jquery-ui.min.1.7.3.js"></script>
in source code is the same ~/js
but with CSS works
<link href="~/css/confirm.css" rel="stylesheet" type="text/css" media="screen" />
"~/" -substitution for the application root in ASP.NET, should work only with ASP.NET server controls
For example in ASP.NET MVC you may go like that:
<link href="#Url.Content("~/Content/Css/Site.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Content/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
You can view method Url.Content (System.Web.Mvc.dll, v4.0.30319, class UrlHelper) in Reflector.
Or you may try like that:
<link href="/Content/Css/Site.css" rel="stylesheet" type="text/css" />
<script src="/Content/Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
~ only works for server controls, AFAIK. Don't know why it works for your CSS include.
Related
This might be something simple for many but for me it's still a huge confusion web. I'm tired of placing references everywhre on master page and normal pages so I'm just going to ask here. I have a project which uses plugins and I want to set references on Master Page so the normal pages can see those references so I don't need to place them on each page one by one. Question is, I'm doing this but why does it not work?
Example
This is My Master Page
<html>
<head>
<link rel="stylesheet" href="AdminLTE/bower_components/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="AdminLTE/bower_components/font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" href="AdminLTE/bower_components/Ionicons/css/ionicons.min.css" />
<link rel="stylesheet" href="AdminLTE/dist/css/AdminLTE.min.css" />
<link rel="stylesheet" href="AdminLTE/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css" />
<link rel="stylesheet" href="AdminLTE/dist/css/skins/skin-blue.min.css" />
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<asp:ContentPlaceHolder ID="PageBody" runat="server">
</asp:ContentPlaceHolder>
<script src="AdminLTE/bower_components/jquery/dist/jquery.min.js"></script>
<script src="AdminLTE/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="AdminLTE/bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="AdminLTE/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
<script src="AdminLTE/dist/js/adminlte.min.js"></script>
<script type="text/javascript" src="Scripts/MasterPage/main.js"></script>
</body>
</html>
And in another page i'm using jquery table where I set the DataTable to Table ID with
<script>
$(function () {
$.noConflict();
$("#tblRegistos").DataTable();
});
</script>
And still it says it doesn't recognize DataTable as a function. Script references are in order by the way because it works on the page but not if on master page
EDIT
I just tried to put scripts in the Head of master page and it worked but i tried to avoid this because I read that it's a bad practice to do...
It's because your script tags in the child pages will be rendered before your files. Add the js content of your script tags to .js files and reference them on the master page after main.js.
<script type="text/javascript" src="Scripts/MasterPage/main.js"></script>
<script type="text/javascript" src="Scripts/OtherPage/otherPage.js"></script>
Maybe its a stupid question, but i'm having this issue in Visual Studio 2010:
in my Master page i've this code:
<head runat="server">
<title>App Title</title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
<link href="<%= App.RootPath %>Css/style.css" rel="stylesheet" type="text/css" />
</head>
for some strange reason the <% is changed at runtime with <%
<%= App.RootPath %> works normal if put anywhere outside head tag.
Anyone has never experienced this and resolved?
UPDATE:
If i put off runat="server" in head tag, it works. But i need it.
Edit:
All of these methods work, but the problem is lack of designer support?
The explanation for your trick:
<link <%= "href='" +App.RootPath +"Css/style.css'" %> rel="stylesheet" type="text/css" />
To find the answer generate a compilation exception. Change App.RootPath to App.RootPaths.., then navigate to the source code (it will be shown in the error page). If the compiler matches something like <link href='' rel='' > then it will generate the code to build a corresponding HtmlLink instance. So this is why it parses <%= as a literal string and after that it encodes it.
Your trick cheats the compiler, which is not bad at all.
I believe it does the same thing for meta tags, (HtmlMeta)
For now, i've found this workaroud; still searching for the reason of this behaviour.
<link <%= "href=" +App.RootPath +"Css/style.css" %> rel="stylesheet" type="text/css" />
This should work too.
<link href="<%= App.RootPath + "Css/style.css" %>" rel="stylesheet" type="text/css"/>
I normally use ResolveUrl:
<link href='<%= Page.ResolveUrl("~Css/style.css") %>' rel="stylesheet" type="text/css"/>
**problem**
<link rel="canonical" href="http://www.kayserianadoluhaber.com.tr/haber/<%=kanonikal%>" />
**solved**
<link rel="canonical" href="http://www.kayserianadoluhaber.com.tr/haber/<%=kanonikal+""%>" />
I developed a web application and all my web pages were on root. here is my folder structure.
-Solution
.....js
.......xyz.js
.....css
.......abc.css
Page1.aspx
Page2.aspx
Page3.aspx
AppMaster.Master
Page4.aspx (please note they are lying on root)
Page5.aspx (please note they are lying on root)
I have referenced my css and js in masterpage like this.
<script src="js/jquery-1.3.2.js" type="text/javascript"></script>
<link href="css/sprystylesheet.css" rel="stylesheet" type="text/css" />
<link href="css/jquery.datepick.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.tools.min.js" type="text/javascript"></script>
<link href="css/scrollable-wizard.css" rel="stylesheet" type="text/css" />
<script src="js/livevalidation.js" type="text/javascript"></script>
<script src="js/qTip.js" type="text/javascript"></script>
<script src="js/jquery.contactable.packed.js" type="text/javascript"></script>
<script src="js/autoLoader.js" type="text/javascript"></script>
<script src="js/jquery.metadata.js" type="text/javascript"></script>
<script src="js/autoNumeric-1.6.2.js" type="text/javascript"></script>
<script src="js/jquery.blockUI.js" type="text/javascript"></script>
Now when i implemented roles to implement page access security via web.config deny users I have placed the pages like this.
-Solution
.....js
.....css
-Admin
....Page1.aspx
....Page2.aspx
-Users
....Page3.aspx
Page4.aspx
Page5.aspx
But since I've changed the folder structure I am keep getting object expected due to javascript and css is not working either. What should I do now as I am not referencing css and js specifically in every content page. Some pages will be inside specific folders and some will be on root so in this scenario how should I change the css and js location references.
Thanks
Just put a slash in front of each URL to reference them relative to the root:
<link href="/css/sprystylesheet.css" rel="stylesheet" type="text/css" />
I want to add a version number to my js files.
<link href="css/reset.min.css?v=<%= App.Golbal.VERSION %>" media="all" rel="Stylesheet" type="text/css" />
This renders as
<link href="css/reset.min.css?v=<%= App.Golbal.VERSION %>" media="all" rel="Stylesheet" type="text/css" />
[Standard asp.net 4 web applciation]
Can anybody help?
Put it inside PlaceHolder control because link in the title not included in the form tag so no parsing will occur to it as following
<asp:PlaceHolder runat="server">
<link href="css/reset.min.css?v=<%= App.Golbal.VERSION %>" media="all" rel="Stylesheet" type="text/css" />
</asp:PlaceHolder>
As Dante suggests above, maybe change
<%= App.Golbal.VERSION %>
to
<%=App.Golbal.VERSION%>
or
<%=App.Global.VERSION%>
and try that.
Alternatively, like William suggest, set id and runat=server on the link element and apply the value in the server script/code behind.
<link id="lnkCSS" runat="server" media="all" rel="Stylesheet" type="text/css" />
and the server script/code behind, something like
//might need HtmlLink lnkCSS = FindControls("lnkCSS")`
lnkCSS.href = "css/reset.min.css?`v=" + App.Global.VERSION;
I've had similar issues before the way to get around it is make the link an asp:hyperlink and build the link in the code behind and then assign the link to the NavigateURL of the hyperlink.
Can you try removing the white space in "<%= App.Golbal"?
Btw, Global is mispelled :)
I have a page called test.aspx and in that page, I have the following link:
<a href="../help/default.aspx?height=100&width=500"
class="thickbox">
<asp:ImageButton ID="ibtnHelp"
runat="server"
ImageUrl="~/images/needhelp.jpg" /></a>
When I click on the link, it opens up the default.aspx page under help in a new window instead of the thickbox.
In my masterpage, I have the following in the head for the thickbox:
<head runat="server">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"
type="text/javascript"></script>
<script src="../js/thickbox.js" type="text/javascript"></script>
<title>Details</title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
<link href="styles/style.css" rel="stylesheet" type="text/css" />
<link href="styles/RoundDiv.css" rel="stylesheet" type="text/css" />
<link href="styles/thickbox.css" rel="stylesheet" type="text/css" />
</head>
If I put it the script directly on the test.aspx, it works fine, but not when I have it in the masterpage.
First thing to do is ensure the thickbox.js file is being served correctly when linked from the masterpage. Either use firebug or fiddler2 to establish if the file is requested and the response is a 200.
I suspect you need the following to reference thickbox...but its been ages since I had to hack around with aspx..
<script type="text/javascript" src="<%=ResolveUrl("~/js/thickbox.js") %>"></script>