The solution structure of my application is:
Now I am in Login.aspx and I am willing to add favicon.ico, placed in the root, in that page.
What I am doing is:
<link id="Link1" runat="server" rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />
<link id="Link2" runat="server" rel="icon" href="../favicon.ico" type="image/ico" />
Also I have tried:
<link id="Link1" runat="server" rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link id="Link2" runat="server" rel="icon" href="favicon.ico" type="image/ico" />
But these aren't working.
I have cleared the browser cache but no luck.
What will be the path to the favicon.ico from:
Login.aspx
Site.master
Thank you.
The login page's URL: http://localhost:2873/Pages/Login.aspx and the favicon.ico's URL: http://localhost:2873/favicon.ico.
I am unable to see the favicon.ico after changing my code as:
<link id="Link1" rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link id="Link2" rel="icon" href="/favicon.ico" type="image/ico" />
/favicon.ico
might do the trick
I have tried this on my sample website
<link rel="shortcut icon" type="image/x-icon" href="~/ows.ico" />
Try this one in your site put the link in MasterPage,It works :)
<link rel="shortcut icon" type="image/x-icon" href="~/favicon.ico" />
I have tested in ,
FireFox.
Chrome.
Opera.
Some troubleshoots:
1. Check if your favicon is accessible (correct url) ,goto view source and click on the favicon link
2. Full refresh your browser by Ctrl+F5 every time you make changes.
3. Try searching from SO you may find your related problem here.
Some Links to help you out:
Serving favicon.ico in ASP.NET MVC
Favicon Not Showing
Why is favicon not visible
resolve the url like this href="<%=ResolveUrl("~/favicon.ico")%>"
I have the same issue. My url is as below
http://somesite/someapplication
Below doesnot work
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
I got it to work like below
<link rel="shortcut icon" type="image/x-icon" href="/someapplication/favicon.ico" />
<link rel="shortcut icon" type="image/x-icon" href="~/favicon.ico" />
This worked for me. If anyone is troubleshooting while reading this - I found issues when my favicon.ico was not nested in the root folder. I had mine in the Resources folder and was struggling at that point.
Simply:
/favicon.ico
The leading slash is important.
Check out this great tutorial on favicons and browser support.
#Scripts.Render("~/favicon.ico");
Please try above code at the bottom of your Layout file in MVC
<link rel="shortcut icon" href="#Url.Content("~/images/")favicon.ico" type="image/x-icon"/ >
This works for me in MVC4 application favicon image is placed in the images folder and it will traverse from root directory to images and find favicon.ico bingo!
for me, it didn't work without specifying the MIME in web.config, under <system.webServer><staticContent>
<mimeMap fileExtension=".ico" mimeType="image/ico" />
Related
I'm new to web development but have some experience with C#, so I'm trying my luck with ASP.NET.
I was able to create the base app and so on, however now I want to use my own CSS stylesheet.
I tried using the exact syntax that the base app uses:
<head runat="server">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - SmtteProject</title>
<environment include="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
</environment>
<environment exclude="Development">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute"
crossorigin="anonymous"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"/>
</environment>
<link rel="stylesheet" href="~/css/test.css"/>
<link rel="stylesheet" href="~/css/site.css" />
</head>
Where the test.css is the stylesheet I want to use. It is in the exact same directory as site.css, however I get this error in the console on the page:
GET http://localhost:5000/css/test.css net::ERR_ABORTED 404 (Not Found)
I tried using runat="server" in both the head and in the link, as I saw quite a few answers online with this solution. However, that did not do the trick either.
I tried displaying an image that was in an images directory in the exact same way, but encountered the same issue.
Any help welcome.
It's Cascading Style Sheets, or CSS. Not CCS. I think that this naming confusion is the root of your problem.
Your file is named test.ccs. It should be named test.css, per the HTML snippet you provided.
I just create a .net core 2.0 project on my visual studio and found in _Layout.cshtml few new properties like called- "environment". I worked on MVC5 but there was no such properties. What these propertie does? Is it replacement of Rezor Syntax which i used in MVC5 view? Please provide details with doc for use those properties to get started with those.
_Layout.cshtml:
<environment include="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
</environment>
<environment exclude="Development">
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>
We have 3 Environments; Development, Staging and Production.
This tag helper help us to render what we need in different environments.
the code below means that, if we are in DEVELOPMENT environment, render this css files.
<environment include="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
</environment>
and the code below means that render the content when we are NOT in DEVELOPMENT environment.
<environment exclude="Development">
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>
*note: asp-fallback-href in code above means if can't connect to cdn, go and use minified bootstrap file from server!
also you can write code above like this:
<environment include="Staging, Production">
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>
that means render the content if we are in STAGING or PRODUCTION environments.
The environment tag helper uses the value of IHostingEnvironment.EnvironmentName to include/exclude content in the DOM (Document Object Model) based on the current application environment.
In your snippet, the first two style sheets are included when running your code in a development environment, and the bottom two are excluded when in development environment.
See Microsoft docs on Tag Helper in ASP.NET Core and Environment Tag Helper , which could help more clearly to answer your question.
The Environment Tag Helper conditionally renders its enclosed content based on the current hosting environment.
The include attribute basically means render the code whether you're in Development environment, while it won't be rendered with exclude attribute.
On a shared view (like _layout.cshtml), I'm asking for the root folder in many ways ("/Content/design.css", #Url.Content("~/Content/design.css") ) But I'm always getting the controller name and then the requested url ("localhost:3333/MyControllerName/Content/design.css")
Why?
I'm running my project on IIS express.
This is the problematic line:
<link rel="stylesheet" href="#Url.Content("~/Content/design.css")" />
also tried:
<link rel="stylesheet" href="#Url.Content("/Content/design.css")" />
not sure if you fixed this, I know I'm late, can you try this?
I'm thinking you don't need #Url.Content
<link href="~/Content/design.css" rel="stylesheet" />
I'm getting this error when I start my project
It is being caused by the css and js files in the master page.
<link href="../assets/css/jquery.ui.theme.css" rel="stylesheet" type="text/css" />
When I remove this line the project starts functioning correctly(without the style)
Any ideas
Sp
Since this is ASP.NET, use a tilde ~ to mark the application root:
<link href="~/assets/css/jquery.ui.theme.css" rel="stylesheet" type="text/css" />
I'm working on a web interface in ASP.NET. If it matters, I'm using the XHTML 1.0 Transitional doctype.
This website has a masterpage thing going, and that's where the problem came in. When I used a real absolute path for the CSS link in the header, everything was fine. But then when I tried to switch it to tilde notation, all the styling broke.
Here's a fragment of the original master page, which worked fine:
<head>
<title>Account Information</title>
<link href="/css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
...
</body>
But then we found out that this account thing is going to be an application that doesn't live on the server root, so we had to make changes.
<head>
<title>Account Information</title>
<link runat="server" href="~/css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
...
</body>
Now, those same changes (adding runat="server" and a tilde) worked just FINE everywhere else in the page, but this one didn't. When I looked at the output, it was not resolving the tilde, so the link was actually pointing at "myserver.net/~/css/main.css", which obviously isn't going to work.
Next I tried using ResolveURL, like so:
<link runat="server" href="<% =ResolveURL("~/css/main.css") %>" rel="stylesheet" type="text/css" />
Visual Studio wouldn't even compile that. It didn't even know what ResolveURL meant (as a test, I stuck the same code several other places, including the page title right there next to the link tag, and it worked fine everywhere else).
I did eventually get it to work by giving the link an ID and setting the href in the code-behind:
--Master page--
<link id="StyleLink" runat="server" rel="stylesheet" type="text/css" />
--Masterpage codebehind file--
StyleLink.Attributes.Add("href", ResolveUrl("~/css/main.css"));
But I'm left wondering why I had to spend two hours fighting with this. Why didn't the standard ~ notation work in the first place? I googled around for a while but I couldn't find anything particularly relevant; the closest I could find was a discussion of ~ notation failing when it was in a sub-master page.
This works in the Master Page in front of me right now:
<head runat="server">
<link runat="server" href="~/styles/main.css" rel="stylesheet" type="text/css" />
</head>
For a Page in the root of the application, this translates out to the HTML as this:
<link href="styles/main.css" rel="stylesheet" type="text/css" />
For a Page in a folder off the root, here's what it looks like:
<link href="../styles/main.css" rel="stylesheet" type="text/css" />
(Both pages use that Master, obviously)
Alternative approach
Store the path to the CSS file in the web config, and alter it upon deployment.
You can even use Web Config Transformations to change it automatically based on the build type.
I am guessing that this may be a problem with the scope of the application. In other words when you run <link rel='stylesheet' href='~/css/base.css' id='id' runat='server'> the application may be returning something like this
http://www.mydirectory.com/includes/masterpages/css/base.css
and you want a return something like this
http://www.mydirectory.com/css/base.css
since the ~ gets the application root directory and appends it you may be getting an error on where you master page is if it is not saved in the root directory.
Here's a link to a SO question that I referenced to explain the problem.
slash(/) vs tilde slash (~/) in style sheet path in asp.net
I have no idea why it wouldn't compile other than a possibly unclosed quotation mark in the link tag ie. <link type='text/css" href="..." runat="server" /> notice the single quote in the type vs. the double quote close. I have done that on occasion but I am just guessing here. I checked it on my and dropping in the ~ with a runat server doesn't cause a compile time error for me.
I had links to CSS files in the master page using the following syntax
<link href="~/bm/Styles/Site.css" rel="stylesheet" type="text/css" />
The path resolved correctly in Chrome and Firefox, but not in IE9. The following syntax works fine in all three browsers. Notice the id and runat entries.
<link id="siteCss" runat="server"
href="~/bm/Styles/Site.css" rel="stylesheet" type="text/css" />