Favicon only shows in Homepage ASP.NET MVC - asp.net

I just add this in the head of my _Layout.cshtml.
<head>
<link rel="shortcut icon" type="image/ico" href="~/Images/favicon.ico">
</head>`
the icon is showing but only in homepage, what is the reason for that?

In general, it is a good practice to put all favicon-related files in the root directory of the web site. Some browsers will always check for favicon.ico in the root folder.
<head>
<link rel="shortcut icon" type="image/ico" href="~/favicon.ico">
</head>
Also, take a look at these posts
Is putting your favicon.ico file in a non-root path a bad idea?
Serving favicon.ico in ASP.NET MVC

Rather than moving the favicon.ico file into the root, you can easily add a rewrite rule using the IIS IRL rewrite module, which will make it act like it is in the root directory even though it is where you would rather keep it.
Simply install the rewrite module, and drop this into your root web.config file.
<configuration>
<system.webServer>
<rewrite>
<rule name="Rewrite favicon.ico location from root to physical">
<match url="^favicon\.ico$"/>
<action type="Rewrite" url="images/favicon.ico"/>
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
Of course, you can also specify the actual location for the file in your _Layout.cshtml file for those browsers that will respect the shortcut icon tag.
<head>
<link rel="shortcut icon" type="image/ico" href="#Url.Content("~/Images/favicon.ico")">
</head>

Related

Asp.net url rewrite for image file extensions

I'm replacing all the images in our website with .webp
Basically we had .jpeg images and now replaced with .webp images.
But we're seeing many images in google especially.
And to prevent 404 errors I'm trying to find a way to redirect to webp images.
We're using asp.net rewrite in web.config file.
But couldn't figure out what I'm missing.
sample old image link: https://www.example.com/SiteThumbs/g/google.com.jpeg
and the new image link: https://www.example.com/SiteThumbs/g/google.com.webp
Just the extension is different now.
And the rule in web.config file:
<rule name="Old Images" stopProcessing="true">
<match url="^SiteThumbs/(.*).jpeg" ignoreCase="true" />
<action type="Rewrite" url="SiteThumbs/{R:1}.webp" appendQueryString="true" />
</rule>
Could anyone advice please.
This rule is working actually.
It was Cloudflare caching the images so never hits the server.

React Basic Application works locally, but in Azure it does not load .CSS, .Ico, .JSON

I have a single web app which works locally and when deployed to Azure with a release pipeline all files seem to be deployed correctly
When I go to the website, to the .css url, the file is not loaded in the browser and its a 404.
The index.html is very simple:
<!doctype html><html lang="en" dir="ltr"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><meta name="theme-color" content="#000000"><link rel="manifest" href="/manifest.json"><link rel="icon" type="image/png" sizes="32x32" href="/favicon.png"><link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700" rel="stylesheet" async><link async rel="stylesheet" href="/css/ionicons.min.css"><link rel="stylesheet" href="https://unpkg.com/react-instantsearch-theme-algolia#4.0.0/style.min.css"><link rel="stylesheet" href="https://unpkg.com/leaflet#1.2.0/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" crossorigin="" async/><title>Isomorphic</title><link href="/static/css/main.48941814.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script type="text/javascript" src="/static/js/main.b47e17ce.js"></script></body></html>
And as shown in the first screnshot, the file is there:
The only thing I can think of is that something is wrong with the web.config and it wont allow to serve .css or other types of files?:
<?xml version="1.0" encoding="utf-8"?>
<!--
This configuration file is required if iisnode is used to run node processes behind
IIS or IIS Express. For more information, visit:
https://github.com/tjanczuk/iisnode/blob/master/src/samples/configuration/web.config
-->
<configuration>
<system.webServer>
<!-- Visit http://blogs.msdn.com/b/windowsazure/archive/2013/11/14/introduction-to-websockets-on-windows-azure-web-sites.aspx for more information on WebSocket support -->
<webSocket enabled="false" />
<handlers>
<!-- Indicates that the server.js file is a node.js site to be handled by the iisnode module -->
<add name="iisnode" path="server.js" verb="*" modules="iisnode"/>
</handlers>
<rewrite>
<rules>
<!-- Do not interfere with requests for node-inspector debugging -->
<rule name="NodeInspector" patternSyntax="ECMAScript" stopProcessing="true">
<match url="^server.js\/debug[\/]?" />
</rule>
<!-- First we consider whether the incoming URL matches a physical file in the /public folder -->
<rule name="StaticContent">
<action type="Rewrite" url="public{REQUEST_URI}"/>
</rule>
<!-- All other URLs are mapped to the node.js site entry point -->
<rule name="DynamicContent">
<conditions>
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="True"/>
</conditions>
<action type="Rewrite" url="server.js"/>
</rule>
</rules>
</rewrite>
<!-- 'bin' directory has no special meaning in node.js and apps can be placed in it -->
<security>
<requestFiltering>
<hiddenSegments>
<remove segment="bin"/>
</hiddenSegments>
</requestFiltering>
</security>
<!-- Make sure error responses are left untouched -->
<httpErrors existingResponse="PassThrough" />
<!--
You can control how Node is hosted within IIS using the following options:
* watchedFiles: semi-colon separated list of files that will be watched for changes to restart the server
* node_env: will be propagated to node as NODE_ENV environment variable
* debuggingEnabled - controls whether the built-in debugger is enabled
See https://github.com/tjanczuk/iisnode/blob/master/src/samples/configuration/web.config for a full list of options
-->
<!--<iisnode watchedFiles="web.config;*.js"/>-->
</system.webServer>
</configuration>
I would look at the StaticContent rule, it seems to be rewriting all the requests to the public folder and from the console image you posted, it seems that your static content isn't located under public.
Hope it helps!

IIS URL Rewrite module: Url.Content() does not resolve CSS/Image path properly

I have a standard MVC3 project with layout page etc. Now I need to make pretty URLs. I started playing with URL rewrite module. I'm trying to translate http://localhost/Photographer/Pablointo http://localhost/category-about.aspx?displayName=Pablo, and here is my rewrite rule (very simple!):
<system.webServer>
<rewrite>
<rules>
<rule name="about" patternSyntax="Wildcard">
<conditions>
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add matchType="IsDirectory" negate="true" />
<add input="{REQUEST_URI}" pattern="\.png|\.js|\.css|\.jpg" negate="true" />
</conditions>
<match url="photographer/*" />
<action type="Rewrite" url="category-about.aspx?displayName={R:1}" logRewrittenUrl="true" />
</rule>
</rules>
</rewrite>
</system.webServer>
all conditions you see I added after googling trying to solve the issue - they did not help though.
I found this page: http://www.iis.net/learn/extensions/url-rewrite-module/url-rewriting-for-aspnet-web-forms - which says that ~ operator is properly treated by the server when rewriting rules are applied. But that's clearly does not happen in my case - please see the image attached:
What is the solution to my problem? How should I reference CSS/JS files? I'm using MVC3 on IIS 7.5.
UPDATE:
image is not very clear - but it shows that my MasterLayout page has
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
but it's resolved as
http://localhost/Photographer/Content/Site.css - and it gives 404
instead of
http://localhost/Content/Site.css - which gives 200
when I request this URL: http://localhost/Photographer/Pablo. Logic works fine - my controller gets the request and renders the page - but it's CSS and images are missing (because they have wrong root folder prepended).
Try using Request.ApplicationPath. Something like this should work:
<link href="#(Request.ApplicationPath + "Content/Site.css")" rel="stylesheet" type="text/css" />
You said the line:
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" />
is resolved as
"http:// localhost/Photographer/Content/Site.css"
, which is absolutely correct this is how it would be resolved. Where does your css lie, is the path for the image in css correct?
Rather than this
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
Try this without the tilde (~)
<link href="#Url.Content("/Content/Site.css")" rel="stylesheet" type="text/css" />
This should resolve to your desired http://localhost/Content/Site.css

How to fix URL Rewriting for links inside CSS files with IIS7

I'm trying to set up a proxy server for my friends back at home. I'm currently following the tutorial on the web site (http://blogs.iis.net/carlosag/archive/2010/04/01/setting-up-a-reverse-proxy-using-iis-url-rewrite-and-arr.aspx) but I've come across a strange problem.
I've tried making /pandora redirect to www.pandora.com but the links inside the CSS files are not changing. Furthermore they are still linked to the localhost/img/.. path. They should be redirected to the localhost/pandora/img/.. path.
sniplet from the first webpage
<link rel="shortcut icon" href="/pandora/favicon.ico" type="image/x-icon" />
<link rel="icon" type="image/ico" href="/pandora/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/compiled.css?v=95845013">
<link id="valanceStyle" rel="stylesheet" type="text/css" href="/pandora/static/valances/pandora/default/design.css"/>
Can you guys help me fix this problem?
It is possible to do this with a outbound rewrite rule in combination with ARR. The following rule should do it:
<system.webServer>
<rewrite>
<outboundRules>
<rule name="Rewrite image URLs in CSS response" preCondition="IsCSS">
<match pattern="localhost/img/" />
<action type="Rewrite" value="localhost/pandora/img/" />
</rule>
<preConditions>
<preCondition name="IsCSS">
<add input="{RESPONSE_CONTENT_TYPE}" pattern="text/css" />
</preCondition>
</preConditions>
</outboundRules>
</rewrite>
</system.webServer>
You should of course replace localhost with the proper domain names. If you are rewriting from a different domain name then the match tag should contain the domain name you want to replace and the action tag should contain the domain name you want it to replace.
As CSS is not HTML you can not use tag filtering feature of the URL rewrite module. So it can only do regular expression matching against the whole content of the CSS file which can potentially be CPU intensive on large CSS files. If you know how many URL's need to be replaced you can add the occurrences="x" attribute to the <match> tag to limit the number of matches the URL rewrite module has to look for. Also try moving the CSS rules to the top of the CSS file. E.g.:
<action type="Rewrite" value="localhost/pandora/img/" occurrences="3" />
You can also enable user mode caching in IIS and add the attribute rewriteBeforeCache="yes" to the <outboundRules> tag to let IIS cache the rewritten content. E.g.:
<outboundRules rewriteBeforeCache="yes">
More useful info and tips about outbound rewrite rules can be found in this blog post.

Resource interpreted as Stylesheet but transferred with MIME type text/html in ASP.NET IIS

i am having a login page when executed the page is stripped out of css.
I found out this message from from chrome debugger. I am using asp.net 2008.
Any ideas?
<head id="Head1" runat="server">
<title>CalibPro</title>
<link href="css/Login.css" rel="stylesheet" type="text/css" />
<link href="css/Common.css" rel="stylesheet" type="text/css" />
</head>
edited as per #robx advice.
Seems to me like the problem is in your IIS configuration. it might be configured to deliver .css files with text/html MIME type.
Try going to the MIME types configuration on the web server and see if you can spot anything there.
The correct MIME type for .css files is text/css.
You can also have a look on the HTTP header parameters with some HTTP sniffer such as fiddler.
Updating: The accepted answer should be the one pointed by #brett-pennings!
Just providing static contents, the error vanished automatically.
Make sure you enable "Static Content" in IIS Windows Features.
This is a problem when you are using rewrite url in IIS (in my case it was that), you need to add this entry in your web.config file of your web before the entry of rewrite, something like this:
<rule name="CSS" stopProcessing="true">
<match url=".css" />
<conditions logicalGrouping="MatchAll" trackAllCaptures="false">
<add input="{REQUEST_FILENAME}" matchType="IsFile" />
</conditions>
<action type="None" />
</rule>
<rule name="mod_write" stopProcessing="true">
<match url="^(.*)$" ignoreCase="true" />
<conditions logicalGrouping="MatchAll" trackAllCaptures="false">
<add input="%(REQUES_FILENAME)" matchType="IsDirectory" negate="true" />
<add input="%(REQUES_FILENAME)" matchType="IsFile" negate="true" />
</conditions>
<action type="Rewrite" url="index.php?url={R:1}" appendQueryString="false" />
</rule>
Oh dear lord! This was one of those errors that seems to come from nowhere... I was scratching my head for almost 1 hour trying to identify what was causing just 1 specific .css file to show a message very similar in Chrome's console window:
Resource interpreted as Stylesheet but transferred with MIME type text/plain
You see it's text/plain instead of text/html.
The file in question was this one:
https://raw.github.com/LPology/Bootstrap-IE7Fix/master/css/bootstrap-ie7fix.css
What I did in Visual Studio 2013 Ultimate was:
Right-clicked the project's Content folder and selected Add Style Sheet.
Renamed the file to bootstrap-ie7fix.css
Copied the full content of the above .css file
Pasted the entire content inside Visual Studio and saved the file
Referenced this new file in my Razor view in an ASP.NET MVC app in the exactly same old default fashioned accepted way:
<link rel="stylesheet" type="text/css" href="/../itvizionlogs/widgets/Content/bootstrap-ie7fix.css">
For any crazy/unknown reason that file would show nothing in Chrome, Firefox, Internet Explorer. What the hell is going on with this file since all other ones in the exact same /Content directory are loading just fine?
My last try was this:
Navigated to the original file in the browser:
https://raw.github.com/LPology/Bootstrap-IE7Fix/master/css/bootstrap-ie7fix.css
Clicked Chrome's File => Save Page As... menu option and overwrote the existing file in my /Content dir.
Tried reloading my app page and voila... this mysterious .css file finally got loaded.
I guess Visual Studio scrambled the encoding of that file initially or something like that!
I don't know whether you developed your project in the framework.
i had this mistakes ,when i developed in the ThinkPHP Framework.
And the reason is that the frameowrk has some rules about the path of the css file to be include so that if you use the framework ,you can check out whether the framework has its rules for the path of outside css file or javascript file.
I had this using webpack-dev-server, it was because of a firewall issue blocking internet access. I initially didn't think it was internet related because I thought I bundled all of my css without depending on external sources. But after digging, I found another css file that was trying to load external fonts from fonts.gstatic.com, this along with my firewall, created my issue.

Resources