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:
Figure 12
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)
Figure 13
3) Create a new SQL Express database. To-do this, just
select “Add New Item” and choose the “SQL Database” item and name it:
Figure 14
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):
Figure 15
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):
Figure 16
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:
Figure 17
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:
Figure 18
Figure 19
Figure 20
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:
Figure 21
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:
Figure 22
Figure 23
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:
Figure 24
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:
Figure 25
Figure 26
9) Then enable paging, sorting, editing and deleting with
the grid:
Figure 27
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:
Figure 28
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.
Figure 29
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:
Figure 30
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:
Figure 31
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:
Figure 32
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:
Figure 33
