I have this code in an Index.cshtml file:
#{ViewBag.Title = "Home";}
<link href="Home.css" rel="stylesheet" type="text/css"/>
<img id="logo" src="~/Content/Images/Logo.png" />
This file is a view in my ASP.NET MVC4 application.
When I run the web application, I can see that the source code adds the appropriate HTML around this, and also adds a reference to the 'Content\Site.css' file.
However, neither the Site.css file nor my own Home.css CSS file appear to be used when running the application. First of all, any edits I make to Site.css aren't reflected when I view source when running the application, which is weird. I have saved everything and built the project before running it and checking out the source code through my browser.
Second of all, the CSS link to Home.css (which is in the same folder as my view) does not appear to be used. The HTML editor doesn't have a problem with the file, and so indicates that the path is valid - but when I click on Home.css in my the source code editor on my browser, I get a 404 error, saying that the file doesn't exist.
Any idea on what I am doing wrong here?
The actual image I am using here loads correctly.
the CSS link to Home.css (which is in the same folder
as my view) does not appear to be used.
The Views folder is restricted direct access to from the clients. So you should not be putting any CSS, javascript or images files inside it. They should reside in your ~/Content folder (or some other folder which is accessible from the clients). And then reference it like this:
<link href="~/Content/Home.css" rel="stylesheet" type="text/css"/>
As far as your first problem about ~/Content/Site.css is concerned, the stylesheet might be cached by the browser. Try clearing the cache. If you are running your application in Release mode and enabled Bundles, ASP.NET MVC 4 will automatically emit a cache response header so that the static resources included in the bundle get cached in the browser.
you also could use #url.content() helper method to convert your relative path to absolute. It's extremely useful when you will implementing website with multiple areas and also it's the common style to set path to the content in MVC so it's better does it this way
css belongs in the head - i can't stand .net
It also needs to NOT have the closing /> at the end of the tag - it messes things up. XHTML proper, but not everyone understands it. Unclose the link tag and try...
Use ~/ before your file statement for example:
<img src="~/images/team-image3.jpg" class="img-responsive" alt="">
instead of
<img src="images/team-image3.jpg" class="img-responsive" alt=""> etc...
Related
So I recently started learning jQuery mobile framework and I've been practicing from my mobile phone with a code editor and everything is working fine.
I have added the jQuery libraries to my index.html page head like so:
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
If I use the "multi-page" approach inside my index file everything seems to work perfectly but when I try to create an external file like: about.html and try to link to it, the framework would give me an "error loading page" message. The same happens when I try to link images, they won't show up.
All files are inside the same root folder so there's no need for slashes. How could I fix this and keep practicing with relative path files? I don't like having many pages inside a single document.
You can very well have multiple html, multiple js files as controllers...
In your index.html you have the below div:
<div data-role="page" id="pageIndex"></div>
Load all the respective js files which acts as controllers.
In device ready or in subsequent controllers use change page:
$.mobile.changePage("login.html");
Each individual html page will have page id:
<div id="pageLogin" data-role="page">
And its respective controller will have pageshow event to load the correct html on change page.
$(document).on("pageshow", "#pageLogin", function() { // code for page login };
I am using ASP.NET MVC3. Adding a web project, it gives me all the files required for jquery to run.
It gives me Content Folder and some folders for storing css and Images.
It also gives me Scripts folder, where I can have my .js files.
Whenever I want to download some custom JQUERY UI controls, It gives me a zip file which has different folders and scripts.
How do I map them so that, I am not keeping too many jquery files in my project.
For example, I want to use DatePicker Jquery UI, I go to jquery site and download them and it gives me a ZIP File which has various folders.
There is folder called development again it has got all the files.
If I wan to go for timepicker, I think there is only a CSS difference between timepicker and datepicker.
Timepicker needs slider. So I am not sure do i need to reference jqueryslider.js in my Layouts file.
Please shed some light on this mapping of downloaded files and already existing files in MVc3?
if have to include new Jquery UI Control, What should be the changes, is it just in .js file, images folder, or css folder.
I personally think its only css and images, please correct me.
Thank you.
All you need to do is add the content in the js folder to the scripts in your Scripts folder and copy everything from the css\\ folder into the Content folder of your MVC application.
Once you have done this, you simply add the following references to the _Layout file in your Shared folder (just modify to match your version of JQuery and the correct version of your JQuery-UI download):
<link href="#Url.Content("~/Content/jquery-ui-1.8.18.custom.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui-1.8.18.custom.min.js")" type="text/javascript"></script>
Just remember to keep the reference to your JQuery library (jquery-1.7.1.min.js in the example above) before the reference to the JQueryUI scripts.
-- Kindly mark as the answer if this has been helpful
i have hosted my application on IIS 6.0 the view that i wanted to browse is getting fetched in the browser but the css and scripts are not being rendered .
<link href="<%= Url.Content("~/Content/Tree.css")%>" rel="stylesheet" type="text/css" />
in this way i have given the path.
The link tag is properly defined. You are using the Url.Content method with a relative path from the site root which will correctly take into account the virtual directory which could be added when hosting under IIS.
I would recommend you looking at FireBug to see why the path is not found and what response does the server send when the CSS is fetched. Is the file missing? Or is there some other status code returned?
When inside a View, within MVC, and you have your JavaScript, I tried to move it to a JavaScript file in the same directory, and it reports it can not file the javascript file
As an example I user NerdDinner and the DinnerForm.aspx, created a JavaScript file in the same directory as the DinnerForm.aspx called DinnerForm.js and referenced it in the aspx file, as below:
Here is the issue, I need to keep my JavaScript file near if not in the same directory in the project as DinnerForm.aspx, how do I go about doing this?
I don't want to place the full path, eg: "~\views\dinners\dinnerform.js" as this is just a work around, and will cause issues later
Any ideas?
You can't have the JavaScript files in the Views folder as it does not actually exist to the browser. If you have a look at the Web.config file in the Views folder, you'll see that it is set to the HttpNotFoundHandler handler. That means it returns 404 for all requests to its folder.
Why not put them in the Scripts folder? You could always have sub folder under it.
E.g. /Scripts/Dinner/dinnerform.js
JavaScript files by convention should be placed in project's Scripts folder and could be linked as
<script src="<%= Url.Content("~/Scripts/jquery-1.3.2.js") %>"
In order to dramatically reduce the number of HTTP requests on my ASP.NET MVC website, I am programmatically merging the files.
Essentially, I have an MVC URL http://localhost/Optimisation/JavaScript/ that calls my controller. The controller reads the javascript files in a certain order, merges them into a single output and renders it on a view.
This works fine.
I am implementing the same concept for the CSS now, using http://localhost/Optimisation/CSS/ - this merges a number of CSS files in a particular order and renders it onto the view.
This works in internet explorer, but in FireFox the styles are all absent. When I "inspect" the CSS file using FireBug it says that the file is empty. The same technique works perfectly in Internet Explorer, so the code behind is working - and if I browse to http://localhost/Optimisation/CSS/ using FireFox, it shows me the raw CSS that I've merged.
I'm referencing the optimised CSS like this:
<link href="http://localhost/Optimisation/CSS/" type="text/css" rel="Stylesheet" />
Make sure the server is sending it with a content-type of text/css.
I think Firefox will put a warning in the error console if it's not (or you can just look at the headers with your tool of choice).