I am trying to explore MVC6 application. I selected Framework 4.6 and Empty ASP.Net preview template. Using Visual studio 2015.
I have .css file under wwwroot/css directory.
And trying to use in index.cshtml as
<link href="../../css/css.css" rel="stylesheet" />
also tried
<link href="~/css/css.css" rel="stylesheet" />
But it's not working. Is here any technique required?
You have to tell ASPNET5 to use static files. In startup.cs add
app.UseStaticFiles();
in the Configure() function
try this
#section scripts{
<link href="~/css/css.css" rel="stylesheet" asp-file-version="true" />
}
but recommended it is to add the files to the layout
You need to add your files on the layout page, in MVC 6 you can specify which file you want to use for development, staging or production environment depending where you are working on.
Example:
<environment names="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
<link rel="stylesheet" href="~/css/YourStyleFile.css" />
</environment>
<environment names="Staging,Production">
<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>
go to your App_Start Folder > BundleConfig.Cs > then find the code block that will look similar to this
bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
"~/Content/themes/base/jquery.ui.core.css",
"~/Content/themes/base/jquery.ui.resizable.css",
"~/Content/themes/base/jquery.ui.selectable.css",
"~/Content/themes/base/jquery.ui.accordion.css",
"~/Content/themes/base/jquery.ui.autocomplete.css",
"~/Content/themes/base/jquery.ui.button.css",
"~/Content/themes/base/jquery.ui.dialog.css",
"~/Content/themes/base/jquery.ui.slider.css",
"~/Content/themes/base/jquery.ui.tabs.css",
"~/Content/themes/base/jquery.ui.datepicker.css",
"~/Content/themes/base/jquery.ui.progressbar.css",
"~/Content/themes/base/jquery.ui.theme.css"));
then add the path of your css file in here
edit 1
Now you have advised that you are using an empty preview template you have two options,
Add the App_start folder and add the above code block and then in your Layout.cshtml file add the line
#Styles.Render("~/Content/themes/base/css")
or
in your Layout.cshtml file reference is as you would normally, but youll need it in your shared view so it carries through the rest of the site
Related
I am using Visual Studio 2013. I created a website (ASP.NET Web Site Razor v3) which works just fine in the browser under debug (with Chrome). However - when I deploy the website (simple copy to IIS local), the paths for the stylesheets do not work even though they appear to be accurate in view-source.
I looked over a few threads and saw one talking about url-rewrite. But I don't see any re-writing going on. Maybe I am missing it.
Anyway... the styles:
<link rel="stylesheet" href="~/css/bootstrap.min.css" />
<link rel="stylesheet" href="../css/bootstrap-responsive.min.css" />
<link rel="stylesheet" href="../css/fullcalendar.css" />
You can see I tried a couple of options there. When I look at the source code, I see the following:
<link rel="stylesheet" href="/MyMeds/css/bootstrap.min.css" />
<link rel="stylesheet" href="../css/bootstrap-responsive.min.css" />
<link rel="stylesheet" href="../css/fullcalendar.css" />
My IIS Website is in the /MyMeds/ folder. So that would appear correct. It is almost like it IS re-writing it. But I do not see any re-write rules in the web.config file.
thanks.
You need to use #Url.Content(). LIke this:
<link href="#Url.Content("~/css/bootstrap.min.css")" rel="stylesheet" />
I have my CSS and JS in my layout page.
I need to add a param string to the CSS and JS when I do changes and I upload them with these changes.
For example:
<environment names="Production">
<link href="~/dist/mycss.bundle.css" rel="stylesheet"/>
</environment>
To:
<environment names="Production">
<link href="~/dist/mycss.bundle.css?param=withchanges" rel="stylesheet"/>
</environment>
What is the best way to do that? Has new ASP.NET 5 a way to do that?
there is a built in taghelper that is just for this purpose
<link href="~/dist/mycss.bundle.css" rel="stylesheet" asp-append-version="true"/>
by adding the asp-append-version=true, a hash of the file contents will be automatically appended to the url so it will change if the file contents change.
I am trying to get add a css file to my layout file, which is in the Shared folder. When I run the web application, my CSS is not rendered (CSS that is not in the solution (ie: Bootstrap CDN) renders.
I have tried linking the CSS using these methods, and they don't work:
<link rel="stylesheet" href="#Url.Content("~/Assets/Scripts/StyleSheet.css")" type="text/css"/>
<link rel="stylesheet" href="~/Assets/Scripts/StyleSheet.css" type="text/css"/>
The File Structure For my app is:
Is there something I should be adding to the Startup.cs file so it can read css files?
Thanks.
EDIT: ERROR 404 WITH THE STYLE SHEET
I ran the application on Mozilla Firefox, and used the built in Developers Console to see whats happening. After observing the network tab, it tells me ERROR 404 Occurred while trying to retrieve the style sheet. This is really odd.
Do other changes in your layout show up correctly? For instance if you add a random text string, does that show up? As far as startup.cs, you should have app.UseStaticFiles(); in the Configure section.
Once more note, my CSS in the _layout looks like this:
<environment names="Development">
<link rel="stylesheet" href="~/css/site.css" />
</environment>
<environment names="Staging,Production">
<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>
I don't think it's required to be broken out, but I haven't tried it not broken out...
With Reference to a similar problem posted on StackOverflow: ASP.NET 5 MVC6 Custom CSS & Javascript placing convention
I placed the CSS File in the wwwroot directory, in a css folder.
Then, in my Layout file, I changed the href attribute:
<link rel="stylesheet" href="#Url.Content("../css/style.css")"/>
Finally, I made sure I had app.UseStaticFiles() in my Configure method:
public void Configure(IApplicationBuilder app)
{
app.UseStaticFiles();
app.UseMvc(config => config.MapRoute(
name: "Default",
template: "{Controller}/{action}/{id?}",
defaults: new {controller = "Home", action = "Index"}
));
}
In my .net application i have Styleshet.css in CSS folder.
Now i want to link this css in Sample.aspx.
What would be the best approach
1.
<link href="CSS/StyleSheet.css" rel="Stylesheet" type="text/css" />
OR
2.
<link href="<%=ConfigurationManager.AppSettings["ApplicationUrl"].ToString()%>/CSS/StyleSheet.css" rel="Stylesheet" type="text/css" />
In Web.Config
<appSettings>
<add key="ApplicationUrl" value="http://localhost/myapp/" />
</appSettings>
The best way in asp.net is option 3:
<link href="~/CSS/StyleSheet.css" rel="Stylesheet" type="text/css" />
The ~/ resolves to the site path root. The difference between this and just "css/... is that it will work no matter what subfolder you're in. For example if your code was in
/subsection/default.aspx
and your styles were in folder /css
using a link to "css/stylesheet.css" would resolve (incorrectly) to "/subsection/css/stylesheet.css" whereas using "~/css/stylesheet.css" would resolve (correctly) to "/css/stylesheet.css"
This also differs from a hard path root "/css/stylesheet.css" in that it will work correctly regardless of the virtual directory configuration of the site.
<link href="CSS/StyleSheet.css" rel="Stylesheet" type="text/css" />
Dont go for second approach as when you deploy your site to a server the /localhost/ reference wont work.
Well, always use relative paths so that you don't have to change your files after the deployment.
You can also use resolved app relative path such as
<link href="<%= ResolveUrl("~/CSS/StyleSheet.css") %> rel="Stylesheet" type="text/css" />
Reletive path approch is much better (your first approch), Absolute paths are not portable between applications. If you move the application that the absolute path points to, the links will break.
You can find more information on below mentioned link
Specifying Paths for Resources
In my application I have next problem. I created master page and some content pages, some of which are located in the nested folders. In the master page I added the link to .css file
<link href="default.css" rel="stylesheet" type="text/css" />
But pages are located in the nested folders can't use this .css file. How can I fix this? I want to have one .css file for all pages (:
Thanks!
<link href="~/default.css" rel="stylesheet" type="text/css" />
This problem can be resolved by adding next code in master page
<style type="text/css" runat="server">
#import '<%= ResolveUrl("~/default.css")%>';
</style>
But designer of VS can't process this and you couldn't view your styles in it.
The css shouldnt be relative to the master page but rather it should be relative to the location of the Page instance using the master page. In most cases this will be the same thing but I would always try to use either a fully qualified path or a site relative path
Fully qualified path
<link href="http://some.site.com/mysite/styles/default.css" rel="stylesheet" type="text/css" />
or a relative path (note this might not work if you have a version which can only host one site but many apps such as WinXP)
<link href="/default.css" rel="stylesheet" type="text/css" />
Win xp relative path
<link href="/path/to/application/default.css" rel="stylesheet" type="text/css" />
If you using website under website, change in subfolder masterpage CSS link
<link href="Styles/Site.css" rel="stylesheet" type="text/css" />
change with below
<link href="../Styles/Site.css" rel="stylesheet" type="text/css" />
The way you defined you style sheet means: the style sheet is in the same folder as the page which uses it.
If you want to have one style sheet for all pages you should put in in one place (I prefer /assets/css folder in the application root) and define the path using this folder:
<link href="/assets/css/default.css" rel="stylesheet" type="text/css" />
The other way to archieve this is to use Themes, in this case styles will be added automatically.