Starting out with ASP.Net Ajax and the Ajax Control Toolkit
So only javascript gurus can make slick Ajax-enabled web pages, right? Wrong! Want to know the dirty little secret? It's actually really easy!
If you are not using Ajax already on your ASP.Net pages, here's a great place to start. It's always bothered me how on something as simple as paging and sorting on a GridView caused a full postback. Wrap that sucker in an UpdatePanel and you’ve instantly Ajax-enabled your page! By including the declaration ChildrenAsTriggers="true" (or not declaring it at all – it’s the default option), any postback event triggered in the UpdatePanel will automatically cause the page to partially re-render its contents. That’s it! No javascript needed. Well, actually there’s a ton of javascript involved – just none of it written by you. 
First off, you need a couple of resources to get started. If you are using the 3.5 version of the framework, ASP.Net Ajax is already included by default. If you are using .Net 2.0, you will need to download the ASP.Net Ajax Extensions 1.0 (could they make it *any* more confusing?).
I am using the Ajax Control Toolkit to perform the animations during the partial post-back. The Ajax Control Toolkit has a nice set of tools to use to help you build rich web UIs, and as Clark Howard would say, "Hey, it's free!!!!" In the example below, I am using the UpdatePanelAnimationExtender to declaratively set a FadeOut animation to occur on the div container surrounding the UpdatePanel as the page posts back, and a FadeIn animation as it re-renders.
OK, so I lied. I am actually using a little javascript to dynamically show a spinning loading image centered on the grid during the postback. But, again, the ASP.Net Ajax library to the rescue! It makes our life a lot easier by providing all sorts of nice javascript shortcuts that are cross-browser compatible (like the Sys.UI.DomElement.getBounds() call I’m using).
Oh, you need to check out this site that will generate a custom loading image for you. Make sure you select a transparent background when you build your image.
Here is the code:
<!-- loading image is hidden by default -->
<img id="imgLoading" src="images/ajax-loader.gif" alt="Loading..." width="30" height="30"
style="display: none;" />
<div id="container">
<asp:UpdatePanel ID="updPnl" runat="server" ChildrenAsTriggers="true">
<ContentTemplate>
<asp:GridView ID="gvw" runat="server" CssClass="grid"
HeaderStyle-CssClass="header" AutoGenerateColumns="false" RowStyle-CssClass="odd"
AllowPaging="true" AllowSorting="true" AlternatingRowStyle-CssClass="even">
<Columns>
<asp:BoundField SortExpression="ID" HeaderText="ID" DataField="ID" />
<asp:BoundField SortExpression="Name" HeaderText="Name" DataField="Name" />
<asp:BoundField SortExpression="BirthDate"
HeaderText="Date Of Birth" DataField="BirthDate" />
</Columns>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<ajaxToolkit:UpdatePanelAnimationExtender ID="animator" runat="server" TargetControlID="updPnl">
<Animations>
<OnUpdating>
<Sequence>
<!-- shows the loading image in the center of our grid -->
<ScriptAction Script="showInProcessImage($get('imgLoading'), $get('container'));" />
<Parallel duration=".10" Fps="30">
<FadeOut AnimationTarget="container" minimumOpacity="0" />
</Parallel>
</Sequence>
</OnUpdating>
<OnUpdated>
<Sequence>
<Parallel duration=".25" Fps="30">
<FadeIn AnimationTarget="container" minimumOpacity="0" />
</Parallel>
<!-- hides the loading image -->
<ScriptAction Script="hideInProcessImage($get('imgLoading'));" />
</Sequence>
</OnUpdated>
</Animations>
</ajaxToolkit:UpdatePanelAnimationExtender>
And the javascript:
<script language="javascript" type="text/javascript">
// show the image in the center of the container
function showInProcessImage(img, container) {
// get the bounds of both the container and the image
var containerBounds = Sys.UI.DomElement.getBounds(container);
var imgBounds = Sys.UI.DomElement.getBounds(img);
// figure out where to position the element (the center of the container)
var x = containerBounds.x +
Math.round(containerBounds.width / 2) - Math.round(imgBounds.width / 2);
var y = containerBounds.y +
Math.round(containerBounds.height / 2) - Math.round(imgBounds.height / 2);
// set the position of the in progress image
Sys.UI.DomElement.setLocation(img, x, y);
// finally un-hide it
img.style.display = '';
}
// hide the image
function hideInProcessImage(img) {
img.style.display = 'none';
}
</script>
I've left out the details of actually handling the paging and sorting events on the GridView. I assume you are doing that already (or know how to do it).
One more thing to keep in mind - even though you are partially rendering the screen, you are still hitting the server (and your code-behind page). On your partial post-backs, don't perform any extra work in the code-behind that's not going to be rendered in the update panel (e.g. hitting the DB, populating drop-down lists, setting headings, etc.). And don’t be fooled into thinking that Ajax-enabled web apps take a significant burden off the server. If they are designed to be too "chatty", they can even make things worse!
Thursday, April 10, 2008 9:42:23 PM (Eastern Standard Time, UTC-05:00) 
.Net | Ajax | Ajax Control Toolkit | ASP.Net
Miado is out on CodePlex
I have been refining some data access code that I have used on a bunch of my projects to the point where I've made it fairly generic. I decided to publish it as a project on CodePlex. I just put the initial release out today. If you are interested, please take a moment to check it out and give me any feedback. Keep in mind, I wrote this specifically for those people who have (or want) to use straight SQL and ADO.Net in their data access layer. So if you want to use LINQ, Nhibernate, Subsonic, etc... they are absolutely great tools, but they try to hide/remove the SQL from your code, whereas this project just makes it much easier for those who use SQL.
Here is an example of how to use it to create a collection of custom business objects:
// ideally this declaration would be buried in your base DAO class
// or injected via an IoC container
IDbConfigurable dbConfig = new DbConfiguration(SqlClientFactory.Instance, connString);
IDbStatement dbStmt = new DbStatement(dbConfig);
ICollection<Address> addresses =
dbStmt.LoadSql("SELECT AddressId, Address1, Address2, City, State, ZipCode " +
"FROM Address WHERE City = @City")
.AddParameter("City", "Atlanta")
.QueryForResults<Address>(
row => new Address()
{
AddressId = row.GetValue<int>("AddressId"),
Address1 = row.GetValue<string>("Address1"),
Address2 = row.GetValue<string>("Address2"),
City = row.GetValue<string>("City"),
State = row.GetValue<string>("State"),
ZipCode = row.GetValue<string>("ZipCode")
});
Notice how it removes all the usual boiler plate code from a normal ADO.Net implementation. The only things you really need to do are provide the SQL, set the parameters, and then map the result set to properties on your business object. I'm using lambda expressions in these examples, but if you want to re-use the result set-to business object mappings, I normally create a method in my DAOs to use as a delegate:
ICollection<Address> addresses =
dbStmt.LoadSql("SELECT AddressId, Address1, Address2, City, State, ZipCode " +
"FROM Address WHERE City = @City")
.AddParameter("City", "Atlanta")
.QueryForResults<Address>(CreateAddress);
...
private Address CreateAddress(IResultSetRow row)
{
// full details not provided
return new Address() { AddressId = row.AddressId };
}
If you embed the creation of the IDbStatement interface in a base class (or use the one provided in Miado.Integration), you can see how the code reads even more like a Domain-Specific-Language:
// CreateSqlStatment() method is provided in Miado.Integration.MiadoDao
ICollection<Product> products =
this.CreateSqlStatement("SELECT ProductId, Name, Description, Color, Quantity " +
"FROM Product WHERE Color = @Color and Quantity > @Qty")
.AddParameter("Color", "Blue")
.AddParameter("Qty", 20)
.QueryForResults<Product>(
row => new Product()
{
ProductId = row.GetValue<int>("ProductId"),
Name = row.GetValue<string>("Name"),
Description = row.GetValue<string>("Description"),
Color = row.GetValue<string>("Color"),
Quantity = row.GetValue<int>("Quantity")
});
There is also a SimpleSql object that can be used similar to IDbStatement but the syntax is a little more terse since you don't have to map the parameters - they are merely replaced in the order you provide them:
IDbConfigurable dbConfig = new DbConfiguration(SqlClientFactory.Instance, connString);
SimpleSql sql = new SimpleSql(dbConfig);
sql.ExecuteNonQuery("UPDATE Person SET FirstName = @FirstName, " +
"LastName = @LastName " +
"WHERE PersonId = @PersonId",
"John", "Smith", 1001);
// again, I like to embed this in a base class so it reads:
// this.CreateSimpleSql().ExecuteNonQuery(sql, param1, param2);
For this first release, SimpleSql is not supported for ODBC SQL statements (since it uses pattern matching to substitute the SQL parameters).
Here's another example where you can see how easy it is to get a count:
int count =
this.CreateSimpleSql()
.QueryForOne<int>("SELECT count(*) FROM Employee WHERE YearsOfService > @YearsOfSvc",
new object[] { 15 },
row => row.GetValue<int>(0));
And yes, it supports the creation of DataSets and DataTables:
DataSet ds =
this.CreateSimpleSql()
.QueryForDataSet("SELECT * FROM ProductType WHERE Price > @Price", 10.0);
This is the first code drop, so treat it like a beta release.
Sunday, April 06, 2008 9:35:57 AM (Eastern Standard Time, UTC-05:00) .Net | Miado