I started to learn mvc, something weird happens, I have index.cshtml and inside of it I have:
<head>
...
<link href="#Url.Content("~/Content/Index.css")" rel="stylesheet" type="text/css" />
</head>
where Index.css is empty file, even that this css file is empty the page gets style, and if I comments the line like:
#*<link href="#Url.Content("~/Content/Index.css")" rel="stylesheet" type="text/css" />*#
then there is no style to the page
Probably you've your Index.css stored in some different location, it could be not visible in Solution Explorer. Try switching to Folder View and search for that css file.
Also it might be stored in bin/obj folder. In that case you can try git clean -fxd.
Probably some stylesheets or bundles are referenced in the _Layout.cshtml.
The _Layout.cshtml is per default the layout for all views so the styles and scripts referenced in it will effect your index.cshtml as well.
Related
For a reason or another, I really could not set up the FullCalendar.io for my ASP.Net Core project Razor Page. The documentation is also pretty poor imho so I will highly appreciate any tips on what I should do.
Firstly, I created the CalendarController.cs. The View that should show the calendar at this point is Index and I kept the controller method empty, like this:
public ActionResult Index()
{
return View();
}
The Index.cshtml is taken from here: https://fullcalendar.io/docs/initialize-globals
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<link href='fullcalendar/core/main.css' rel='stylesheet' />
<link href='fullcalendar/daygrid/main.css' rel='stylesheet' />
<script src='fullcalendar/core/main.js'></script>
<script src='fullcalendar/daygrid/main.js'></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'dayGrid' ]
});
calendar.render();
});
</script>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
If I run my project and go to Calendar/Index, the page is blank. What step did I miss? On the getting started page, they state that a package has to be installed. The way I did was Nu-Get Package Manager -> Install Jquery.FullCalendar - is this the wrong way? I tried running this npm install --save #fullcalendar/core #fullcalendar/daygrid in the Package Manager Console but it didn't work out.
Any help regarding this is highly welcomed, as I said. Sorry for posting such a thing with all the documentation out there! I just couldn't figure it out coming from them.
EDIT: I also get the following warnings in the console:
C:/Users/user/source/repos/Intersection/Intersection/Views/Calendar/fullcalendar/core/main.js' not found. and 'C:/Users/user/source/repos/Intersection/Intersection/Views/Calendar/fullcalendar/daygrid/main.js' not found.
I think your problem is here:
<link href='fullcalendar/core/main.css' rel='stylesheet' />
<link href='fullcalendar/daygrid/main.css' rel='stylesheet' />
<script src='fullcalendar/core/main.js'></script>
<script src='fullcalendar/daygrid/main.js'></script>
I dont know wheres located your view, but in this instruction you are telling to look for the scripts in the same level as you are, which probably it is wrong; because you will have on the wwwroot folder, so something like should work, thats why it is telling you: "Couldnt file that file" , becasue theres no file in that location:
<link href='~/fullcalendar/core/main.css' rel='stylesheet' />
<link href='/wwwroot/yourPaht/fullcalendar/daygrid/main.css' rel='stylesheet' />
<script src='~/wwwroot/yourPath/fullcalendar/core/main.js'></script>
<script src='/fullcalendar/daygrid/main.js'></script>
Try that 4 ways and let us know!!
Where did you put the JavaScript and CSS files for fullcalendar? Seems like it's looking for them underneath the views folder here:
/Views/Calendar/fullcalendar/daygrid/main.js
I'm guessing they are actually installed at the root of your project or under a /content or /scripts folder or something, so you'll need to update the script and link tags for your js and css files to point to the right place.
maybe you can try to download libary
put js file and css file to ~/content or ~/script
I started a new "Basic" project in MVC 4. When it came to styling, my css file in the Content folder is not being picked up.
I have included the link href etc in the _layout.cshtml file and still nothing is happening.
When I move the css file into say the Controllers folder and change the path in my _layout.cshtml file, the styling is applied.
Has anyone else had this problem?
I have tried the following in the _Layout.cshtml file:
<link href="#Url.Content("~/Content/Main.css")" rel="stylesheet" type="text/css" />
<link href="../../Content/Main.css" rel="stylesheet" type="text/css" />
in the CSS file:
body{ background-color:Blue; }
Thanks
You need to define base href on _Layout.cshtml somthing like this
<base href="YoursiteDomain" />
So all your static content (i.e. css,images and js which are in content folder) can be rnder with this base href.
Note : You have to place it in the top of head section before defining css or other static contents.
if this is not works then definitely this is the iis problem.
You can try then via switching application pool in iis from integrated to classic mode.
Hope this will help you out.
<link href="#Url.Content("~/Content/Main.css")" rel="stylesheet" />
This should work fine assuming that you have a css file called Main.css in your Content folder which is in the root.
The one which Visual studio (2012) create is called Site.css, not Main.css. So double check that the name of your css file match with the path you provide in the layout page.
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" />
I have a page that generates a printable table. I need to show this page without my surrounding _Layout page, for printer-friendliness.
How would I go about doing this?
Assuming you use razor view engine (you mentioned layout, not master page)
#{
Layout = null;
}
Well actually you should use razor view engine but anyways, idea is simple. Do not specify (remove) master page file reference in your aspx view and remove all ContentPlaceHolders, write all content directly in page. Or there's another way if you don't wish to remove them for some reason. Make PrintMaster.master master page which will contain nothing but ContentPlaceHolders.
While creating a new view, you can uncheck the use layout checkbox.
This will create you a view with layout as null.
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Test</title>
</head>
<body>
<div>
</div>
</body>
</html>
When you create the view it allows you to change the Master Page. If you unmark the checkbox, the view comes with no Master Page and you can modify the whole page.
If you need to support displaying results on a page as well as having a printable view, you could create a second view (named PrintView for example) that does not use a page layout and call return View("PrintView"); from your controller.
A standard print style action can be done in several ways.
1. use a different view with a print button that sets the layout to null assuming you can map to razor.
To do this with CSS - you will want a separate css file that will be loaded on print and will hide your masterpage items. See the various articles on keywords
css media print
for example:
http://webdesign.about.com/cs/css/a/aa042103a.htm
This uses
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
with the key here being media="print" which will use that css during print only.
I have an APS.net app (C#) with several pages that use the same MasterPage. In that page, I have included a couple stylesheets like so:
<head runat="server">
<link href="/apps/_lib/ui/styles1.css" type="text/css" rel="stylesheet" />
<link href="/apps/_lib/ui/styles2.css" type="text/css" rel="stylesheet" />
</head>
These styles apply correctly to all content that is in the actual .master file (page), but are not applied to any pages that use the Master page (for instance default.aspx uses that master page and has a Content placeholder in it).
If I add these lines in each individual page:
<link href="/apps/_lib/ui/styles1.css" type="text/css" rel="stylesheet" />
<link href="/apps/_lib/ui/styles2.css" type="text/css" rel="stylesheet" />
Then the styles show up as expected... but it was my hope that I could include them in the master page so that I didn't need to include these references in each subsequent page too.
Because these files are not located physically in the same project (they are shared between several apps), i cannot just include them as an ASP.net theme that would be applied to all pages.
Update
In order to rule out the file locations problem, I used the absolute URL for these stylesheets...
<link href="https://myserver/apps/_lib/ui/styles1.css" type="text/css" rel="stylesheet" />
<link href="https://myserver/apps/_lib/ui/styles2.css" type="text/css" rel="stylesheet" />
That way, no matter where it is read from, the file can be located. This still exhibits the same behavior.
To me, it looks like the masterPage is rendered with the CSS styles (because they're in the same file) and then the child/calling page is rendered without the CSS styles (because they aren't in that file, they're in the masterPage) and then those two files are combined together (as opposed to combining them together first and THEN rendering the style elements for the combined pages). Adding to this belief was my previous example of adding the include for the CSS file in the calling page itself, which will cause it to display the CSS correctly.
You can view the source of this file, and in the head section, you can see the CSS styles linked correctly, but they aren't applied to any elements from the calling page while they are applied to all elements in the masterPage.
Is the content page in a different folder that the master? If so, you'll have to get the application relative path to the css files using ResolveUrl in the master page:
<link href='<%= ResolveUrl("~/apps/_lib/ui/styles1.css") %>' type="text/css" rel="stylesheet" />
Update: If this doesn't work, then you might have HTML or CSS errors like Lance suggested. Try using the HTML and CSS validators at w3schools.com. If it still doesn't work after fixing any errors, double check your CSS selectors with the rendered HTML as Steve suggested. ASP.Net's generated IDs have bitten me more than once.
What about this?
<link runat="server" href="~/apps/_lib/ui/styles1.css" type="text/css" rel="stylesheet" />
<link runat="server" href="~/apps/_lib/ui/styles2.css" type="text/css" rel="stylesheet" />
What jrummell posted is what I use on my sites to ensure that the links work if I were to move my pages around.
As far as rendering. The rendering is done on the client machine's browser. To the browser it has no idea the html is generated from multiple documents.
I would make sure your HTML and CSS are correct.
On a side note i have noticed the last week or so that VS2008 keeps messing my css stylesheets up, doing really random things like moving text around. However, I think this might just be something on my machine. Just something to check.
Here is some sample code I checked this just to make sure and this works.
Head of Master Page
<head runat="server">
<link rel="stylesheet" type="text/css" href="../css/style.css" />
</head>
Content Place Holder
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<div class="something">
Lance
</div>
</asp:Content>
Css in StyleSheet
.something{
color:Blue;
}
The result is "Lance" in Blue in the child page.
Maybe it might be your css selectors. When you add master pages, asp.net tacks on more prefixes to the ids.
I had a similar problem. As others have suggested, you should be able to use ResolveUrl to make sure the path is correct.
Unfortunately, this created a further problem for me. My head tag was runat server. My link tags were not.
The resolve url within my link tag would never execute. Instead, the C# code and response.write tags were being encoded and outputted to the page.
Bizarrely, the same technique in a script (non-runat server) tag would work as normal.
To solve the problem, I ended up writing the whole link tag within an ASP.Net Response.Write tag:
<%="<link href='" + ResolveUrl("~/apps/_lib/ui/styles.css") + "' rel='stylesheet' type='text/css' />"%>
That worked.
How strange. Somehow, it is all related to the head tag being runat sever.
It looks like you have done it correctly, so your error seems weird and sounds like maybe you've mady a typo in the master page. Try to look at the generated source (view source in the browser) of the two pages, one with the links in the master pages and one with the links in the web page, and compare the paths.
Something like this should work. You should be able to include the css in the header of the master. And then, include a ContentPlaceHolder in the header so if you need custom header stuff in your content pages you can do that. Does that not work?
<head>
<link href="/apps/_lib/ui/styles1.css" type="text/css" rel="stylesheet" />
<link href="/apps/_lib/ui/styles2.css" type="text/css" rel="stylesheet" />
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
Ultimately you don't want a
<head></head>
tag in your content page, it's possible that is overriding your master page header.