Who knew this could be so easy... and FAST?
This is a continuation of my
'REAL' AJAX with Asp.Net (not Asp.Net AJAX)
series posts for those of us trying to stop relying on Asp.Net 'AJAX'.
Ok, nothing too dramatic to start things off, we are going to make some tabled data sortable and pagable all without using a bit of postback. Not only that, but it is going to be incredibly easy!
First off we need the data that these demos will be working with, nothing complicated, just a simple SQL table 'person' that holds peoples' names and ages:
setup.sql
CREATE TABLE dbo.person (
person_id INT NOT NULL PRIMARY KEY IDENTITY,
first_name VARCHAR(50) NOT NULL,
last_name VARCHAR(50) NOT NULL,
age INT NOT NULL
);
Also included in the setup.sql file is some dummy data to populate it initially. We ill be using a Linq as our datasource throughout with a .dbml file named demo.dbml.
Next we need to display the data. Normally if I wanted to do paging, I would use a GridView, due to the fact is is already integrated. But that integration is sloooow, and requires a postback - we are ajax'ing here! What we are going to do will load all the data (which could be slower initially on large data sets) and use jQuery to take care of all of the lifting for us. So, it is much more efficient for us to use a Repeater. Without postbacks, all the advantages of a GridView quickly fade away. You will see how little markup you need:
sort_page.aspx
<asp:Repeater ID="rpt" runat="server" DataSourceID="lds">
<HeaderTemplate>
<table id="sort_table">
<thead>
<tr><th>First</th><th>Last</th><th>Age</th></tr>
</thead>
<tbody>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td><%#Eval("first_name")%></td>
<td><%#Eval("last_name")%></td>
<td><%#Eval("age")%></td>
</tr>
</ItemTemplate>
<FooterTemplate>
</tbody></table>
</FooterTemplate>
</asp:Repeater>
<asp:LinqDataSource ID="lds" runat="server"
ContextTypeName="demoDataContext" TableName="persons" />
That is all the markup it takes, no code-behind. Now just call the javascript magic of the combination of
jQuery and the extension
dataTables:
sort_page.aspx
$(function() {
$("#sort_table").dataTable();
});
And just like that you have a full sortable (with flipping sorting images), filterable, sizable, pageable and 'pretty' table using a simple Repeater.
Now, I guess this isn't truly ajax, as nothing is truly pulled from the data store after the initial pull, but I argue that it is *relatively* because if you were to use a GridView jumping pages would cost a postback each time.
This is just the introduction here, but it is to show you how incredibly easy it is to get real, time-saving ajax and it is not as intmidating as you think.
Next I will be showing you how to do inline editing of this table.
Update »