Skip to content

Instantly share code, notes, and snippets.

@DamianEdwards
Created July 17, 2013 04:00
Show Gist options
  • Save DamianEdwards/6017602 to your computer and use it in GitHub Desktop.
Save DamianEdwards/6017602 to your computer and use it in GitHub Desktop.
Simple way to do async UI loading in ASP.NET Web Forms with standard controls
<%@ 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment