CSS images not showing in ASP.NET MVC - css

In my ASP.NET MVC application, I am referencing background images via CSS. When I run it in the dev environment, they show up fine. But when I deploy it (using IIS 7.5) the images do not load at all. I have tried every combination of relative paths and background/background-image CSS tags, but nothing works. Here is my file structure and CSS:
File structrue:
Content
CSS file
images
image.png
CSS:
background-image: url(/images/bsb_header2.png);
I have also tried ../images/bsb_header2.png and ../../images/bsb_header2.png to no avail.
What is really strange is when I try to go to the image directly (i.e. www.website.com/images/image.png), I am redirected to a login page. Perhaps there is some access or security setting I'm missing? I haven't done anything with login controls yet (the default account view and controller are in my project but I haven't done anything with them yet) and I can view all my other pages just fine.
Update: I FINALLY figured it out. The image file in question was encrypted. Right click the image file and navigate to properties, click the advanced button on the general tab, uncheck "Encrypt contents to secure data", click OK, OK.
The tip off finally came when I noticed the file name was green in Windows Explorer. I see green file names all the time with no problems so I didn't think anything of it. Then I noticed it was the only green file in the entire web app folder. Put two and two together and it worked instantly. Thanks everyone for your help.

Please Add two users
IUSR,
IIS_IUSRS
to the publish folder and assign permission for them to read & execute

I FINALLY figured it out. The image file in question was encrypted. Right click the image file -> properties -> advanced button on general tab -> uncheck "Encrypt contents to secure data" -> OK -> OK.
The tip off finally came when I noticed the file name was green in windows explorer. I see green file names all the time with no problems so I didn't think anything of it. Then I noticed it was the only green file in the entire web app folder. Put 2 and 2 together and it worked instantly. Thanks everyone for your help.

Is it possible that IIS 7.5 was not installed correctly?
If you go to Turn Windows Features on or off - under:
Internet Information Services /
World Wide Web Services /
Common Http Features
there is a Static Content checkbox
is it checked?
see this link for screen-shot.

in css set "display: block"
.searchbtn
{
margin-top:-15px;
background-image:url(../images/icons/search.png);
background-repeat:no-repeat;
width:18px;
height:18px;
display: block;
}

The URL should be relative!
background-image: url(images/bsb_header2.png)

From your description, it appears as if the Request for the .png is getting routed to the ASP.NET/MVC engine instead of being served up by IIS.
Is it possible that the routing rules in the Global.asax are picking .png files? (I know this doesn't explain why it works in your dev environment).
Does it work if you add a ignoreRoute for .png files at the beginning of your route list in Global.asax? Something like below...
routes.IgnoreRoute("{resource}.png");

Had the same issue and finally found a solution.
In IIS open "Authorization Rules".
If there is nothing there, click "Add Allow Rule"
Choose "All Users" and hit OK

Related

.ASPX pages markups are opening in web browser

When I double click on .aspx pages in my web application project in VS2010, instead of showing the mark up in the ide the .aspx pages are opening in the web browser as shown below. The same is happening when I run my application it opens all the .aspx pages in the web browser along the application url i.e., http://localhost123456/default.aspx. I have to close all the other pages except the http://localhost123456/default.aspx to run/ test my application. Not sure what would cause this to happen. I am not able to find any solutions so far, any help is appreciated. I used the option View Markup (Rightclick on aspx page -> view Markup) to see the markup for now.
Update
As per Mike's answer I checked the options under Open with... and I do have a Internet Explorer (Default) set as shown in the following image. Not sure how did it got there.
Deleting the Internet Explorer (Default) option might be cumbersome if I have lot of .aspx pages , if there is a way to remove this option at once for all .aspx pages rather than right clicking on each and every .aspx and remove it that would be great.
As per #JB King suggestion I did checked the file properties and all the .aspx files are set with Opens with: Microsoft Visual Studio option as shown it the image below.
Right-click any .aspx file in the project, select Open With...
In the screen that pops up, select Web Form Editor, then click the Set as Default button.
Not sure how you got Internet Explorer as an option here, but if it is there, you can just delete it. It's not applicable for loading the aspx from disk. Rather, to see the rendered page in IE, you'd do View in Browser or Browse With... (in which you can set your default browser, as well).
Your address bar shows you're loading files directly from disk. This won't work. ASP.NET is not lilke static HTML. ASP.NET applications must be run from within a webserver. Install IIS and ensure ASP.NET is installed and configured, or use the Debugging Webserver (IIS Express) in Visual Studio.
If you look at the properties of the file, there should be a line of Opens with: that is where you want to have Visual Studio rather than Internet Explorer as the issue is with which programs are mapped to what file extension. Microsoft instructions if you want those as specific steps to do.

Finding the file path (server directory) from using Firebug

I am a super beginner and am learning as I go, so please be patient with me!
So here goes:
I am trying to make some edits on a Magento theme (removing buttons - Twitter, to be exact) and am using FireBug (Firefox Add-On) to locate the directory to remove the button.
Firebug will allow me to find the CSS directory in order to change certain things but does not show the file to make edits in to remove the button. From other similar questions, I have gathered that it is not possible to find server directory paths from apps like Firebug (or is it?); however, is there any advice or easier method to go about finding the location of the button?
Any information helps, thanks in advance.
Indeed, you cannot use firebug to find in which file that button is inserted. You have to go to magento admin, system- > configuration -> developer. Select your website in view top left. then in template path hints select yes. Now go into frontend and refresh. You will see a lot of red lines with the path to the folders where everything is. Do not do this in production as it is a negative experience for customers.
try saving the file locally by doing ctrl + s. That may give you the css file to make changes.
Check this step by step instruction:
Step 1: System >> Configuration >> Developer
your current configuration scope is set to “Default Config.” You cannot setup Magento Template Path Hints globally. You’ll need to set the Configuration Scope to a website or store configuration. When you do, you’ll see a screen like this:
Change Template Path Hints no to yes and save the configuration. Reload your front page.
For more info

401 unauthorized error access CSS files MVC

First things first, yes I am fully aware this has been addressed here before, however none of the solutions seem to resolve my issue. My problem is simply that I have created a new web project and everything works fine with the default code template that VS2013 has provided, the problem I am currently runing into is adding my own CSS files. This is the process I went through to add them:
added CSS folder under the already existing Content directory
Linked to CSS files in the header CSHTML (I can be sure it is linked properly as it is not a 404 error
but when i run the project i get: Status Code:401 Unauthorized (pulled form the network explorer in chrome dev tools), nothing more. I have tried everything from modifying my config file to setting WindowsAuthentication to true and even moving NTLM to the top, to going into IIS and giving everyone access to every possible function to the CSS directory, been at this for an hour and I'm simply lost, any ideas?
Edit: if it helps at all this is the erro i get when i navigate to one of the CSS files:
I found the issue and I feel incredibly stupid about it, as it turns out all of my css files had encryption set on, i simply had to turn it off: right-click
*.css file > Properties (General tab) > Advanced button > Encrypt contents to secure data checkbox.
Works like a dream. If anyone ever purchases a template form ThemeForest, be wary of that.

AdBlock blocking CSS and Images on .NET 4.5 web site

I created a new web site using the default web-forms web site template that comes with Visual Studio 2012. Just went to File--> New Website --> C# --> Asp.Net Web Site, and let it create it's basic template.
Then I hit F5 to debug and it runs fine and I get that default welcome page with the aqua green block, etc... but when I add it to IIS and browse to it using localhost/WebsiteName in Chrome, the AdBlock plugin blocks all of the CSS and Images so all I see is black-and white un-styled text. When I disable AdBlock, the styling and images return and it looks normal just like it did when debugging.
I have a feeling it has something to do with the Bundle Referencing, but I'm not sure what's going on.
What specifically is AdBlock blocking?
Why isn't it blocking it when debugging through Visual Studio, only when browsed to it via localhost/WebsiteName?
What can I do to prevent users with AdBlock from having this content blocked when it is clearly not advertising?
I must assume you have a matching rule in your Adblock config. If you Go to Adblock - Options and turn on "I'm an advanced user, show me advanced options." you should then be able to reload your page and go to "Show the resource list" from the Adblock button. All items on the page will be displayed, the blocked items will be in red and the matching filter shown.
Good luck.
Thanks for the tip. It turns out that AdBlock blocks anything matching /advertising/* and the actual name of my app is "Advertising" because it will be an advertiser management system for my organization. Looks like I need to find a new name for that folder. When debugging is only went to localhost:5538/ but localhost/advertising/default.aspx got blocked because of the word "advertising" in the path.

not getting images displayed after uploading asp.net application

hai,
i am getting the images in my localhost.But when i am uploading my project the images are not displayed.
I am saving my images in "~/App_Themes/darkOrange/images/button_line.jpg".
Is their is another method for giving image path in ASP.Net.
please help.
thank you.
Yes - check what is actually getting rendered out in the "src" attribute for the images. See if you can physically get to that file, if you cant, means the webpage cant. Have you confirmed the images have been deployed to the web server (not local - the server you uploaded to).
If not, make sure the "Build Action" for the images are set to "Content" in the properties window in Solution Explorer.
I faced a similar problem once. But, that was just a static website. Where the images were displayed in localhost but when I ftp files to the server, the images wouldn't show.
Later, I found out that it was becasue of the different case. For e.g - The image file name was "Image.JPG" and I had used "Image.jpg" in my code
Just check if this helps.

Resources