I'm designing an MVC site, and I've already got quite a few things in the Site.css that only apply to one controller or even one page. I'd like to break this out into multiple css files and include them only when necessary, but how can I do this when all header information is in the Site.Master.
Note: I still want to use master pages, I just want some header resources to be per page or per controller.
I was able to do this by adding a ContentPlaceHolder into my Site.master header and then linking to the CSS statements via that placeholder. It works well from what I've seen.
Example:
<head runat="server">
<title>Site Master</title>
<asp:ContentPlaceHolder ID="css" runat="server" />
<link href="~/css/css.css" type="text/css" rel="stylesheet" />
</head>
Something else to consider - if you have a lot of "one-off" CSS styles, you may want to think about how you're setting up the styles in the first place.
Related
So I am trying to simply load a .css file from within the master page.
The master page Admin.Master and the css file AdminView.css are both in the /views/shared folder. I am sticking the following link tag in the section of my Master page.
I have tried both:
<link href="<%: ResolveUrl("AdminView.css")%>" rel="stylesheet" type="text/css"/>
and
<link href="AdminView.css" rel="stylesheet" type="text/css"/>
As well as every other combination (~/views/shared/adminview.css OR /adminview.css....etc)
and when viewing in Firebug what it loads, it always returns "Resource not found".
NOTE: I have double checked the name and spelling.
Its these trival stuff that shouldn't be this difficult.
You can't access resources in the Views folder directly from the web. You should put your content in the Content folder (or Content/Styles) and reference it from there. The Views folder is for the framework to use to find your Views, it isn't visible from the web.
<link href="<%: Url.Content( "~/content/styles/adminview.css" ) %>" ... />
<link href="/views/shared/AdminView.css" rel="stylesheet" type="text/css"/>
I'm just trying to set up an input with datepicker and I'm getting the following error: "Object doesn't support this property or method".
I downloaded the JQueryUI without a theme and there is my head section of the master page:
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.4.1.min.js" type="text/javascript" />
<script src="/Scripts/jquery-ui-1.8.5.custom.min.js" type="text/javascript" />
<asp:ContentPlaceHolder ID="ScriptContent" runat="server" />
After that, I created an input text inside a partial view (that remains inside a view):
<input type="text" id="txtDataIda" />
And at the beggining of this partial view:
$(function() {
$("#txtDataIda").datepicker();
});
When I open the page, the error is shown and the datepicker won't work.
I suppose I must be doing something wrong since I've never got the chance to work with JQueryUI before.
Thanks in advance!
You should go to http://jqueryui.com/download and build a custom download with the features that you want. Then, just reference the 2 files (jquery-1.4.2.js, jquery-ui-1.8.5.custom.min.js) in the "js" folder and not all of the files in the "development-bundle" folder. Then, you don't have to worry about multiple files conflicting. I have a feeling that the .widget, .datepicker, and 1.8.custom files may be conflicting. But, if it's all in one custom file, then you don't have to worry about that.
Or if you're not using any other ui features, you could try referencing only the jquery-1.4.2.js, ui.core.js, ui.datepicker.js files to see if that works without conflict.
And, of course, double check that you've put the references in the correct master page that is being used.
Fixed!
The JQuery wasn't being loaded, because the script tag was self closing. When I changed it to , it worked, as bizarre as it seems.
Thanks!
I would like to create in my master page a control that depending on the rendered viewpage will change a css file
I was thinking to make a specific controller "CssController" and call this CssController from the src attribute of the css link. This controller will be in charge of choosing the right css and sending it back with text/css header.
question: will this approach break the mvc pattern? Indeed the choose of the design would be in charge of a controller. Is there a better alternative?
What i did in my master page was create a contentplaceholder in the <head> section, as so:
<head runat="server">
<title>Title Here</title>
<script src="<%= Url.Content("~/Scripts/jquery-1.3.2.min.js") %>" type="text/javascript" ></script>
<link href="<%= Url.Content("~/Content/css/site.css") %>" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server" />
</head>
then, when you create a view using the master page, you can add the view-specific css you want into that content place holder. That way, it'll put your site.css first, plus the desired css, javascript, <script> blocks, whatever, on that particular view.
If you are using separate css files for separate themes, then those would be in fact the view and controller would work. So it does not seem to violate the pattern. But, it does seem to be a more complicated solution than others.
The common way I have seen to do this is with a Jquery Style Switcher
http://www.cssnewbie.com/simple-jquery-stylesheet-switcher/
With a little bit of code you can determine the default style to show on each page
The basic MVC example sets Page Title via the controller. I'm not sure this is any different. If you were using it (for instance) to have users be able to select different skins for their experience, I'm not sure there is any other way to do it, regardless of whether or not it violates the pattern.
How shall I apply Css Class to the root folder of my mvc application.Because when the application is not given the name of the controller and the start action it is not displaying the images and the css
I think your referring to the reference within link tag in your header?
If this is the case the best solution in my opinion is to use Url.Conent so your link tag will look something like:
<link href="<%=Url.Content( "~/Content/Site.css" ) %>" rel="stylesheet" type="text/css" />
That way no matter what the url the user is viewing the reference to the style sheet is always correct.
how many methods for adding style sheets in a page using Asp.net MVC
Wherever you're specifying the CSS for your details page instead of a relative path e.g.
<link href="../../Content/CSS/details.css" rel="stylesheet" type="text/css" />
try using the content helper and specifying a virtual path instead
<link href="<%= Url.Content("~/Content/CSS/details.css") %>" rel="stylesheet" type="text/css" />
It seems that the site is having trouble loading getting to the CSS file based on a relative link.
Use absolute links to css instead of relative (eg /Content/site.css" instead of "../Content/site.css"). Also you may use Html.Stylesheet("~/Content/site.css") extension (in MvcContrib library) to specify a stylesheet.
Is the problem not getting the right CSS? If so, then I would check your Details.aspx file and make sure the link to the CSS is the right path. Most likely, your Details.aspx file got moved into a new subdirectory or into another directory, thus making the relative paths between the aspx file and the CSS file different.
I would check the page source from the browser and look to see what the path to the CSS file is. The way I would solve the problem would be to modify the aspx file to use a fully-qualified path to the css file. Make sure that works. Then try changing the full path to use relative path.
I had the same issue when working through an example in an MVC book, it mentioned something about the '~' character only working because the <head> tag has the runat="server" attribute on it. So, I tried adding the runat attribute to the link tag itself, as seen below, and it worked:
<link runat="server" href="~/Content/styles.css" rel="stylesheet" type="text/css" />