I've recently started using Xamarin/MonoDevelop as an alternative to Microsoft Visual Studio and my first project was to create a website using ASP.NET with MVC pattern. This has been going well, and I don't mind the extra code work, but I'm having a rough time with the CSS.
For whatever reason, any CSS file only seems to compile once, ignoring any changes I write to the file. From my research, this because content files are cached for the build.
Is there a method in Xamorin's files, Microsoft's aspnet and web packages, or Newtonsoft's or Razor's library? If so, in which part of my solution do I call it?
Is there an add-on to Xamarin? How do I use it?
Do I have to modify a config file?
As pointed out in the comments, the issue was being caused by the browser cache not refreshing with changes to the build. The solution to this is to append a version to the end of the path name for the stylesheet. Since I am using cshtml, I decided to use this:
<head>
#{
string version = "?v=2";
string stylePathSite = "../../Content/Styles/SiteStyles.css" +
version;
string stylePathNav = "../../Content/Styles/NavBarStyles.css" +
version;
}
<link rel="stylesheet" href="#stylePathSite"/>
<link rel="stylesheet" href="#stylePathNav"/>
</head>
I can later write a controller to be update the version variable from my model. Hope any fellow newbies out there find this helpful.
Related
I created a new .NET 6 Blazor Server-side project and made a couple of changes. I have a couple of files using CSS isolation (like Contact.razor + Contact.razor.css).. In the _Layout.cshtml page the template added the following:
<link href="CustomerPortal.styles.css" rel="stylesheet" />
Where CustomerPortal is my Project Name. I can see the file is generated correctly under "CustomerPortal\CustomerPortal\obj\Debug\net6.0\scopedcss\projectbundle\CustomerPortal.bundle.scp.css" and "C:\Data\Git\WebApps\CustomerPortal\CustomerPortal\obj\Debug\net6.0\scopedcss\bundle\CustomerPortal.styles.css"
BUT when I run the project, both with Kernel or IIS Express, I get a 404 not found for the CSS, if I try to manually navigate to the CSS I also can't find it. Any ideas? My csproj doesn't have any flags that would affect it.
Edit:
There is a new extension as part of the minimal setup in .NET 7, and backported to newer versions of .NET 6 as well.
Both in .NET 7 and .NET 6 you can now do:
builder.WebHost.UseStaticWebAssets();
Old answer:
You've got a couple options here to resolve this depending on the approach you want to take. I think we've figured out why it's happening, but UseStaticWebAssets() seems to not be supported for the new minimal startup code. So, here's your options I can think of off the top of my head.
Migrate your code back to the "old" way of doing application startup. This is still a supported and completely valid approach as there's edge cases that aren't supported (like this one).
Pass a new WebApplicationOptions to the CreateBuilder() method and, depending on environment, look for the static files in a separate (and correct) location. See some examples here.
With the existing builder, check the environment and use the StaticWebAssetsLoader to load static web assets.
A complete example of #3
if (builder.Environment.IsEnvironment("Local"))
{
StaticWebAssetsLoader.UseStaticWebAssets(builder.Environment, builder.Configuration);
}
That being said - I'd imagine they'll plug this hole eventually and provide parity for UseStaticWebAssets(). You can see the progress of this effort in this open GitHub issue.
For anyone else...
I had the exact same issue with a .net 6 blazor server app. For me it came down to the fact that I had changed the project name but the reference to {project}.styles.css in _Layout.cshtml was still pointing to the old project name.
Simply updating {project} here to the correct project name fixed my issue.
When I encountered this error, it was because I'd named my MVC project with a hyphen: htmx-spike.
When I generated the project from a template (dotnet new mvc -o htmx-spike), the tooling renamed the namespace to htmx_spike—with an underscore instead of a hyphen, because hyphens aren't allowed in C# identifiers—and used that modified name as the CSS filename in _Layout.cshtml.
However, it turns out that in this case the CSS location actually still corresponds with the project name, with the hyphen. So the auto-generated code is incorrect, and was causing the 404 to be returned:
Once I renamed the file in the link element to the correct name with the hyphen, everything was fine.
I had the same issue with a component I imported from another project. I solved it by closing all instances of Visual Studio, deleting the hidden folder [.vs] from the project folder, and then restarting the project in Visual Studio. On restart, Visual Studio recreated that folder and imported CSS file(s) were included.
I have the following ScriptBundle defined in BundleConfig.cs-
public class BundleConfig
{
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/js/yepnope").Include(
"~/Scripts/yepnope.{version}.js"));
}
}
It isn't in fact the only bundle, but that is all in there that is pertinent to the question - the rest is just other bundle definitions.
When in "debug" mode as set in the web.config-
<compilation debug="true" targetFramework="4.5">
Both the full and minified versions of the script are sent to the browser-
<script src="/Scripts/yepnope.1.5.4-min.js"></script>
<script src="/Scripts/yepnope.1.5.4.js"></script>
The script is added using the HTML helper like so-
#section HeadScripts
{
#Scripts.Render("~/js/yepnope")
}
This is an MVC4 project running in Visual Studio 2012 on Windows 7 Professional 64-bit.
Whatever I do I cannot get the {version} wildcard to behave as described in the Microsoft documentation-
Note: Unless EnableOptimizations is true or the debug attribute in the
compilation Element in the Web.config file is set to false, files
will not be bundled or minified. Additionally, the .min version of
files will not be used, the full debug versions will be selected.
For ASP.NET MVC 4, this means with a debug configuration, the file
jquery-1.7.1.js will be added to the bundle. In a release
configuration, jquery-1.7.1.min.js will be added. The bundling
framework follows several common conventions such as:
Selecting “.min” file for release when “FileX.min.js” and “FileX.js”
exist.
Selecting the non “.min” version for debug.
Ignoring “-vsdoc”
files (such as jquery-1.7.1-vsdoc.js), which are used only by
IntelliSense.
The {version} wild card matching shown above is used to
automatically create a jQuery bundle with the appropriate version of
jQuery in your Scripts folder. In this example, using a wild card
provides the following benefits:
Allows you to use NuGet to update to a newer jQuery version without
changing the preceding bundling code or jQuery references in your view
pages.
Automatically selects the full version for debug configurations
and the ".min" version for release builds.
If I add "EnableOptimizations" it seems to behave as expected.
Has anyone else noticed this or found a solution?
MVC4 only knows how to handle a .min.js file. It doesn't recognize -min.js (with a dash).
The way I typically do this, with easy success, is to get rid of any .min.js or -min.js files provided by libraries that provide both a .js and either a .min.js or -min.js. By default, MVC will automatically minify any bundled .js files when you deploy your website, so there's no need to use the provided .min.js or -min.js files.
This isn't necessarily a direct answer to your particular question - it's a way to circumvent the problem entirely.
I have two questions, one about a bug and one about cdn
QUESTION 1: (BUG)
I have just added the new NuGet package: Microsoft ASP.NET Web Optimization Framework 1.0.0.
I'm using ASP.NET MVC 3, and everything seems to be working except for one major bug.
If I use debug="true" in web.config, then no script tags ever get outputted. I checked the view source and there are no tags for that bundle at all.
If I set debug="false" then I get the script tag that points to my minification file.
*Is this a bug? Has anyone else experienced that? *
As a workaround so that I'm at least able to debug my application, I forced optimization on regardless if I'm in debug mode or not BundleTable.EnableOptimizations = true;
QUESTION 2: (CDN)
Also another question I have is about the CDN Support:
bundles.Add(new ScriptBundle("~/bundles/jquery",
jqueryCdnPath).Include(
"~/Scripts/jquery-{version}.js"));
If I want to add another script with CDN support, then I would have to add another bundle, therefore if UseCdn="false", then it will try and load up 2 scripts separately, meaning 2 requests. Is there any way to have CDN support for multiple scripts so that it will combine them into 1 request if UseCdn="false"?
Something like this:
bundles.Add(new ScriptBundle("~/bundles/multiple").Include(
"~/Scripts/jquery-{version}.js", jqueryCdnPath,
"~/Scripts/jquery-ui-{version}.js", jqueryUICdnPath,
));
Regards DotnetShadow
Could you expand on what isn't working on in your MVC3 app, i.e. how are you using the Scripts/Styles.Render methods?
In regards to #2, currently the CDN support is only on a per bundle basis. So you will not be able to do the conditional bundling that you want and use cdn (unless you had access to a CDN which you could upload new content to, then you could just upload your bundle to the CDN)
I would like to give my CSS and javascript files far-future headers and add a token onto the URLs referrring to them. That way browsers don't have to re-download CSS and javascript unless I've released a new build of the site.
http://example.com/css/styles.css?build=23424
How can I pass a build number or timestamp to my code-behind so it can add the timestamp?
Obviously C# doesn't have macros, which is what I would use in C/C++.
I realise that this will force browsers to download assets whenever I do a new build - regardless of whether or not the build involved changing the assets. However, I would like to put a simple scheme in place before I implement anything more advanced like looking at individual file modification times.
Here's a bit of code that I use to extract the build id from the current assembly at application start. It reads the version number from the assembly, a version designator (dev/qa/blank) from the web config, then constructs a version number string to stuff into the application. This code goes in Global.asax.cs. You can then refer to it in your markup from the Application instance.
var webAssembly = Assembly.GetAssembly( typeof(...known class...) );
var designator = WebConfigurationManager.AppSettings["VersionDesignator"];
string version = webAssembly.GetName().Version + designator;
this.Application.Add( "Version", version );
Here's an example of how you could use it in an MVC context (sorry I don't have any WebForms examples).
<link type="text/css" rel="stylesheet"
href="/Content/styles/screen.css?build=<%= this.Application["Version"] %>" />
Interesting idea.
Here's one way to do it:
Go into your AssemblyInfo.cs class under the Properties folder in your project.
Change your assembly version to include the star wildcard: [assembly: AssemblyVersion("1.0.*")].
In your code, you can retrieve the current build version like this:
_
var buildNumber = Assembly.GetExecutingAssembly().GetName().Version.Build;
_
That's it, you're done.
Changing the AssemblyVersion to 1.0.* will cause Visual Studio/MSBuild to increment the build number automatically for you each build. Then, you can access this build number at runtime using the above code snippet. Easy as cheese.
Browsers and servers know how to handle caching via HTTP. So, I misunderstand, what are you trying to accomplish with providing this kind of caching. A browser will not re-download your CSS and Javascript if it has seen it recently. And it will re-download it if you do a push of your new build on the server. See cache headers like Cache-control and Expires etc. Here's a tutorial http://www.mnot.net/cache_docs/
Is there any native compression (for javascript/css files) available in ASP.NET?
Try Chirpy. It mashes, minifies, and validates your javascript, stylesheet, and dotless files.
You can use YUI Compressor or Google Closure Compiler.
http://chirpy.codeplex.com/
Or, for more info, check out:
http://www.weirdlover.com/2010/05/22/visual-studio-add-in-for-dotless-js-and-css-files/
In the appendix of Professional ASP.NET 3.5 Scott Hanselman talks about Packer for .NET. This will integrate with MSBuild and pack javascript files for production deployments etc.
You could use Packer.
This utlity supports JavaScript compression and /or "minifying", and CSS "minifying".
It's available as a command line utility or also as an MSBuild task.
This way you can integrate it into your build process / Visual Studio project.
There is Gzip/Deflate compression support in IIS compatible with all modern browsers except IE6. For IIS 7 check this page: http://www.iis.net/ConfigReference/system.webServer/httpCompression
Further to other answers and comments, you can use Yahoo!'s YUI Compressor and make it an MSBuild Task to integration it into your build and deployment process.
Try StyleManager for CSS combination and minification. It uses YUI Compressor under-the-hood.
Its usage is a lot like asp.net's ScriptManager, so it's quick to get used to. It's easy to add to your project too, only takes a minute.
Most importantly - it combines your CSS files too. So instead of having like 10 CSS files to download it'll just be 1, which will also be compressed etc.
I have written something to do this for me, you can download it here:
http://www.picnet.com.au/blogs/Guido/post/2009/12/10/Javascript-runtime-compilation-using-AspNet-and-Googles-Closure-Compiler.aspx
It uses Google's closure compiler which is pretty awesome.
Thanks
Guido
Here is my way:
Use MVC.
Process js|css content via MVC controller's actions.
Combine multiple files into one.
Minify and obfuscate script|css on fly before it stored in cache.
Cache results.
Use CacheDependency.
Enable gzip for dynamic content.
Enable gzip before cache feature.
Everything can be done just by adding custom attributes on action methods, using ASP.NET MVC Js/Css Composer/Compressor.
Sample:
public class JsController : Controller
{
[Utility.Processors.JsCompress]
[OutputCache(Duration = 3600)]
public ActionResult Jquery()
{
return View();
}
}
You can derive from CustomTextPostProcessingAttribute and make your own postprocessing for any type of text content, you need.
I just learned something today: you can run JavaScript via windows console. I'm a fan of cssmin.js; so, this plus windows console = win! All you have to do is download cssmin.js, put it in a folder on your web project and add the following post-build event in Visual Studio:
type "$(ProjectDir)css\*.css" | cscript //NoLogo "$(SolutionDir)tools\cssmin.js" > "$(ProjectDir)css\core.min.css"
Doing this keeps you from having to edit your project as ajaxmin would have you to do.