Atashbahar.com

Contains in array list validation attribute for ASP.NET MVC

Atashbahar — Tue, 21 Jun 2016 00:53:00 +0300

Following custom validation attribute checks if the posted value is one of the values available in the list of valida values for that attribute.

using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Globalization;
using System.Linq;

namespace MyWebApplication.Models
{
    public sealed class ContainsAttribute : ValidationAttribute
    {
        private readonly IEnumerable<string> _values;

        public ContainsAttribute(string[] values)
        {
            _values = values;
        }

        public ContainsAttribute(int[] values)
        {
            _values = values.Select(x => x.ToString());
        }

        public ContainsAttribute(double[] values)
        {
            _values = values.Select(x => x.ToString(CultureInfo.InvariantCulture));
        }

        protected override ValidationResult IsValid(object value, ValidationContext validationContext)
        {
            if (value == null)
                return ValidationResult.Success;

            if (_values != null && !_values.Contains(value))
            {
                var valuesString = string.Join(", ", _values.Select(x => $"'{x}'"));
                var message = $"Provided value for {validationContext.MemberName} property is not valid. Valid values are {valuesString}.";
                return new ValidationResult(message);
            }

            return ValidationResult.Success;
        }
    }
}

You can use it like this:

[Contains(new[] { "first value", "second value", "third value" })]
public string MyValue { get; set; }

Add "www" prefix to your website using IIS URL Rewrite

Admin — Wed, 15 Jul 2015 03:03:00 +0300

You can use following URL Rewrite rule to force all URLs in your website to start with "www":

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
    <rewrite>
        <rules>
              <rule name="Add WWW" stopProcessing="true">
              <match url="^(.*)$" />
              <conditions>
                 <add input="{HTTP_HOST}" pattern="^(?!www\.)(.*)$" />
              </conditions>
              <action type="Redirect" url="http://www.{C:0}{PATH_INFO}" redirectType="Permanent" />
           </rule>
        </rules>
    </rewrite>
</system.webServer>

Multiple indexes over an in memory collection for faster search

Admin — Sun, 21 Sep 2014 13:12:00 +0300

I have a big in-memory collection of following simplified class:

public class Product 
{
    public int Id { get; set; }
    public string UserName { get; set; }
    public int CategoryId { get; set; }
    public string Title { get; set; }
    public string Description { get; set; }
}

I need to search for products based on different properties like UserName or CategoryId. One way of searching would be using linq to objects like:

var userProducts = products.Where(x => x.UserName == "SomeValue")

This takes some processing when collection is too big and in my case it would be called hundreds of time each second.

What I came up with was to introduce a new collection that supports indexing over different properties:

public class FastCollection<T> : IEnumerable<T>
{
    private IList<T> _items;
    private IList<Expression<Func<T, object>>> _lookups;
    private Dictionary<string, ILookup<object, T>> _indexes;

    public FastCollection(IList<T> data)
    {
        _items = data;
        _lookups = new List<Expression<Func<T, object>>>();
        _indexes = new Dictionary<string, ILookup<object, T>>();
    }

    public void AddIndex(Expression<Func<T, object>> property)
    {
        _lookups.Add(property);
        _indexes.Add(property.ToString(), _items.ToLookup(property.Compile()));
    }

    public void Add(T item)
    {
        _items.Add(item);
        RebuildIndexes();
    }

    public void Remove(T item)
    {
        _items.Remove(item);
        RebuildIndexes();
    }

    public void RebuildIndexes()
    {
        if (_lookups.Count > 0)
        {
            _indexes = new Dictionary<string, ILookup<object, T>>();
            foreach (var lookup in _lookups)
            {
                _indexes.Add(lookup.ToString(), _items.ToLookup(lookup.Compile()));
            }
        }
    }

    public IEnumerable<T> FindValue<TProperty>(Expression<Func<T, TProperty>> property, TProperty value)
    {
        var key = property.ToString();
        if(_indexes.ContainsKey(key))
        {
            return _indexes[key][value];
        }
        else
        {
            var c = property.Compile();
            return _items.Where(x => c(x).Equals(value));
        }
    }

    public IEnumerator<T> GetEnumerator()
    {
        return _items.GetEnumerator();
    }

    System.Collections.IEnumerator System.Collections.IEnumerable.GetEnumerator()
    {
        return GetEnumerator();
    }
}

You can initialize the collection like this:

var fc = new FastCollection<Product>(products);
fc.AddIndex(x => x.Id);
fc.AddIndex(x => x.UserName);
fc.AddIndex(x => x.CategoryId);

And finally you can search the collection like this:

var userProducts = gc.FindValue(x => x.UserName, "SomeValue");

The fast collection makes a big difference when it comes to performance.

Native apps vs. web apps; Are web apps there yet?

Atashbahar — Sun, 29 Sep 2013 22:57:00 +0300

I think we have heard this argument a lot recently. These days there is an app for everything. But is it really necessary? Should everything be an app? What about web apps? Can web apps offer the same functionality as native apps?

Native apps are a must have when you want to access the native functionality of the device or need all the raw power a device can offer.

Web standards have grown a lot in recent years and browser’s adoption of standards is getting better and better especially on handheld devices.

Benefit of having web applications is the big range of devices and platforms you can reach without doing any change. You can design and code your website to be accessible on huge range of devices. From desktop browsers to mobile browsers and even big screen tvs.

Another big benefit would be discoverability by search engines. This is especially useful for websites that generate content and have a big user base.

Recently I have been involved in developing eCardCanvas.com website. The concept is very simple. Allow users to create and share greeting cards. But there were a few requirements that made it a little challenging. It must use no Flash and be accessible on handheld devices.

No Flash part made it obvious we have to use html5 canvas. Html5 canvas is very well supported on all modern browsers and is very rich in the functionality.

By using responsive design we were able to offer the same desktop experience on handheld devices. It was a bit challenging to optimize the card editor functionality for mobile devices but I think we did a good job in that area.

Feel free to check the website at eCardCanvas.com and try our card editor eCardCanvas.com/editor. Your input is welcome and highly appreciated.

To go back to the original argument, you might not get the same performance you are getting in a native app but in most cases it is enough to offer a good user experience. And when you count in other benefits of having web as your platform it even gets more appealing.

ASP.NET MVC CSS Bundling Pitfalls

Atashbahar — Tue, 23 Jul 2013 00:51:00 +0300

This might seem obvious to some but I think it is still worth mentioning.

You should always bundle CSS files that are in the same folder and the Virtual Path of that bundle must match that folder’s path. For example if you are bundling multiple CSS files in "~/Content/CSS/" folder, your bundle’s Virtual path should be something like "~/Content/CSS/All".

The reason being images inside CSS files are relative to the location of the CSS file. So if the virtual path doesn’t match the CSS file location images won’t load.

Make your PNG images even smaller with PngOptimzer!

Atashbahar — Wed, 27 Jul 2011 12:39:00 +0300

While ago I found this amazing tool that optimizes PNG images and reduces the size effectively. I use Adobe Fireworks to create lots of PNG images for my work and using this tool makes them much smaller in size.

PngOptimizer is free and using it is very simple. Just drag-n-drop your files over the application and they get optimized!

ASP.NET MVC tab-based navigation

Atashbahar — Thu, 16 Dec 2010 09:08:00 +0300

First of all this is not one of those JavaScript tab navigation scripts. Actually we are going to use no JavaScript.

Each tab is going to be linked to an ASP.NET MVC controller action. This is how end result is going to look like:

And here is the sample website I have created which contains everything you need:

Download Sample Website (15KB)

So how exactly this works?

We have a HTML helper method named SimpleNav that renders the HTML to the master page. This is how it is called:

<div id="menubar">
    <%= Html.SimpleNav(new[] {
        new SimpleNavItem{Text="Home", Action="Index", Controller = "Home"},
        new SimpleNavItem{Text="Blog", Action="Index", Controller = "Blog", GetSelected = ((a, c) => (c == "Blog"))},
        new SimpleNavItem{Text="About", Action="About", Controller = "Home", GetSelected = ((a, c) => c == "Home" && a == "About")},
        new SimpleNavItem{Text="Contact", Action="Contact", Controller = "Home", GetSelected = ((a, c) => c == "Home" && a == "Contact")}
    }) %>  
</div>

The code for this helper method is very straightforward. It simply generates an unordered list of links:

public static string SimpleNav(this HtmlHelper html, IEnumerable<SimpleNavItem> navItems)
{
    var urlHelper = new UrlHelper(html.ViewContext.RequestContext);
    string controller = html.ViewContext.RouteData.Values["controller"].ToString();
    string action = html.ViewContext.RouteData.Values["action"].ToString();

    TagBuilder ul = new TagBuilder("ul");
    ul.AddCssClass("clearfix");

    StringBuilder listBuilder = new StringBuilder();
    TagBuilder li = null;
    TagBuilder a = null;
    foreach (var item in navItems)
    {
        a = new TagBuilder("a");
        a.Attributes.Add("href", urlHelper.Action(item.Action, item.Controller));
        a.InnerHtml = item.Text;

        li = new TagBuilder("li");
        if (item.GetSelected != null && item.GetSelected(action, controller))
            li.AddCssClass("sel");
        li.InnerHtml = a.ToString();

        listBuilder.Append(li.ToString());
    }

    ul.InnerHtml = listBuilder.ToString();

    return ul.ToString();
}

public class SimpleNavItem
{
    public string Text { get; set; }
    public string Action { get; set; }
    public string Controller { get; set; }
    public Func<string, string, bool> GetSelected { get; set; }
}

The interesting part of the above code may be GetSelected which is an anonymous method. You might want a tab gets highlighted on certain conditions for example highlight the Blog tab for all Actions of the related Controller. The method accepts two Strings which are name of the current Controller and Action and returns a Boolean which indicated if the tab should be highlighted or not.

The final step which I like the most is to make it pretty. By using a simple background image and a small amount of CSS magic you can easily achieve this:

#menubar {
    border-bottom: solid 3px #8CC740;
    padding-left: 10px;
}
#menubar li {
    display: inline;
}
#menubar li a {
    float: left;    
    line-height: 21px;
    width: 80px;
    margin-right: 1px;
    background: url(tabs.gif) no-repeat 0px 0px;    
    color: #444;    
    text-align: center;
    text-decoration: none;
}
#menubar li a:hover {
    background-position: 0px -22px;
    text-decoration: none;
}
#menubar li.sel a {
    background-position: 0px bottom;
    color: #fff;
}

This may not be the most complete solution but it has helped me in so many projects. Hopefully it does the same for you.

Detect when a JavaScript popup window gets closed

Atashbahar — Tue, 27 Apr 2010 13:05:00 +0300

A while ago in one of my projects I came into this problem that I wanted to detect when a child window that is created with window.open method gets closed.

As you know it is possible to call a JavaScript function in parent page from a popup window using parent.[JavaScript-Method-Name]. But this didn't work for me because the page I was opening was from another domain and couldn't modify its content.

Unfortunately the popup window does not have any close event that you can listen to but there is a closed property that is true when window gets closed. So the solution I came up with was to start a timer and check the closed property of the child window every second and clear the timer when the window gets closed. Here is the code:

var win = window.open('http://www.google.com', 'google','width=800,height=600,status=0,toolbar=0'); 
var timer = setInterval(function() { 
    if(win.closed) {
        clearInterval(timer);
        alert('closed');
    }
}, 1000);

Hope this helps.

Can we build a document-sharing website like Scribd with .Net?

Atashbahar — Sun, 26 Jul 2009 07:47:00 +0300

This is a question I had in my mind for a while. I was very interested to know how document-sharing websites work in general and if it is possible to build one using .Net and other free and open source technologies.

After spending one Internet, readay searching through dig bnlogs and forums I came to the conclusion that it is possible! At least in theory it is possible.

What websites like Scribd do is that they allow their users to upload documents in various formats, then this documents will be shown in a control that is implemented using Adobe Flash. So they convert documents from various formats to Adobe Flash but how they do it and what goes on behind the scene?

I will try to explain different steps of the process and show you with which tool you can do the same with .Net. Just before we start this is not something official about how Scribd or any other websites of this type work, this is only how I think they work and how it is possible to do the same.

Step 1: Convert documents from various formats to PDF

OpenOffice supports various formats (including Microsoft Office formats) and it can export them to PDF format which is what we need.

So we have the tool but how to call it from our code. Luckily there is a great article in CodeProject which solves this problem in an elegant way. This article provides solution alongside the necessary code to easily call OpenOffice to convert documents to PDF format.

Step 2: Index document contents to be able to search through them

Another aspect of document-sharing sites is search. They allow their users to search for documents using keywords. They store hundreds of thousands of documents so having a proficient searching mechanism is very important.

To index documents we need to extract text from the documents. In first step we convert all documents to PDF, so we need to find a way to extract text from PDF files. One way to do this is to use the IFilter interface which was designed by Microsoft for use in its Indexing Service. You can find a great article in CodeProject named Using IFilter in C# which describes how you can use them to extract text from various document formats (which PDF is one of them).

After extracting text we need a tool for index the extracted text and also be able to search through this index in a proficient way. I have been using Lucene.Net which is a port of famous Lucene library for a while and I can say it is amazingly fast and also easy to use. Lucene.Net is exactly what we want here. It has all the necessary features to index the extracted text from documents and search through them very fast.

Step 3: Create thumbnails for the documents

This may look unnecessary but all of document-sharing websites have it and I think it’s cool. There are commercial libraries for .Net that allow you to create an image from pages of a PDF document. But we are looking for a free solution here so using commercial components is not an option.

Ghostscript has the ability to raster PDF files. What we need is a .Net wrapper that can call it. There are many implementations that can be easily found by doing a simple search using your favorite search engine. GhostscriptSharp is one of them.

Step4: Convert the PDF files to Adobe Flash

SWFTools is a collection of utilities which one of them is PDF2SWF. PDF2SWF is a command line utility which simply converts your PDF to SWF. I couldn't find a .Net wrapper for this utility but calling a command line program from .Net is very easy.

After the conversion is done we get a SWF file of our PDF that simply is a collection of pages with no navigation. PDF2SWF provides the option to combine a simple navigation UI with the generated SWF but I think it would be better to use a more advanced viewer like SWF Document Viewer and customize it based on your needs.

Conclusion

I think the answer to this article title is yes and we can build such a website. I have not tried to do so but it seems we have all the tools necessary to do so.

I would be glad to hear your thoughts about this and if anyone has tried this approach. I would also like to hear about alternate ways of doing each step in the process.

Converting Multipage TIFF image to PDF

Atashbahar — Thu, 30 Apr 2009 06:55:00 +0300

I thought I share this with you because I spent some time before finding the solution. What I wanted to do is to simply convert a multipage TIFF image to a PDF file. I wanted this for an ASP.NET project.

TallPDF does this but you have to pay a lot for a simple task (TallPDF does other things too though!). After some searching came to the conclusion that PDF Creation Libraries are my best option here. There are a few for .NET including iTextSharp, PDFsharp and PDF Clown. I used iTextSharp because it has a sample that was showing how to create a PDF file from a multipage TIFF image (exactly what I wanted).

Here is the code that does the conversion:

            // creation of the document with a certain size and certain margins
            iTextSharp.text.Document document = new iTextSharp.text.Document(iTextSharp.text.PageSize.A4, 0, 0, 0, 0);
            
            // creation of the different writers
            iTextSharp.text.pdf.PdfWriter writer = iTextSharp.text.pdf.PdfWriter.GetInstance(document, new System.IO.FileStream(Server.MapPath("~/App_Data/result.pdf"), System.IO.FileMode.Create));

            // load the tiff image and count the total pages
            System.Drawing.Bitmap bm = new System.Drawing.Bitmap(Server.MapPath("~/App_Data/source.tif"));
            int total = bm.GetFrameCount(System.Drawing.Imaging.FrameDimension.Page);

            document.Open();
            iTextSharp.text.pdf.PdfContentByte cb = writer.DirectContent;
            for (int k = 0; k < total; ++k)
            {
                bm.SelectActiveFrame(System.Drawing.Imaging.FrameDimension.Page, k);
                iTextSharp.text.Image img = iTextSharp.text.Image.GetInstance(bm, System.Drawing.Imaging.ImageFormat.Bmp);
                // scale the image to fit in the page
                img.ScalePercent(72f / img.DpiX * 100);
                img.SetAbsolutePosition(0, 0);
                cb.AddImage(img);
                document.NewPage();
            }
            document.Close();

As you can see it is very simple and straightforward.

Stream contents of a folder to output as a zip file

Atashbahar — Sat, 14 Feb 2009 12:09:00 +0300

You have all seen "Download All" feature of popular email providers like Yahoo! And Gmail that allows you to download multiple attachments as a single zip file.

Recently we needed something like that in one of our projects. We wanted to download contents of a folder as a zip file. It was very important to stream the compressed result to the client as we were compressing them on the server.
You may say that you could have zipped the folder on server so users could download it directly, but that was not an option in our case because contents of the folder were changing always.

When comes to compression for .NET, SharpZipLib is one of the best options you got. At start I thought solving this problem is not going to be very easy but I was in luck because SharpZipLib has a special class name FastZip that was exactly what I was looking for. FastZip class has a CreateZip method that has few overloads. One of the overloads gets an output stream and a path to a folder on disk; what it does is to send the compressed contents of the folder to output stream. This was exactly what I was looking for so I created static DownloadFolder method in my Utility class that accepts two parameters; first one is the path to the folder that we want to zip and second parameter is of type HttpResponse. We use HttpResponse OutputStream to send the zipped content to user. Here is the code for this method:

using System;
using System.Web;

public static class Utility
{
    public static void DownloadFolder(string path, HttpResponse res)
    {
        // cleat the response so we don't send any unwanted data to user
        res.Clear();
        // set the content type ZIP file
        res.ContentType = "application/zip";
        // setting Content-Disposition to attachement causes the save dialog of the 
        // browser to be shown. We also can set the name of the zip file in this header
        res.AppendHeader("Content-Disposition", "attachment; filename=Download.zip;");
        // it is very important to set BufferOutput to false. Default behavior is to buffer
        // the output before sending it to client and this is not the behavior we want
        res.BufferOutput = false;
        // flush the response so user will get the save dialog as soon as possible
        res.Flush();

        // FastZip is the easies way to zip all the file and folders in the
        // path and stream it through the Response OutputStream
        ICSharpCode.SharpZipLib.Zip.FastZip fz = new ICSharpCode.SharpZipLib.Zip.FastZip();
        fz.CreateZip(res.OutputStream, path, true, null, null);
    }
}

Using this method is very easy. You have two options one is to create an Http Handler; Users download the zipped content by access its address (for example by clicking a link that points to it).

using System;
using System.Web;

public class DownloadAll : IHttpHandler {
       
    public void ProcessRequest (HttpContext context) 
    {
        Utility.DownloadFolder(context.Server.MapPath("~/App_Data/Storage"), context.Response);
    }
 
    public bool IsReusable {
        get {
            return true;
        }
    }
}

Second method is to use it inside your ASPX page, for example when you click a button on your page. Here's how it is done:

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

    protected void Page_Load(object sender, EventArgs e)
    { }

    protected void btnDownload_Click(object sender, EventArgs e)
    {
        Utility.DownloadFolder(Server.MapPath("~/App_Data/Storage"), Response);
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Download All</title>    
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Button ID="btnDownload" runat="server" Text="Download All" onclick="btnDownload_Click" />
        <br />
        <a href="DownloadAll.ashx">Download All</a>
    </div>
    </form>
</body>
</html>

Well, that's it for now! As you can see it was very easy to do something that looked a little hard at start all thanks to SharpZipLib library.

ASP.NET GridView makeover using CSS

Atashbahar — Fri, 23 Jan 2009 10:11:00 +0300

I use ASP.NET GridView in my projects a lot. It is a great control with powerful functionality that can be customized in many ways. GridView has many settings that you can use to alter its look and also offers you some predefined formats that you can use (you can access them by clicking Auto Format link on the bottom of GridView properties panel). What formats do is to modify different styling properties of the GridView such as row style, alternate row style, header style and so on.

What is the problem?

Modifying different styling properties of the GridView control to create a custom look may be simple but has a few problems. The biggest problem is the styling information will be included in the generated html and that causes the resulting page size to be bigger. Another problem is that you have to modify a lot of properties to find a look that satisfies you. Also later if you want to do a change in the look of GridView you have to modify all instances of the controls in your website.

The Solution

The good news is that you can use CSS to control the look of the GridView easily. You will add a few hooks to the GridView control and you are ready to write some CSS to completely change the look of the control. I have created a sample website to demonstrate this; you can download it from the link below.

Download Sample Website (10KB)

Modifying GridView look is very easy using CSS. By spending a little time you can create really cool styles that can reuse in your projects easily. Following picture is a screen shot of the final result of this article.

Implementation

Here's the GridView control syntax in our ASP.NET page. The only properties that we need to change to provide the custom look are CssClass, PagerStyle-CssClass and AlternatingRowStyle-CssClass.

<asp:GridView ID="gvCustomres" runat="server"
    DataSourceID="customresDataSource" 
    AutoGenerateColumns="False"
    GridLines="None"
    AllowPaging="true"
    CssClass="mGrid"
    PagerStyle-CssClass="pgr"
    AlternatingRowStyle-CssClass="alt">
    <Columns>
        <asp:BoundField DataField="CompanyName" HeaderText="Company Name" />
        <asp:BoundField DataField="ContactName" HeaderText="Contact Name" />
        <asp:BoundField DataField="ContactTitle" HeaderText="Contact Title" />
        <asp:BoundField DataField="Address" HeaderText="Address" />
        <asp:BoundField DataField="City" HeaderText="City" />
        <asp:BoundField DataField="Country" HeaderText="Country" />
    </Columns>
</asp:GridView>
<asp:XmlDataSource ID="customresDataSource" runat="server" DataFile="~/App_Data/data.xml"></asp:XmlDataSource>

The CSS to provide the custom look is very short and you can change the view and create new looks really easy.

.mGrid { 
    width: 100%; 
    background-color: #fff; 
    margin: 5px 0 10px 0; 
    border: solid 1px #525252; 
    border-collapse:collapse; 
}
.mGrid td { 
    padding: 2px; 
    border: solid 1px #c1c1c1; 
    color: #717171; 
}
.mGrid th { 
    padding: 4px 2px; 
    color: #fff; 
    background: #424242 url(grd_head.png) repeat-x top; 
    border-left: solid 1px #525252; 
    font-size: 0.9em; 
}
.mGrid .alt { background: #fcfcfc url(grd_alt.png) repeat-x top; }
.mGrid .pgr { background: #424242 url(grd_pgr.png) repeat-x top; }
.mGrid .pgr table { margin: 5px 0; }
.mGrid .pgr td { 
    border-width: 0; 
    padding: 0 6px; 
    border-left: solid 1px #666; 
    font-weight: bold; 
    color: #fff; 
    line-height: 12px; 
 }   
.mGrid .pgr a { color: #666; text-decoration: none; }
.mGrid .pgr a:hover { color: #000; text-decoration: none; }

I have used three images for header, alternate rows and pager to create a more appealing look. There images are tiled horizontally using CSS to fit the whole row. You can find the images in the sample website code.

Conclusion

Creating custom looks for GridView control is very easy. You can create a completely different look using only a few lines of CSS. You can use the same CSS style for all GridView controls in your project and later if you want to change the look you can do it from one location in your style sheet file.

Combine, minify and compress JavaScript files to load ASP.NET pages faster

Atashbahar — Sun, 18 Jan 2009 05:54:00 +0300

Websites are getting more interactive these days and most of this interactivity comes from JavaScript. People are using different JavaScript libraries and frameworks to make their websites more interactive and user friendly.

What is the problem?

After a while you end up referencing to more than a few JavaScript files in your page and that causes a problem! Your pages will load slower; this happens for two reasons:

You have used too much JavaScript. Total size of JavaScript files in some websites may reach more than 500KB and that's a lot, especially for users with slow connections. The best solution to this problem is to use gzip to compress JavaScript files as we do later in this article.
JavaScript files are loaded one by one after each other by the browser. As you know there is a response time for each request that varies depending on your connection speed and your distance from the server. If you have many JavaScript files in your page these times are added together and cause a big delay when loading a page. I have tried to show this using Firebug (A very popular and necessary FireFox extension for web developers) in the following screenshot.
This is not the case for CSS or image files .If you reference multiple CSS files or images in your page they are loaded together by the browser.
The best solution to this problem is to combine JavaScript files into one big file to remove the delay caused when loading multiple JavaScript files one by one.

What can we do?

The answer is simple! Combine the files and gzip the response. Actually we are going to take few extra steps to create something more useful and reusable. But how we are going to do that?

The easiest way to do this is to use an HTTP Handler that combines JavaScript files and compresses the response. So instead of referencing multiple JavaScript files in our pages we reference this handler like this:

<script type="text/javascript" src="ScriptCombiner.axd?s=Site_Scripts&v=1"></script>

ScriptCombiner.axd is our HTTP Handler here. Two parameters are passed to the handler, s and v. s stands for set name and v stands for version. When you make a change in your scripts you need to increase the version so browsers will load the new version not the cached one.
Set Name indicates list of JavaScript files that are processed by this handler. We save the list in a text file inside App_Data folder. The file contains relative paths to JavaScript files that need to be combined. Here is what Site_Scripts.txt file content should look like:

~/Scripts/ScriptFile1.js
~/Scripts/ScriptFile2.js

Most of work is done inside the HTTP Handler; I try to summarize what happens in the handler:

Load the list of paths JavaScript files from the text files specified by the set name.
Read the content of each file and combine them into one big string that contains all the JavaScript.
Call Minifier to remove comments and white spaces from the combined JavaScript string.
Use gzip to compress the result into a smaller size.
Cache the result for later references so we don't have to do all the processing for each request.

We also take few extra steps to make referencing this handler easier. I have created a sample website to demonstrate the whole process. You can download it from the link below:

Download Sample Website (64KB)

Here is a screenshot of the website opened in solution explorer so you get a better idea of how file are organized in the sample website.

The implementation

I have got most of the code for the handler from Omar Al Zabir article named "HTTP Handler to Combine Multiple Files, Cache and Deliver Compressed Output for Faster Page Load" so most of the credit goes to him.

HTTP Handler contains a few helper methods that their purpose is very clear. I try to describe each shortly.

CanGZip method checks if the browser can support gzip and returns true in that case.

private bool CanGZip(HttpRequest request)
{
    string acceptEncoding = request.Headers["Accept-Encoding"];
    if (!string.IsNullOrEmpty(acceptEncoding) &&
         (acceptEncoding.Contains("gzip") || acceptEncoding.Contains("deflate")))
        return true;
    return false;
}

WriteBytes writes the combined and compresses bytes to the response output. We need to set different content type for response based on if we support gzip or not. The other important part of this method sets the caching policy for the response which tells the browser to cache the response for CACHE_DURATION amount of time.

private void WriteBytes(byte[] bytes, bool isCompressed)
{
    HttpResponse response = context.Response;

    response.AppendHeader("Content-Length", bytes.Length.ToString());
    response.ContentType = "application/x-javascript";
    if (isCompressed)
        response.AppendHeader("Content-Encoding", "gzip");
    else
        response.AppendHeader("Content-Encoding", "utf-8");

    context.Response.Cache.SetCacheability(HttpCacheability.Public);
    context.Response.Cache.SetExpires(DateTime.Now.Add(CACHE_DURATION));
    context.Response.Cache.SetMaxAge(CACHE_DURATION);

    response.ContentEncoding = Encoding.Unicode;
    response.OutputStream.Write(bytes, 0, bytes.Length);
    response.Flush();
}

WriteFromCache checks if we have the combined script cached in memory, if so we write it to response and return true.

private bool WriteFromCache(string setName, string version, bool isCompressed)
{
    byte[] responseBytes = context.Cache[GetCacheKey(setName, version, isCompressed)] as byte[];

    if (responseBytes == null || responseBytes.Length == 0)
        return false;

    this.WriteBytes(responseBytes, isCompressed);
    return true;
}

But most of the work is done inside ProcessRequest method. First we take a look at the method and I will try to explain important parts.

public void ProcessRequest(HttpContext context)
{
    this.context = context;
    HttpRequest request = context.Request;        

    // Read setName, version from query string
    string setName = request["s"] ?? string.Empty;
    string version = request["v"] ?? string.Empty;

    // Decide if browser supports compressed response
    bool isCompressed = this.CanGZip(context.Request);

    // If the set has already been cached, write the response directly from
    // cache. Otherwise generate the response and cache it
    if (!this.WriteFromCache(setName, version, isCompressed))
    {
        using (MemoryStream memoryStream = new MemoryStream(8092))
        {
            // Decide regular stream or gzip stream based on whether the response can be compressed or not
            using (Stream writer = isCompressed ? (Stream)(new ICSharpCode.SharpZipLib.GZip.GZipOutputStream(memoryStream)) : memoryStream)                
            {
                // Read the files into one big string
                StringBuilder allScripts = new StringBuilder();
                foreach (string fileName in GetScriptFileNames(setName))
                    allScripts.Append(File.ReadAllText(context.Server.MapPath(fileName)));

                // Minify the combined script files and remove comments and white spaces
                var minifier = new JavaScriptMinifier();
                string minified = minifier.Minify(allScripts.ToString());

                // Send minfied string to output stream
                byte[] bts = Encoding.UTF8.GetBytes(minified);
                writer.Write(bts, 0, bts.Length);
            }

            // Cache the combined response so that it can be directly written
            // in subsequent calls 
            byte[] responseBytes = memoryStream.ToArray();
            context.Cache.Insert(GetCacheKey(setName, version, isCompressed),
                responseBytes, null, System.Web.Caching.Cache.NoAbsoluteExpiration,
                CACHE_DURATION);

            // Generate the response
            this.WriteBytes(responseBytes, isCompressed);
        }
    }
}

this.WriteFromCache(setName, version, isCompressed) returns true if we have the response cached in memory. It actually writes the data from cache to the response and returns true so we don’t need to take any extra steps.

MemoryStream is used to hold compressed bytes in the memory. In case that browser does not support gzip no compression is done over bytes.

We use SharpZipLib to do the compression. This free library does gzip compression slightly better than .NET. You can easily use .NET compression by replacing line 20 with the following code:

using (Stream writer = isCompressed ?  (Stream)(new GZipStream(memoryStream, CompressionMode.Compress)) : memoryStream)

GetScriptFileNames is a static method that returns a string array of JavaScript file paths in the set name. We will use this method for another purpose that we discuss it later.

JavaScriptMinifier class holds the code for Douglas Crockford JavaScript Minfier. Minifer removes comments and white spaces from JavaScript and results in a smaller size. You can download the latest version from http://www.crockford.com/javascript/jsmin.html.

After we wrote minified and compressed scripts to MemoryStream we insert them into cache so we don’t need to take all these steps for each request. And finally we write the compressed bytes to the response.

Make it a little better

We can take one extra step to make the whole process a little better an easier to use. We can add a static method to our handler that generates JavaScript reference tag. We can make this even better by doing different actions when application is running in debug or release mode. In debug mode we usually don’t want to combine our JavaScript files to track error easier, so we output reference to original files and generate all JavaScript references as if we have included in our page manually.

public static string GetScriptTags(string setName, int version)
{
    string result = null;
#if (DEBUG)            
        foreach (string fileName in GetScriptFileNames(setName))
        {
            result += String.Format("\n<script type=\"text/javascript\" src=\"{0}?v={1}\"></script>", VirtualPathUtility.ToAbsolute(fileName), version);
        }
#else
    result += String.Format("<script type=\"text/javascript\" src=\"ScriptCombiner.axd?s={0}&v={1}\"></script>", setName, version);
#endif
    return result;
}

GetScriptFileNames as described before returns an array of file names for a specified set.

// private helper method that return an array of file names inside the text file stored in App_Data folder
private static string[] GetScriptFileNames(string setName)
{
    var scripts = new System.Collections.Generic.List<string>();
    string setPath = HttpContext.Current.Server.MapPath(String.Format("~/App_Data/{0}.txt", setName));
    using (var setDefinition = File.OpenText(setPath))
    {
        string fileName = null;
        while (setDefinition.Peek() >= 0)
        {
            fileName = setDefinition.ReadLine();
            if (!String.IsNullOrEmpty(fileName))
                scripts.Add(fileName);
        }
    }
    return scripts.ToArray();
}

<%= ScriptCombiner.GetScriptTags("Site_Scripts", 1) %>

So whenever we want to reference a handler in an ASP.NET page we only need to add the following tag inside the head section of our page:

There is a final step you need to take before making all this work. You need to add HTTP Handler to Web.config of your website. To do so make the following changes to your web.config file:

<configuration>
    <system.web>
		<httpHandlers>
			<add verb="POST,GET" path="ScriptCombiner.axd" type="ScriptCombiner, App_Code"/>
		</httpHandlers>
	</system.web>
	<!-- IIS 7.0 only -->
	<system.webServer>
		<handlers>
			<add name="ScriptCombiner" verb="POST,GET" path="ScriptCombiner.axd" preCondition="integratedMode" type="ScriptCombiner, App_Code"/>
		</handlers>
	</system.webServer>
</configuration>

Conclusion

If you search the Internet you will find many similar methods. I have tried to combine the best parts of them to make something more useful. I hope you have enjoyed it.