Making a List, Checking it Twice (Cool Ajax Sample App with ASP.NET 2.0 and Atlas)
page 4 of 6
by Scott Guthrie
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 24797/ 65

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:

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

View Entire Article

User Comments

Name: tahir ASlam
Date: 2008-07-22 12:38:42 PM
I have tried this code as was needed for my project but am having a problem specifially in the line

Lists.ListsDataTable listData=listAdapter.GetBy(true);

Plus i did not understand what this statment would do even if it would ve not thrown any error so kindly would you be able to explain tht to me please>?>>
WOuld really appreciate your help
Thank you
Title: Anthem URL   
Name: Mathias
Date: 2006-08-08 4:58:44 AM
Entering an URL didn't work...
Title: I prefer Anthem   
Name: Mathias
Date: 2006-08-08 4:57:56 AM
I prefer Anthem over Atlas... Check the site above.
Title: MR   
Name: Uday Shetty
Date: 2006-08-07 5:01:13 AM
since many days i was wondering how to start ajax. In fact I had gone through many examples, but i was not successful. Finally I came across this example and i am thru.

I am very thankful to Mr Scott for this remarkable article. I wanted a srating point, which I found here. Now I can work on this technology & improve my knowledge on this.

Uday Shetty
Title: mr   
Name: chandra
Date: 2006-07-25 2:08:58 AM
xie2 ni, thank you, arigato
Title: 100% worth to read - Excellent   
Name: Suchi
Date: 2006-07-08 1:47:45 AM
Very good explanation. Its really helped me to understanding basic things. Thanks for your time.
Title: Excellent!   
Name: Nigel Bird (England)
Date: 2006-07-06 7:54:21 AM
Just to say well done, I found this article very usefull. Thanks for taking the time to post it.
It has been apprecieated.... By the way it works just fine!

much regards
Title: it dosent work   
Name: Ramzy N.Ebeid
Date: 2006-07-03 11:08:52 AM
dear sir
i make the sample as you say and it dosent work
and i dont know why ????
can you help me please
there is no errors

Community Advice: ASP | SQL | XML | Regular Expressions | Windows

©Copyright 1998-2024  |  Page Processed at 2024-06-24 10:12:36 AM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search