In my ASP.NET project. I put my css file in
\App_Themes\Default\theme.css
This is right under my project folder with all the aspx, master, web.config, etc.
How do I read that into a string using relative pathing from my .Master page? In C#.
In the *.aspx page:
<head runat="server">
<link runat="server" href="~/App_Themes\Default\theme.css"
rel="stylesheet" type="text/css" />
</head>
Or from the code behind:
string path = ResolveUrl("~/App_Themes\Default\theme.css");
// or
string path = ResolveClientUrl("~/App_Themes\Default\theme.css");
(Description of the behavior and the difference between the twocan be found at: http://www.andornot.com/blog/post/ResolveUrl-vs-ResolveClientUrl.aspx)
This should return the full path to your css folder
Server.MapPath("App_Themes\Default\theme.css")
more info can be found here http://msdn.microsoft.com/en-us/library/ms178116.aspx
Related
I'm working on a Web Project and I need to share one master page so that when I create a new page, it has the basic layout.
What i've thought is to create a project with that master page and, in each web project, add it as a reference.
But the problem is that i don't know how to embed the master page in the .aspx file that I want to apply the MP, or if it's the best way of sharing master pages between projects.
I'll apreciate any help or comment!
Here I give you my code (this doesn't work):
Index.aspx:
<%# Page Language="C#" AutoEventWireup="true" MasterPageFile="" CodeBehind="Index.aspx.cs" Inherits="MiWeb.Index" %>
<HeaderMp:Header ID="ctntHead" ContentPlaceHolderID="head" runat="server">
<title>SITPer</title>
</HeaderMp:Header>
Header.Master:
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Header.Master.cs" Inherits="MasterPages.Header" %>
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script src="js/jquery.min.js"></script>
<script src="js/jquery.dropotron.min.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/skel-layers.min.js"></script>
<script src="js/init.js"></script>
<noscript>
<link rel="stylesheet" href="css/skel.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/style-desktop.css" />
</noscript>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<div>
<!-- Header -->
<div id="header-wrapper" >
<div id="header">
<!-- Logo -->
<div id="logo">
<h1>SITPer</h1>
<p>Prueba</p>
</div>
</div>
</div>
<asp:ContentPlaceHolder ID="body" runat="server">
</asp:ContentPlaceHolder>
</div>
</body>
</html>
Thanks!!
NOTE: In addition to the linked files feature described here, there is a new shared project feature in Visual Studio 2015+ that allows you to create a project exclusively for sharing code that will be compiled into the project it is added to.
Master pages can only belong to a single web project. However, there is a feature of Visual Studio/MSBuild that allows you to share the code between projects to effectively get the desired result. If you put the master page files (all of them including .master, .master.cs and .master.designer.cs) into a folder at the same level as your solution you can use the linked file feature of Visual Studio to add the file as a linked file (one that is not copied into the project folder).
In Windows Explorer, open up the directory that has your solution (.sln) file. Right click in the whitespace and click New -> Folder. Name the folder SharedFiles. Copy the Header.master, Header.master.cs and Header.master.designer.cs files into the folder.
In Visual Studio, delete the Header.master file(s) from all of the projects. Then follow these steps for each project you want to share the Header.master page in.
Right-click on the project you wish to share the file in Solution Explorer, and click Add -> Existing Item.
In the Add Existing Item dialog, navigate to the SharedFiles folder.
Highlight the Header.master, Header.master.cs and Header.master.designer.cs files.
In the bottom right corner of the Add Existing Item dialog, click the down arrow next to the Add button (not the Add button itself!), and click the Add As Link item in the dropdown.
If you did it correctly, the icon of the file will have an arrow on it to indicate that it is a linked file. Now when you make changes to the master page, the changes will be reflected in all of the projects.
You also have an issue that you must fix in your Index.aspx page. You must set the master page file to the virtual location of the file. If you follow the instructions above, the path will be...
MasterPageFile="~/Header.master"
But note that the virtual path will change if you put the file (or the linked file) in a subdirectory of your web project.
i think you are not adding the address of your masterpage in your page (MasterPageFile="").
are you using visual studio?
if you are then you just need to use
ctrl+shift+a and select web form using masterpage.
Master Page:
<%# Master Language="VB" AutoEventWireup="false" CodeBehind="Site1.master.vb" Inherits="WebApplication2.Site1" %>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
Page.aspx which uses masterpage:
<%# Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site1.Master" CodeBehind="Registration Form.aspx.vb" Inherits="WebApplication2.Registration_Form" %>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
I am building an ASP.NET Webform application with C# in VS 2012, .NET framework 4.5
I have a MasterPage in root of application, JavaScript files are in folder named js.
Here is the problem: If page are in root folder then everything is working fine (css+js), if I put any pages in subfolder then css is worked but those JavaScripts are not working at all, obviously the reference path is wrong.
So the Css reference path is fine, but for the script no matter what I used they all are not worked (js/script.js or ~/js/script.js or /js/script.js or ../ ResolveUrl, ResolClientveUrl ... or all of method in this http://yobriefca.se/blog/2010/10/19/%3C-head-%3Eache-including-javascript-in-asp-dot-net-master-pages/ ) they all refer to root/SUB-FOLDER/js/script.js instead of root/js/script.js
in root: a single MasterPage, Default.aspx, test.aspx, js folder, css folder and Pages folder. Default and test pages are working file, but all pages in Pages folder is not display .js SO OBLIVIOUSLY the path is wrong whenever pages is not in root
In my master page:
<head runat="server">
<title></title>
<link rel="stylesheet" href="~/css/style.css" />
<%-- tried these and lot more but NOT workkkkkkkkkkk --%>
<%--<script src="~/js/jquery-1.7.1.min.js" ></script>
<script src="~/js/script.js" ></script>--%>
<%--<script src='<%=ResolveUrl("~/js/jquery-1.7.1.min.js") %>' ></script>
<script src='<%=ResolveUrl("~/js/script.js") %>' type="text/javascript"></script>--%>
<%--<script src='<%=ResolveClientUrl("~/js/jquery-1.7.1.min.js") %>' type="text/javascript"></script>
<script src='<%=ResolveClientUrl("~/js/script.js") %>' type="text/javascript"></script>--%>
<asp:ContentPlaceHolder ID="Head" runat="server">
</asp:ContentPlaceHolder>
the script.js is somthing like:
....
$.include('js/superfish.js')
$.include('js/FF-cash.js')
$.include('js/tms-0.4.x.js')
$.include('js/uCarausel.js')
$.include('js/jquery.easing.1.3.js')
$.include('js/jquery.tools.min.js')
$.include('js/jquery.jqtransform.js')
$.include('js/jquery.quicksand.js')
$.include('js/jquery.snippet.min.js')
$.include('js/jquery-ui-1.8.17.custom.min.js')
$.include('js/jquery.cycle.all.min.js')
$.include('js/jquery.cookie.js')
$(function(){
if($('.tweet').length)$.include('js/jquery.tweet.js');
if($('.lightbox-image').length)$.include('js/jquery.prettyPhoto.js');
if($('#contact-form').length||$('#contact-form2').length)$.include('js/forms.js');
if($('.kwicks').length)$.include('js/kwicks-1.5.1.pack.js');
if($('#counter').length)$.include('js/jquery.countdown.js');
if($('.fixedtip').length||$('.clicktip').length||$('.normaltip').length)$.include('js/jquery.atooltip.pack.js')
// Slider
$('.main-slider')._TMS({
.....
ERROR in developer tool (Console) of web browser:
Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/tms-0.4.x.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/uCarausel.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/jquery.jqtransform.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/jquery.quicksand.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/jquery.snippet.min.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/FF-cash.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/superfish.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/jquery.tools.min.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/jquery-ui-1.8.17.custom.min.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/jquery.cycle.all.min.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/jquery.easing.1.3.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/jquery.cookie.js
Uncaught TypeError: Object [object Object] has no method '_TMS' script.js:22
event.returnValue is deprecated. Please use the standard event.preventDefault() instead.
HTML
You typically don't want any scripts in the <head /> apart from scripts like Modernizr that have feature detection. It's more of a best practice to move all scripts to the bottom of the page like so:
<html>
<head runat="server">
<title></title>
<link rel="stylesheet" href='<%= ResolveUrl("~/css/style.css") %>' />
<asp:ContentPlaceHolder ID="Head" runat="server" />
</head>
<body>
<!-- Scripts at bottom of page for faster loading. -->
<script src='<%= ResolveUrl("~/js/jquery-1.7.1.min.js") %>'></script>
<script src='<%= ResolveUrl("~/js/script.js") %>'></script>
</body>
</html>
SCRIPT.JS
Referencing the other script files in script.js will require the / to be appened to 'js/` like so:
$.include('/js/superfish.js');
$.include('/js/FF-cash.js');
$.include('/js/tms-0.4.x.js');
$.include('/js/uCarausel.js');
$.include('/js/jquery.easing.1.3.js');
$.include('/js/jquery.tools.min.js');
$.include('/js/jquery.jqtransform.js');
$.include('/js/jquery.quicksand.js');
$.include('/js/jquery.snippet.min.js');
$.include('/js/jquery-ui-1.8.17.custom.min.js');
$.include('/js/jquery.cycle.all.min.js');
$.include('/js/jquery.cookie.js');
if($('.tweet').length)
$.include('/js/jquery.tweet.js');
if($('.lightbox-image').length)
$.include('/js/jquery.prettyPhoto.js');
if($('#contact-form').length || $('#contact-form2').length)
$.include('/js/forms.js');
if($('.kwicks').length)
$.include('/js/kwicks-1.5.1.pack.js');
if($('#counter').length)
$.include('/js/jquery.countdown.js');
if($('.fixedtip').length || $('.clicktip').length || $('.normaltip').length)
$.include('/js/jquery.atooltip.pack.js');
// Slider
$('.main-slider')._TMS({
MISC
Don't forget to clear your cache or work in private browsing while testing all of this!
You can include a .js file either between the head tags , contentplaceholder tags or inside the body tags. This will in all cases be reflected in your other pages that include this masterpage. All you need to focus on is the way that the path is created.
The code below adds a jquery file to a masterpage in the head section of the masterpage.
<%# Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<title></title>
<script src="jquery-2.1.1.min.js"></script>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
<script>
</script>
Relative vs Absolute URL's
By using ../ and ~/ before the url path , you are creating a relative URL. The paths of relative URL's is affected when you change the folder level of either the file that you are referring to or the file which contains the link.
../ symbol make one step out of the folder containing the link. make sure you have enough '../' to refer to the correct file.
~/ symbol creates a path that starts at the root of your project.
To create an absolute URL ,Just drag the file you intend to include in the page from solution explorer in Visual Studio to the page.
For more about the difference between absolute and relative URL's check
Difference between Relative path and absolute path in javascript
Try replacing ~/ with ../. One of my projects was doing the same thing and that fixed it.
Also, make absolutely certain that even on the server (and not just in the project), the JS folder is directly below the root.
You should use ~ prefix, before file location. (like this: ~/projects/files/web/admin )
If you want the js to load on every page, including relative paths, then add it just under the modernizr entry:
<asp:PlaceHolder runat="server">
<%: Scripts.Render("~/bundles/modernizr") %>
<%: Scripts.Render("~/Scripts/jquery.min.js") %>
<%: Scripts.Render("~/Scripts/my.js") %>
</asp:PlaceHolder>
I have a doubt that in asp.net I am using CssClass class attribute for web server controls. And i am writing all the css code in style.css which will be in style folder of my project
<asp:TextBox ID="UserName" runat="server" CssClass="textEntry"></asp:TextBox>
The above is the example of the textbox.
Now the question is do i need to use link tag to say that my css file is located in style folder of my project?
Yes, you have to link the style sheet file (.css) by adding the link tag.
You can also simply drag the css file into the html section of the .aspx code right under head tag, that will work too - that will create the link for you.
Of course you need to link to your css file just like you do in regular html:
<link rel="stylesheet" type="text/css" href="style/mystyle.css">
While writing .aspx file just think as if you are writing an HTML file with the ability to pre-process the page through the ASP.NET view engine (which is where the additional asp tags come into play).
No, the tag is only used to apply a class within your CSS file. Just make sure you link your CSS file with your page as follows:
<head>
<link rel="stylesheet" type="text/css" href="path_to_your.css">
</head>
I'm writing a ASP.NET Web Application and I'm running into trouble getting the CSS styles to be applied. Currently I have a Master Page and one Content Page. My Master page is getting the CSS style applied to it, but the Content page is not. The funny thing is in design view the style is being applied to the Content page but once it is ran the browser doesn't apply it. I've tried internal and external style sheets. Inline does work but I'd like to avoid inline. Here is some sample code of what I have and tried
Master Page:
<head runat="server">
<title></title>
<link rel="stylesheet" type="text/css" href="~/Styles/MasterStyleSheet.css" />
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
Content Page:
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<link rel="stylesheet" type="text/css" href="~/Styles/LoginStyleSheet.css" />
<!-- <link href='<%= ResolveUrl("~/Styles/LoginStyleSheet.css") %>' rel="stylesheet" type="text/css" /> I tried this as well-->
</asp:Content>
I've added the simple css file just so people could see that the syntax is correct:
LoginStyleSheet.css
#usrLabel {
color:Blue;
background-color:Aqua;
}
#Label4 {
background-color:Black;
}
Any help would be greatly appreciated
Update #1
HTML output for header:
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="../Styles/MasterStyleSheet.css" />
<!-- <link href="<%= ResolveUrl("~/Styles/MasterStyleSheet.css") %>" rel="stylesheet" type="text/css" /> -->
<!-- <link rel="stylesheet" type="text/css" href="../Styles/LoginStyleSheet.css" /> -->
<!-- <link href='/Styles/LoginStyleSheet.css' rel="stylesheet" type="text/css" /> -->
<!-- <link rel="stylesheet" type="text/css" href="~/Styles/LoginStyleSheet.css" /> -->
<!-- <link rel="stylesheet" type="text/css" href="../Styles/LoginStyleSheet.css" /> -->
<!-- <link rel="stylesheet" type="text/css" href="/Styles/LoginStyleSheet.css" /> -->
</head>
A lot of <link> elements are currently commented out but those are all different ways I've tried.
Update #2
First I appreciate the many responses. They have all been geared towards figuring out why my external css file won't work. However, if i try internal css style sheet it still doesn't work. Only inline css works. Perhaps if we could figure out what was wrong with why internal css styling wont work that would solve the same issue with external css style sheets
As you have already realised, the following won't translate into an absolute path, because it is not an asp.net object...
<link rel="stylesheet" type="text/css" href="~/Styles/LoginStyleSheet.css" />
Instead, try using this...
<link rel="stylesheet" type="text/css" href="<%=VirtualPathUtility.ToAbsolute("~/Styles/LoginStyleSheet.css")%>" />
UPDATE (after updated question)...
If the HTML sent the browser is as follows, then I believe LoginStyleSheet.css is either in a different location, or has some file permissions that are stopping it being served correctly...
(I have removed commented out lines, and added the line starting with **... the ** should NOT be included)
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="../Styles/MasterStyleSheet.css" />
**<link rel="stylesheet" type="text/css" href="../Styles/LoginStyleSheet.css" />
</head>
ALSO #aRsen49 highlights a possibility in his answer... and that is that the CSS file is loading correctly, but the CSS is incorrect. Have you double checked that the CSS matches as it should (remembering that # denotes an id where as . denotes a class)?
FURTHER UPDATE
If #Trisped is correct in his assumption, I think I might have an idea what is going wrong...
If usrLabel and Label4 are asp objects (such as <asp:Label>), the fact you're using Masterpages means that the actual id of the controls in the HTML sent to the browser will not be usrLabel and Label4, but in fact they'll be something like ct100_Content1_usrLabel and ct100_Content1_Label4... so your CSS as you currently have it will not link up correctly.
So I would recommend you either update your CSS to use the id's sent to the browser, or (and this would be my preference) you should add CssClss="usrLabel" attributes to each of the objects, and then update your CSS to .usrLabel instead.
Ok so here was the fix. So in my html the id was label4. However, because it was in a content page with a contentplaceholder id of ContentPlaceHolder1 once the html was actually generated the label's id was being changed from label4 to ContentPlaceHolder1_Label4. Therefore i had to change my css code. BTW f12 on ie works wonders. Thanks again for all the help. Sorry it was something as simple as an id being wrong.
In your master page, define a HEAD element and then mention the link for CSS classes. Then it would work on all your content pages. I have found a good reference for you here
If you use Visual Studios "drag and drop" the CSS sheet in your code.
If it still wont work, double check your CSS.
For example:
Did you create CSS Classes (CssClass = ) for ASPX Elements?
Are Class names right?
etc.
UPDATE
I know this might sound odd.. But Close down VS and restart it. Then Display the Page again. Furthermore.. When you display the page press F5! I believe your cache or similar might be the problem.
Try:
Open the page in Chrome
Right click on an element which is applying the style (something in the master page) and select "Inspect element".
In the window that pops up copy everything in the "Styles" panel (this panel is usually on the right side, just under computed style).
Right click on an element which is not applying the style and select "Inspect element".
Compare what is in the Styles with what you copied earlier.
If that does not get you on the right track then we will need one or both of the following:
The rendered html of a page which is not working. This should be the complete file. The page should not reference external resources like CSS or JS files.
A master page and content page which exhibit the issue.
Please note that these should be basic pages which exhibit the issue (not a production page with multiple controls on it).
I our application we have image patches set in CSS file as shown below
.HeaderShodow {
background:url('../../App_Images/HeaderShodow.gif') repeat-x top left;
height:5px;
}
when we move this application to iss6 server the images or not rendered
we have sent css/image/script links with in the aspx file as below
<link href="<%= Url.Content("~/App_Themes/Common.css")%>" rel="stylesheet" type="text/css" />
but how to set when the image links are with in the css file
Thanks
The reason this doen't work is because there's the virtual directory name appended in IIS. To avoid this problem make sure you always include your CSS file using proper helpers and do not hardcode the location:
<!-- Notice the ~ in the href attribute which points to the root of the application -->
<link rel="stylesheet" href="<%= Url.Content("~/styles/somestyle.css") %>" type="text/css" />
then in the css file make sure that image paths are relative to the location of this CSS file.
My recommendation, as CSS image URL's are relative to the CSS file itself, is to have an images folder in the same directory as the CSS file itself.
so your directory would look like:
/Content/site.css
/Content/Images/blah.png
that means in your CSS file you can reference the images like:
.myClass
{
background-image: url('Images/blah.png');
}
and if in your HTML you reference the CSS with the Url.Content() code, you will always get the correct path.
<link href="<%: Url.Content("~/Content/site.css") %>" rel="stylesheet" type="text/css" />