Mads Kristensen

My personal blog about everything tech

For more than a year, I've been blogging on the excellent dasBlog engine and it has been good. I really like the fact that it runs on XML instead of a database. However, it is written in ASP.NET 1.1 and is quite cumbersome to extend and that's a problem for me, because I have a lot of ideas that I cannot implement.

For the past 6 months or so, I've been thinking about building my own blog engine, but it seemed too time consuming. Then I talked to Michal Talaga and he wanted to join forces. We quickly agreed that the engine also should run on XML but do so within a provider model, so it can easily be changed to run on SQL Server, MySQL or other types of storage.

But before anything is final, we talked about what features it should have. Here is a short list of what we came up with:

  • Written entirely in C# and ASP.NET 2.0
  • Multi user support using the ASP.NET membeship provider model
  • Data store provider model
  • Small in size and source files
  • Plug 'n play implementation (just copy to web server)
  • No third-party assemblies except for FreeTextBox
  • Using ASP.NET themes and skins
  • Easy to extend using plug-ins
  • Events everywhere for plug-ins to use

Besides the development and implementation features we want to include a lot of standard Web 2.0 blog features such as:

The target user for the blog engine is not the typical Blogger or WordPress user, but .NET developers. It will be an easy extendable system if you are a .NET developer. For the not so tech savvy user, it should just be a matter of copy the files to a web server and no more.

Whenever we are done in the near future, the blog engine will be made available for download and it will be open source.

A web page with a data bound GridView control can take a long time to load. The page is not rendered until all the controls are, and the GridView cannot render before data has been retrieved from the database. So, let’s load the GridView asynchronous and make the page load faster and the perceived speed greater.

This little trick is actually very simple and it involves the built-in client callback feature of ASP.NET. Even though I’m not a big fan of that particular feature, it can be quite handy from time to time. The best part of this is that you don’t have to change much to your existing code.

Web page

On the webpage that hosts the GridView control, you have to make 2 small changes.

Step 1. Encapsulate the GridView
The GridView control has to be encapsulated by an HTML control with an id attribute, so that it can be referenced by JavaScript. That is because the GridView does not render when no data is bound to it.

<div id="grid">
 <span>Loading...</span>
 <asp:GridView runat="Server" ID="gvAsync" />
</div>

Step 2. Add a JavaScript
Then a JavaScript is needed to load the rendered and data bound GridView to the HTML control we added in step 1. Place the JavaScript below the GridView’s surrounding div tag.

<script type="text/javascript">
function EndGetData(arg)
{
 document.getElementById("grid").innerHTML = arg;
}

setTimeout("<asp:literal runat="server" id="ltCallback" />", 100);
</script>

Code-behind

In the code-behind file there are three small steps to perform.

Step 3. Implement ICallbackEventHandler
We need to implement the interface to turn on the client callback feature.

public partial class asyncgridview : System.Web.UI.Page, ICallbackEventHandler

Step 4. Bind the call back reference
The literal control placed in the JavaScript function in step 2 has to contain the client callback reference. Add the following to the Page_Load.

if (!Page.IsCallback)
 ltCallback.Text = ClientScript.GetCallbackEventReference(this, "'bindgrid'", "EndGetData", "'asyncgrid'", false);

Step 5. Bind the grid and return the rendered HTML
To finish the asynchronous loading we have to implement the two methods that are defined by the ICallbackEventHandler interface we implemented in step 3. One of the methods binds a DataTable to the GridView and renders the control. The second returns the rendered HTML to the JavaScript method we defined in step 2.

private string _Callback;

public string GetCallbackResult()
{
 return _Callback;
}

public void RaiseCallbackEvent(string eventArgument)
{
 DataTable table = RetrieveDataTableFromDatabase();
 gvAsync.DataSource = table;
 gvAsync.DataBind();

 using (System.IO.StringWriter sw = new System.IO.StringWriter())
 {
  gvAsync.RenderControl(new HtmlTextWriter(sw));
  _Callback = sw.ToString();
 }
}

You can use your present data binding method to bind the GridView. The important part is that the GridView is data bound before the RaiseCallbackEvent method renders the control.

The same technique can be used for all the data control such as the Repeater, FormView and DataList.

Download

asyncgridview.zip (1,21 KB)