Hier der volle Artikel:

http://weblogs.asp.net/scottgu/archive/2005/12/26/433997.aspx


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 Ajax way (where only the list is updated in the browser – which makes the app feel really snappy and alive).  What
is really cool is the fact that I was able to enable this without
having to write any javascript, or learn/use any new data or input
controls (I used only the built-in textbox, dropdownlist, button,
gridview, repeater and objectdatasource controls in the sample –
together with the new <asp:updatepanel> control which is
conceptually pretty simple to understand).  I
wrote ~40 lines of code to enable all the screenshots below (I could
have easily done it in less than half of that – but I wanted to
show off some fancier data transformations in the lists as well as
enable RSS) – and I was able to build all of the core app
functionality from scratch in less than 15 minutes (including creating
the database, the data tier, and the UI code). 

 

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 Ajax model – no refresh of the entire page), it also provides per-row editing of the values (also done in an Ajaxish way):

 

 

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 ajax enabled, and allows us to dynamically add, remove, update, sort, page and filter our list items….

 

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

 

posted on Monday, December 26, 2005 12:16 AM

Schreibe einen Kommentar

Bitte logge dich mit einer dieser Methoden ein, um deinen Kommentar zu veröffentlichen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s