DamianEdwards/Default.aspx

## Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" %>
<%@ Import Namespace="System.Threading" %>

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        uint viewIndex = 0;
        uint.TryParse(Request.QueryString["view"], out viewIndex);

        views.ActiveViewIndex = (int)(viewIndex < views.Views.Count ? viewIndex : 0);
    }

    public IEnumerable Grid1_GetData()
    {
        // Fake long DB call, never sleep in ASP.NET :)
        Thread.Sleep(TimeSpan.FromSeconds(5));

        return new[] {
                new { FirstName = "Damian", LastName="Edwards", Title="Senior Program Manager" },
                new { FirstName = "Levi", LastName="Broderick", Title="Senior SDE" },
                new { FirstName = "Scott", LastName="Hanselman", Title="Principal Program Manager" }
            };
    }

    public IEnumerable Grid2_GetData()
    {
        // Fake long DB call, never sleep in ASP.NET :)
        Thread.Sleep(TimeSpan.FromSeconds(10));

        return new[] {
                new { FirstName = "Scott", LastName="Hunter", Title="Principal Program Manager Lead" },
                new { FirstName = "Eilon", LastName="Lipton", Title="Principal Development Manager" }
            };
    }
</script>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <style>
        body {
            font-family: Calibri, Arial, Helvetica, Sans-serif;
        }

        iframe {
            display: none;
            border: none;
        }

            iframe.loaded {
                display: block;
            }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:MultiView runat="server" ID="views" ActiveViewIndex="0">
                <asp:View runat="server">
                    <%--Initial page load--%>
                    <h3>Static Content</h3>
                    <p>I am static content and will load immediately!</p>

                    <h3>Peons (5s query)</h3>
                    <div>
                        <p class="loading">loading peons...</p>
                        <iframe src=".?view=1"></iframe>
                    </div>

                    <h3>Manager Types (10s query)</h3>
                    <div>
                        <p class="loading">loading managers...</p>
                        <iframe src=".?view=2"></iframe>
                    </div>

                    <script>
                        var iframes = document.querySelectorAll("iframe"),
                            iframe;

                        for (var i = 0; i < iframes.length; i++) {
                            iframe = iframes[i];
                            iframe.addEventListener("load", (function (f) {
                                return function () {
                                    f.parentNode.removeChild(f.previousElementSibling);
                                    f.className = "loaded";
                                };
                            })(iframe), false);
                        }
                    </script>
                </asp:View>

                <asp:View runat="server">
                    <%--Grid 1 content--%>
                    <asp:GridView runat="server" SelectMethod="Grid1_GetData"></asp:GridView>
                </asp:View>

                <asp:View runat="server">
                    <%--Grid 2 content--%>
                    <asp:GridView runat="server" SelectMethod="Grid2_GetData"></asp:GridView>
                </asp:View>
            </asp:MultiView>
        </div>
    </form>
</body>
</html>
	<%@ Page Language="C#" AutoEventWireup="true" %>
	<%@ Import Namespace="System.Threading" %>

	<script runat="server">
	protected void Page_Load(object sender, EventArgs e)
	{
	uint viewIndex = 0;
	uint.TryParse(Request.QueryString["view"], out viewIndex);

	views.ActiveViewIndex = (int)(viewIndex < views.Views.Count ? viewIndex : 0);
	}

	public IEnumerable Grid1_GetData()
	{
	// Fake long DB call, never sleep in ASP.NET :)
	Thread.Sleep(TimeSpan.FromSeconds(5));

	return new[] {
	new { FirstName = "Damian", LastName="Edwards", Title="Senior Program Manager" },
	new { FirstName = "Levi", LastName="Broderick", Title="Senior SDE" },
	new { FirstName = "Scott", LastName="Hanselman", Title="Principal Program Manager" }
	};
	}

	public IEnumerable Grid2_GetData()
	{
	// Fake long DB call, never sleep in ASP.NET :)
	Thread.Sleep(TimeSpan.FromSeconds(10));

	return new[] {
	new { FirstName = "Scott", LastName="Hunter", Title="Principal Program Manager Lead" },
	new { FirstName = "Eilon", LastName="Lipton", Title="Principal Development Manager" }
	};
	}
	</script>

	<!DOCTYPE html>
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head id="Head1" runat="server">
	<title></title>
	<style>
	body {
	font-family: Calibri, Arial, Helvetica, Sans-serif;
	}

	iframe {
	display: none;
	border: none;
	}

	iframe.loaded {
	display: block;
	}
	</style>
	</head>
	<body>
	<form id="form1" runat="server">
	<div>
	<asp:MultiView runat="server" ID="views" ActiveViewIndex="0">
	<asp:View runat="server">
	<%--Initial page load--%>
	<h3>Static Content</h3>
	<p>I am static content and will load immediately!</p>

	<h3>Peons (5s query)</h3>
	<div>
	<p class="loading">loading peons...</p>
	<iframe src=".?view=1"></iframe>
	</div>

	<h3>Manager Types (10s query)</h3>
	<div>
	<p class="loading">loading managers...</p>
	<iframe src=".?view=2"></iframe>
	</div>

	<script>
	var iframes = document.querySelectorAll("iframe"),
	iframe;

	for (var i = 0; i < iframes.length; i++) {
	iframe = iframes[i];
	iframe.addEventListener("load", (function (f) {
	return function () {
	f.parentNode.removeChild(f.previousElementSibling);
	f.className = "loaded";
	};
	})(iframe), false);
	}
	</script>
	</asp:View>

	<asp:View runat="server">
	<%--Grid 1 content--%>
	<asp:GridView runat="server" SelectMethod="Grid1_GetData"></asp:GridView>
	</asp:View>

	<asp:View runat="server">
	<%--Grid 2 content--%>
	<asp:GridView runat="server" SelectMethod="Grid2_GetData"></asp:GridView>
	</asp:View>
	</asp:MultiView>
	</div>
	</form>
	</body>
	</html>