Minify Html output of ASP.NET Application - asp.net

What are the ways by which we can reduce the size of the HTML Response sent by an asp.net application?
I am using Controls which are not owned by me and it produces output with white spaces. I am interested in Minifying the entire HTML output of the page just like how google does (View source www.google.com) to improve the timing.
Is there any Utility classes available for ASP.NET which can do this stuff for me?

There is no need to do it at run time. Because it can be done at compile time.
Details: http://omari-o.blogspot.com/2009/09/aspnet-white-space-cleaning-with-no.html

Try HTTP module as described here: http://madskristensen.net/post/a-whitespace-removal-http-module-for-aspnet-20

For Microsoft .NET platform there is a library called the WebMarkupMin, which produces the minification of HTML code. For each ASP.NET framework has its own module:
ASP.NET Core - WebMarkupMin.Web. Implemented as an HTTP module, so it can work with any framework. Suitable for use in the ASP.NET Web Pages framework (Razor).
ASP.NET MVC - WebMarkupMin.Mvc
ASP.NET Web Forms - WebMarkupMin.WebForms
Documentation is available at - http://webmarkupmin.codeplex.com/documentation

I want to comment on Thorn's suggestion (but I'm new to stack overflow).
The linked code (omari-o.blogspot.com) doesn't support MVC4, and although the code is open source it cannot easily be upgraded because of braking changes between MVC3 and MVC4.
There might be whitespaces written to the http result at runtime, only the developer of the actual site can know that. Thus static minification of template files (aspx) is not foolproof at all. Dynamic minification, which is suggested by gius, should be used to guarantee that whitespaces are removed correctly, and unfortunately this will incur a runtime computation cost. If code dynamically writes spaces to the output, it will have to be removed dynamically.

The accepted answer does not work with MVC 4, so here is a similar lib that minifies at build-time https://github.com/jitbit/HtmlOptimizerMvc4

Just adding another option I do not see listed here, which is the one I was recommended using:
Html minifier command line tool
Usage:
here and here
There is an issue, however, with this tool: it leaves single line (//) comments, and it causes problems for Razor parsing, since a single line comment placed within a C# block like the following:
#{
...
...
// anything
...
}
will cause the minification output rest of the line, from this point on, to be ignored by the Razor parser, which will thus raise an error stating there it could not find the closing "}" for the block.
My workaround for this issue was to completely removing these comments from the output.
This way it works.
To do that, simply remove the RegexOptions.SingleLine from line 145:
htmlContents = Regex.Replace(htmlContents, #"//(.*?)\r?\n", ""/*, RegexOptions.Singleline*/);

Related

Combine web server controls web and script resources (axd files)

I know there are lots of similar questions like this in the web, but I haven't got to one working solution after searching for these last 2 days. Some threads are outdated, others solutions don't work, others are too complicated to manage, so... Yes, another question about resources.axd files in asp.net projects.
I'm starting to build a set of server controls and embedding some resources. After building my controls and dragging them into pages, each individual resource is requested by the browser in the form of an .axd script. I understand the part where the ScriptManager manages these scripts and they're not ready to use, for instance, in Bundles in some sort of .Include("*.axd").
I tried some of the combine/minify/compress/gzip/icecreamOnTop packages out there but couldn't manage none of them to work.
I tried the StriptManager CompositeScript approach and the ScriptResources.axd are indeed combined, the response is successful (code 200), but in the end the scripts don't work. Example: I included the jQuery lib in that composite script and then tried to use it in the page - didn't work. I must say I didn't reference () the composite script anywhere because I didn't understand how to do it. If I set the path, then a 404 was returned (found the 1024 byte limit threads, etc...) and all the requests to the WebResources.axd would still remain.
I would prefer not to write an HttpHandler myself.
Also tried to download the AjaxToolkit and tried the ToolkitScriptManager which combines scripts, but that added ~4seconds to my page load. No, thanks.
My question is: what is the current approach regarding this matter in .net 4.5?
I will have lots of resources and would like to combine them. All js and css files in the final website project are bundled, but how to 'bundle' the axd files?
Here's a little example which will make the following requests:
Click here to view image
I know I can set the AjaxFrameworkMode to Disabled and will only have the 2 first WebResources.axd requests in this example, but what about when I have 10 css files embedded in my controls?
Any working solution would be much appreciated.
Many thanks
I managed to implement something that suits my case. More of a work around than a proper combining solution, but works and that's good enough for now.
All my controls extend a base class which has a property called ProcessResources. By default this property is set to true. That means that JS and CSS resources will be registered and each control has everything to work as standalone (axd resources will be generated). When set to false, no resource is registered and no axd files are generated.
The base class also has a static method that receives a destination path as a parameter and copies all the JS and CSS resources to that folder (if they don't exist or have been modified). This method returns a collection of all the needed resources for the control to work.
This way, on Application_Start, I can do something like:
myJsBundle.Inlude(ServerControlA.GetResources("~/ExternalResources", RESOURCES.JAVASCRIPT));
Then just need to set the ProcessResources flag to false (each control or web.config). All resources are now bundled and no axd files are generated.

Removing the byte order mark on asp.net page

I'm really stuck. I'm working on an integration project where I'm creating a html fragment using ASP.NET. This fragment will be included as part of another site. The html fragment is created using a simple ASP.NET page with a minimal code behind file.
Te site that will include this html fragment is running PHP. The developer there is complaining that my code is sending the byte order mark as part of the html fragment and this is making his life difficult.
I'm using Visual Studio 2010 for development. I've saved the relevant aspx and aspx.cs files as UTF-8 without signature. However, this doesn't seem to have made a difference and now I'm pretty much out of ideas. The rest of the site is set to use UTF-8 as standard (defined in web.config).
Where should I be looking to alter the BOM behaviour for my aspx file?
If you save the file in Visual Studio I believe it will keep adding the BOM. You need to use a different editor to remove the marker such as NotePad++.
Actually in the advanced save as dialog in Visual Studio there is also an option to save UTF-8 without signature. Have you tried this?
It's confirmed in this question.
You can also use plain old NotePad to save with a different encoding.
Save As...Encoding DropDown.

Returning razor-parsed Javascript as a ViewResult from a controller

I've successfully created an mvc/razor web application that returns css files that have been parsed by razor. Each time there's a background-image I have a razor snippet that writes the URL prefix to the image file name. The CSS now looks like this:
body { background-image: url(#LookupUrl.Image("background.gif")); }
Css files now work fine and I've moved onto trying to get javascript .js files to function the same way but these aren't playing ball.
The code is identical to the css code and it successfully finds the .js file, but razor seems to parse it differently. Here's an example js file:
function testFunction() { alert('test function hit!'); }
testFunction();
Razor seems to think it's code that it should compile, and gives the error:
Compiler Error Message: JS1135: Variable 'alert' has not been declared
> Source Error:
>
> Line 1: function testFunction() {
> Line 2: alert('test function
> hit!'); Line 3: } Line 4:
> testFunction();
After renaming the same file to .css it works fine.
Is there a way of getting razor to function with .js files in the same way as it does for .css?
Here's how I registered the file handlers for razor:
RazorCodeLanguage.Languages.Add("js", new CSharpRazorCodeLanguage());
RazorCodeLanguage.Languages.Add("css", new CSharpRazorCodeLanguage());
WebPageHttpHandler.RegisterExtension(".js");
WebPageHttpHandler.RegisterExtension(".css");
The build provider is registered in PreApplicationStart via the method Haacked outlines in his blog post.
Do I need to remove a handler that mvc adds for .js files?
UPDATE 2 days on
While I got working what I wanted to get working, I would not recommend this method to others. Using Razor to parse css/javascript is flawed without the use of <text><text/> - it's the simplicity of razor using the # ampersand that messes it up. Consider the CSS3 #font-face. Razor hits the # and thinks it should use it as a function. The same thing can happen with javascript, and happened with Jquery 1.5.1.
Instead, I'll probably go back to aspx webforms for dynamic css/javascript, where there's less chance of the <% %> code blocks appearing naturally.
I couldn't understand why CSS worked while JS didn't, especially after the copy+pasted JS code worked inside the CSS file.
I used the find/replace dialogue within visual studio on the System.Web.WebPages.Razor source to search for the string '.js' within the project. There was nothing helpful there so I then went to the System.Web.WebPages project. It found a match in System.Web.WebPages.Util, which is a static class with a few helper methods.
One of those methods is 'EnsureValidPageType' and within there is a try/catch block. Inside the 'catch' block is a comment:
// If the path uses an extension registered with codedom, such as Foo.js,
// then an unfriendly compilation error might get thrown by the underlying compiler.
// Check if this is the case and throw a simpler error.
It made me believe .js has got some special built-in handler with it.
I googled for a bit, couldn't find anything, then looked in the web.config that's within \Windows\Microsoft.NET\Framework64{version}\Config.
In there is a buildProvider mapping for the extension .js to
System.Web.Compilation.ForceCopyBuildProvider
After removing this buildprovider in the website's web.config, .js files get compiled and work as they should!
I'm still not too sure what the ForceCopyBuildProvider does or is for but I wonder if it's for visual studio. Various extensions have different Copy/Ignore build providers registered.
Once again apologies for answering my own question but I hope the comprehensive(waffley) answer might help others out.
You could try using the special <text> node to indicate to the Razor parser to treat the content literally:
<text>
function testFunction() { alert('test function hit!'); }
testFunction();
</text>
The default Razor parser uses the HtmlMarkupParser to handle the markup components of your template. There isn't currently any alternative parsers that support other markup languages (which you would need to treat the javascript code language as). If you did create a new markup parser, I would imagine it would be quite difficult to separate the code and markup (i.e. the C# and the Javascript).
What you could do, is use the <text></text> wrapping elements to enforce the parser switches to markup mode when that section of the template is reached, e.g.
<text>function testFunction() { alert('test function hit!'); }</text>
It's not pretty, but it should do the trick.

Designer files not nesting correctly, messing up intellisense in Visual Studio

Greetings.
I've got a web site project loaded into Visual Studio 2008. The .designer files for all of my ascx controls are not nested under the control in solution explorer, and when I reference something in that control in the code behind, I don't get intellisense.
I've checked the csproj xml file, and the 'compile' elements appear to be the same as those in my other projects where this is working correctly. An example looks like this:
<Compile Include="Default.aspx.cs">
<DependentUpon>Default.aspx</DependentUpon>
<SubType>ASPXCodeBehind</SubType>
</Compile>
<Compile Include="Default.aspx.designer.cs">
<DependentUpon>Default.aspx</DependentUpon>
</Compile>
I've tried playing with the project file, using the Website\Nest Related Files menu command, and everything else that I can think of. Any ideas?
UPDATE
Note that I'm trying to nest files that should be nested already.
This is a response to my own previous post. Got MS Tech Support to straighten it out. On my .aspx pages changing line one in 2 places solved the issue for me.
In the line in each .aspx file in your project that starts "<%Page Language" change "Codebehind=" to "Codefile=", and in your "Inherits=" property if it's set up as ProjectName.FileName then remove the "ProjectName.".
For example if you had a Project named "TestApp" and a file inside it called "NewFunctionalityTest.aspx" change
Inherits="TestApp.NewFunctionalityTest"
to
Inherits="NewFunctionalityTest"
in the first line.
To nest resx files you
Add Existing Item. Add resource and designer files to the project.
Select all resource files (Not Designer files) that are not nested.
Select Properties and change the Custom Tool to PublicResXFileCodeGenerator
Should work
Made sure both partial files are the same namespace and class name? Might also try to remove them and add both files back at the same time.
I ran across this macro a while back to do exactly what you're looking for. The author even posted a video of how to use it. I have never tried it though, so I can't vouch for it.
I don't know if the OP ever fixed his issue, but something very similar is happening to me. The designer.vb files aren't nesting, Intellisense isn't working, etc... The main difference is that I'm not using ascx, I'm using straight up .aspx pages with .vb codebehinds. It appears as though all the controls placed on the aspx page do not appear to VS as declared when I go to manipulate said controls in the codebehind. I get an error list hundreds deep from code I wrote months ago (having no problems with at the time), most of them saying "Name 'objectname' is not declared" where 'objectname' is a textbox, or dropdown menu from the associated aspx page. To answer Vishal's questions...
Can you share whether this happens everytime you create a new project or is it for a specific project...?
It's happening to one project. I have multiple other applications in VS2008 showing no problems.
Did you try compiling the project?
Yes, when I compile it lists out all the build errors that show up in the ErrorList aborts, and kicks over to the ErrorList.
Does intellisense come back after compiling
No.
A little more information on this project: It's a converted VS 2003 project. These problems did not start immediately after conversion from 2003. The conversion happened months ago and I made numerous revisions to the web app since then. There's currently a version with those revisions on a test server to show off new functionality to the client. This problem only cropped up 3 business days ago when I went in to make a few formatting changes to the aspx page. I never got a chance to make those changes however because as soon as I opened the project I got the error list. This issue is affecting every aspx page I have in the project.
I do not think the nesting is an issue for you, seeing nested files is just a eye candy although depends upon matters...
Not getting intellisense is not really a factor of nesting but rather something to do with the way references are hooked up for your project... Can you share whether this happens everytime you create a new project or is it for a specific project...?
Did you try compiling the project? Does intellisense come back after compiling... Typically for WAP projects if for somereason intellisense does not become available it should come after you compile the project...
Let me know if are still facing this issues...

JQuery's $ is in conflict with that of StringTemplate.Net in ASP.Net MVC

I am exploring ASP.NET MVC and I wanted to add jQuery to make the site interactive. I used StringTemplate, ported to .Net, as my template engine to generate html and to send JSON. However, when I view the page, I could not see it. After debugging, I've realized that the $ is used by the StringTemplate to access property, etc and jQuery uses it too to manipulate the DOM. Gee, I've looked on other template engines and most of them uses the dollar sign :(.
Any alternative template engine for ASP.Net MVC? I wanted to retain jQuery because MSFT announced that it will used in the Visual Studio (2008?)
Thanks in Advance :)
Update
Please go to the answer in ASP.NET MVC View Engine Comparison question for a comprehensive list of Template engine for ASP.NET MVC, and their pros and cons
Update 2
At the end I'll just put the JavaScript code, including JQuery, in a separate script file, hence I wouldn't worry about the $ mingling in the template file.
Update 3
Changed the Title to reflect what I need to resolve. After all "The Best X in Y" is very subjective question.
You can of course move your js logic into a .js file. But if you want it inline with your StringTemplate views, you can escape it using the \$ construct.
In addition, you can simply use the jQuery("selector"), instead of $("selector") construct if you want to avoid the escaping syntax.
Here's a good article on using StringTemplate as a View Engine in MVC.
There's also an accompanying OpenSource engine, along with some samples.
Also, as mentioned above, you can modify your Type Lexer. (make it an alternate character to the $).
I would highly recommend Spark. I've been using it for awhile now with jQuery and haven't ran into a single issue so far.
JQuery can be disambiguated by using the jQuery keyword like this:
jQuery(
instead of this:
$(
I would consider this a best practice. It eliminates any possibility of clashing with another library, and makes the code more readable.
Perhaps jQuery.noConflict will work for you
Have a look at the mvccontrib project. They have 4 different view engines at the moment which are brail, nhaml, nvelocity and xslt.
http://www.codeplex.com/MVCContrib
In case you want to stick with StringTemplate (ST) see this article from the ST wiki. You may also change the behaviour totally by editing Antlr.StringTemplate.Language\DefaultTemplateLexer.cs and replacing the "$" with what you want.
I really like the syntax in Django, so I recommend NDjango :)
Have you tried $$ or /$ to escape the dollar signs in string template? I'm not sure about ST specifically but thats how most template engines work.
As for other templating engines, I really loved nVelocity when I used it on a project.
JsonFx.NET has a powerful client-side templating engine with familiar ASP.NET style syntax. The entire framework is specifically designed to work well with jQuery and ASP.NET MVC. You can get examples of how to build real world UI from: http://code.google.com/p/jsonfx-examples/
I've been using ANTLR StringTemplate for ASP.NET MVC project. However what I did was to extend the StringTemplate grammar (template.g) to recognize '%' (aspx.template.g) as delimiters. You can find these files if you download the StringTemplate.net version. I generated the corresponding files: AspxTemplateLexer.cs, AspxTemplateParser.cs, AspxTemplateParserTokenTypes.cs and AspxTemplateParserTokenTypes.txt.
In addition I altered StringTemplateLoader.cs to recognize the extensions .aspx and .ascx which Visual Studio recognizes. This way I am not stuck with the .st extension and clients don't know the difference.
Anyway after rebuilding StringTemplate I have the behavior that I want. What I like about StringTemplate is that it does NOT permit ANY code to be embedded in the template. It looks like Spark like the default ASP/MVC template is code permissive which makes the templates less portable.
I would prefer is "<%" and "%>" as delimiters but unfortunately the ANTLR grammar seems somewhat difficult and fragile to alter unless someone else has done it. On the other had StringTemplate has a great support community and a great approach to separation -- which is the point of MVC.
You could try jsRepeater.
You may need this .NET Template Engine. If you wish to use '$' character, simply use '$$'. See the code below:
{%carName = "Audi R8"/}
{%string str = "This is an $carName$"/}
$str$
$$str$$
the output will be
This is an Audi R8
$str$
If I understand StringTemplate version 4 correctly you can define your own escape char in Template (or TemplateGroup) constructor.
Found Mustache to be the most fool-proof, easiest-to-use, lightest full-featured templating engine for .Net projects (Web and backend)
Works well with .Net 3.5 (meaning it does not need dynamic type and .Net 4.0 to work for mixed type models, like Razor).
The part that I like the most is ability to nest arbitrary IDicts within and have the engine do the right thing. This makes the mandatory-for-all engines reboxing step super-simple:
var child = new {
nested = "nested value"
};
var parent = new {
SomeValue = "asdfadsf"
, down = child
, number = 123
};
var template = #"This is {{#down}}{{nested}}{{/down}}. Yeah to the power of {{number}}";
string output = Nustache.Core.Render.StringToString(template,parent);
// output:
// "This is nested value. Yeah to the power of 123"
What's most beautiful about Mustache is that same exact template works exactly same in pure JavaScript or any other of 20 or so supported languages.

Resources