Yahoo’s Best Practices for Speeding Up Your Web Site recommends minimizing the number of HTTP requests during the delivery of a webpage because there is a significant amount of overhead during the HTTP request process for each file. Furthermore, CSS and Javascript file sizes can be “minified” by removing unnecessary characters, white space, comments, etc. The downside to combining files and minifying, though, is that it becomes very difficult to debug or maintain minified code. To get the best of both worlds, it is best practice to keep two copies of each file — a combined/minified version (for deployment) and a non-combined, readable version (for development). While this process would be labor-intensive with each build, we can implement a few simple tricks in Visual Studio to automate this process and achieve a faster end-user experience.

Step 1: Download CSSMin and JSMin

Read the rest of this entry » Compiling Multiple CSS and Javascript Files During Buildtime with CSSMin and JSMin in Visual Studio

Controls that are embedded in an ItemTemplate of a GridView can be tricky to reference in Javascript. For example, if you want to pass the ClientID of a textbox to a function, the following example will not work:

<script language="Javascript" type="text/javascript">
function AlertValue(SomeObject) {
    alert(SomeObject.value);
}
</script>
[...]
<asp:gridview ID="GridView1" runat="server">
    <columns>
        <asp:templatefield>
            <itemtemplate>
                <asp:textbox ID="SomeTextbox" runat="server"
                    onclick='AlertValue(document.getElementById("<%# SomeTextbox.ClientID %>");'>
                </asp:textbox>
            </itemtemplate>
        </asp:templatefield>
    </columns>
</asp:gridview>

Why doesn’t it work?
You can’t use ASP.NET’s ClientID property to return the object because the server id ‘SomeTextbox’ is present in every row in the GridView — it’s not unique. You can reference ‘SomeTextbox’ in the code behind using the .FindControl method, but it’s much more involved than the work around below.

Read the rest of this entry » Self-Referencing Controls Within a GridView in Javascript