Making a List, Checking it Twice (Cool Ajax Sample App with ASP.NET 2.0 and Atlas)
In case you haven’t checked out the new Atlas preview
release yet (which given that it shipped a few days ago
and almost everyone is on vacation this week is very
likely), you might want to consider finding some time
to-do so when you get a chance and are back online. It makes common Ajax-style scenarios a breeze to build,
and really makes programming a lot of fun.
I played around using the Atlas drop with ASP.NET 2.0 a
few days ago on a plane ride to the east-coast, and put
together a simple task/to-do list application that shows
off one of the new features that comes with it
(specifically the new <atlas:updatepanel> server
control that allows you to use any shipping ASP.NET
server control and get incremental Ajax-style updates in
your ASP.NET 2.0 application).
You can download the full source-code to the
application
here. Feel free to re-use/modify/re-ship it
however you want.
Basically, this simple sample I built provides a basic
interface to create/manage/delete lists, and then items
within those lists. What is neat is that
all of the inserts, updates, deletes, sorts, and paging
operations within the application are done in an
I’ll walkthrough how this all works after the
sceenshots below – although obviously the best way to
learn about it yourself is to download the sample and
run it on your local system (note: if you have the free
Visual Web Developer Express tool installed and SQL
Express active, then you should be able to just copy the
above .zip file to your local hard-drive, expand it,
open the web-site and hit run). Note: I
used CSS for all style information, and I’ve tested the
markup output from the sample and it should be XHTML
compliant.
Quick Tour of the Application
Basically, this to-do list application provides a
simple Ajax-enabled interface to manage lists of items
(note: the screenshots are done with FireFox – but
obviously it works with IE as well):
In addition to adding lists (which are done using an
As well as sorting (note: also done in an Ajaxish way
with no full page refresh) by any of the columns (just
click on a column heading to set the sort-order):
Automatic paging support is enabled when you have more
than 10 lists in your current filter (note: also done in
an Ajaxish way):
In addition to adding/editing/sorting/paging/deleting
lists, you can also drill into list items and add
individual sub-items (just click the “view active items”
link to drill into this):
Note that the number of active items is shown for each
list in the far-right of the list manager screen (I also
added code to disable the “delete” button on a list if
there is 1 or more active items in the list):
When you are done with a list (and presumably its
items), you can edit the list and checkbox it as being
“done”. This will remove the list from the
“active” filter and hide it from the default view. You can still go in and see it by changing the
top-filter drop-down list to “done” (also done in an
Ajaxish way):
Lastly, I also added support for viewing your current
task-list using RSS. Just click the
“subscribe to your lists” link and you’ll see an RSS XML
view of the data.
You can then add a subscription to this RSS feed in
your favorite RSS reader. You will then be
able to easily track your current to-do list, and even
see the active items that are in it (every time you
refresh your RSS feeds, it will automatically update
your to-do list with the latest information:
A little about what the sample code
Use this
link
to download all of the source for the sample (this .zip
file also includes an atlas install – so you should just
be able to download it with a vanilla Visual Web
Developer or VS 2005 install and hit run to launch
it). Note that I wrote this on a plane
with a screaming kid behind me – so please be a little
forgiving of the imperfections you find (and I am sure
there are some).
Here is what it looks like in either the free
Visual Web Developer
IDE or in VS 2005:
Note that it contains three .aspx pages – MyList.aspx,
Items.aspx, and RSS.aspx. MyList.aspx and
Items.aspx are both based on a common master-page
(Site.Master) that provides common layout
information. All style information is
stored in the .css file.
The data for the application is stored within the
Tasks.mdf file (which is a SQL Express file). I then also created a set of strongly-typed dataset
table adapters for the two tables I used within the
database (these table adapters are declaratively defined
within the Lists.xsd file).
As you can see above, both MyList.aspx and Items.aspx
are fully supported in the WYSIWYG designer mode. Here is the full code-listing for what the MyList.aspx
code-behind file looks like (note: this code-behind is
the largest of the three files):
Note that the first method is the event handler action
for the “add” button gets clicked. It
creates a new List in the database. The
next three methods are formatting methods I use during
data-binding to perform some fancier data-transforms
(for example: I store the priority of lists as an
integer in the database as opposed to a string for
better sorting semantics, but want a nice drop-down list
and text value displayed in the browser, etc). If I wanted a quick and dirty bare-bones list editing
system, I could have just skipped doing these. I’m then using a declarative ObjectDataSource binding
(a new ASP.NET 2.0 feature) to-do update and delete data
semantics with the List adapter as well.
How you’d build something like this from scratch
If you want to build something like the above sample
from scratch yourself, you’d want to follow these steps
below:
1) Create a new web-site using the free Visual Web
Developer Tool and optionally the December Atlas Site
Template .VSI file:
2) After deleting the default Eula, Readme and
Default.aspx files, you’ll be left with a solution that
looks like this (note: the Atlas binary is added to your
\bin directory by default, along with both debug and
release versions of the Atlas .js files)
3) Create a new SQL Express database. To-do this, just select “Add New Item” and choose the
“SQL Database” item and name it:
4) Use the built-in database design and editing features within Visual Web Developer (note: this VWD is free) to create a new table with some basic list schema (and optionally add an “items” table as well for sub-items). Make the listId column both the primary key, as well an identity column (with an auto-increment value of 1):
Once the schema for the table has been defined, open up
the lists table and add 3-4 rows of sample information
within it (right click on the table in the server
explorer and choose “Show Table Data” to-do this):
5) Once you’ve built your database tables, close the
database designer, and then select “Add New Item” on the
project again. Choose the “Dataset”
item:
Walkthrough the table-adapter wizard that runs by
default to connect to the SQL database we just created
and choose to build a data-adapter using a standard set
of SQL statements:
Name the select method we defined in the step above
“GetListsByCompleteStatus” (or anything else you want to
call it). Note that you’ll be able to add
any number of methods you want to the adapter later –
and can define a separate SQL statement for each method
(the adapter will then also by default generate
automatic Insert, Update and Delete statements for the
default Select statement in your adapter).
The adapter will encapsulate all of the ADO.NET data
access code needed to execute them – and generate a
strongly-typed set of data objects you can use.
For example, with the method we just
defined above, you could now write the below code to use
the strongly-typed adapter and corresponding datatables
and datarows anywhere within our project:
6) Create a new ASP.NET page in your project called
“MyLists.aspx”. Add a title called
“MyLists”, then a drop-downlist onto the page, and edit
its items to have two elements: “active” and
“done”. Set the value of “active” to
false, and the value of “done” to true (we will use this
to filter the “isComplete” field in our database).
Also make sure that you set the “Enable
Auto-Postback” checkbox to true:
7) Drag/drop a GridView control onto the page, choose
“new datasource”, choose the “Object” data binding
option, and choose to bind it to the data adapter we
built above:
8) Bind the default query operation against the
“GetListsByCompleteStatus” method we defined above, and
bind the isComplete parameter to that method to the
drop-downlist we built:
9) Then enable paging, sorting, editing and deleting
with the grid:
Lastly, you can optionally disable “viewstate” for the
GridView, by setting its “EnableViewState” property to
“false”. With ASP.NET 2.0, the GridView
and other controls no longer require ViewState to
perform paging, sorting, updating and deleting
operations.
10) And then hit either F5 (to run and debug) or
Ctrl-F5 (to just run) the app:
If you click the “edit” button on any of the items, you
will switch into edit more, and you’ll be able to edit
and change the column values. If you
select “update”, the Grid will call through to the data
adapter you built (or any intermediate class you built
that you want to use to either encapsulate or sub-class
it) and update the database for you. A
similar binding action happens with “delete”
operations.
If you change the drop-down list selection, the grid
will re-bind with the appropriate isComplete filter
selection. If you click on any of the
columns in the grid, the row values will sort (ascending
or descending). If you add more than 10
values in the grid, page numbers (along with default
page semantics) will show up at the bottom.
11) If you click on the html source-tab, you can see
what is persisted in the .aspx file:
Basically, it contains our drop-down control
definition, along with the GridView definition, along
with an ObjectDataSource that provides declarative
data-binding support. You can write code
and event handlers to customize any of the three
controls in the code-behind file.
12) Our last step before adding Atlas functionality,
will be to add a textbox and button to help us add new
list items to our Grid:
And then add a code-behind event handler that will fire
when the “Add” button is clicked, and use our data
adapter to insert a new list into the Lists table, and
re-bind our grid:
Note that there is
no other
code in our code-behind file.
Step 13) Try running the application again. Now you can add, delete, update, sort, page and filter
the data:
Adding Atlas Support
So far, all of the steps we have followed work with the
vanilla ASP.NET 2.0 and Visual Web Developer tool
products – we haven’t used any Atlas features yet.
What we want to-do is to use Atlas to replace the
built-in ASP.NET post-back model so that instead of
refreshing the entire page when a post-back occurs, we
use XMLHttp to only send back the regions of a page that
have changed. This enables us to make the
page feel much more dynamic, perform faster, and obtain
a much richer user-experience.
Step 14) Our first step to add Atlas support will be to
add the <atlas:scriptmanager> server control to
the page, and set its “EnablePartialRendering” attribute
to “true”:
Step 15) We are then going to add an
<atlas:updatepanel> control onto the page, and use
it to wrap our GridView control and associated
content:
This is now an “updatable” region within our page –
which means that when a post-back event occurs, Atlas
will intercept the event, and instead of refreshing the
entire page it will use XMLHTTP to just send back
partial updates from the server, and then dynamically
repaint those portions of the page.
Try running the application again, and add a new item,
then sort, filter, and edit items. Notice
how fast it feels – and the fact that the page wasn’t
refreshed on each action.
Step 16) When running the above app, you might have
noticed when you added a new item to the list, the
textbox value wasn’t cleared. This is
because the textbox lived outside of the
<asp:updatepanel> we added above – and so wasn’t
refreshed as part of our post-back call.
We could either move it to be inside the above
<asp:updatepanel> or more optimally choose to add
a new <asp:updatepanel> to the page that contains
in. This is more optimal because we
will not
update this panel every-trip to the server, but instead
only when a declarative trigger that we’ll specify
occurs (or alternatively if someone writes code on the
server to explicitly trigger it).
The above trigger means that this panel will only be
refreshed only if the “add” button fired (or if we wrote
code on the server to explicitly refresh it). This means it will not fire in response to the
drop-down filter changing, or to sorts, edits, updates,
deletes within the GridView.
And now when we run our application again, it is
The full-blown sample I showed at the beginning does a
few more cool things, but the walkthrough above captures
the basic concepts from it. As you can
see, building one of these types of apps be done in
minutes, doesn’t require much code at all (you only have
to manually write 4 lines of code total), and enables
you to start building Ajax applications with a fraction
of the concept count from before.
Hope this helps -- and happy holidays,
Scott