Sliding Task Lists project (day 4) – database tables and saving new tasks with atlas

After the most of UI has been created, in order to get this application to actually do something, I needed to add one database table and one stored procedure. The ‘tblTasks’ table will hold all the tasks, regardless of their type and who do they belong to. Here is how the table looks like:

IDTask – int
UserName – varchar(100)
TaskTitle – varchar(500)
StartDate – datetime
CompletedDate – datetime
IsBigTask – bit
IsQuickTask – bit
IsEverydayTask – bit
IsCompleted – int

If you’d like the SQL script to create this table, open the following link:

OPEN CODE IN NEW WINDOW

In addition to this, I’ve also created a ‘pr_AddTask’ stored procedure that will add any kind of task to ‘tblTasks’. Take a look at the stored procedure:

OPEN CODE IN NEW WINDOW

Now, let’s go back to the application. In previous post I’ve created the three ModalPopups, each of them designed to add different kind of task to the lists. I will explain here the code logic for the “Big tasks”, since the rest of code is pretty much identical. First one little update from the last post. We don’t actually need UpdatePanel there, so I’ve just removed it. The three panels representing the ModalPopups are created by following code:

OPEN CODE IN NEW WINDOW

Next update from the last post happened in the ModalPopupExtender. Open the code and I’ll discuss it then:

OPEN CODE IN NEW WINDOW

You can see that I’ve added OnOkScript property to the each one of the extenders. This property holds the name of the javascript function to be called, when user clicks the “Save” button in our “add task” panels. Since you can see that we are going to use javascript, naturally next thing we need to do is link our external javascript file to the default.aspx. so that looks like this :

OPEN CODE IN NEW WINDOW

To add tasks we’ll need to do two more things. First is javascript code that will call methods on web service and second the web service methods to actually add data to database. Let’s start with web service. Add new web service to your project and name it ws_tasks.asmx. Select option “Place code in separate file”. The code behind for this web service should look like this:

OPEN CODE IN NEW WINDOW

Notice that there are three methods; each one takes care of adding one type of tasks to the database. The methods receive task title and user name (of the current user logged in) as two parameters. The rest is pretty easy, so I won’t explain it here. Maybe just to note that @is_big_task, @is_quick_task and @is_everyday_task are optional parameters of ‘pr_AddTask’ stored procedure with the default value of false, so we don’t need to add all the parameters in each of the methods.

Before I forget, make sure to add the reference to this web service in your script manage tag. It should look like this :

OPEN CODE IN NEW WINDOW

And finally, the last thing we have here is writing javascripts that will call the methods on web service and send them the two needed parameters when user clicks ‘Save’. Let’s take Big Tasks for example. First we have ‘AddBigTask()’ function (remember that we set OnOkScript property of ModalPopup for BigTasks to this function). This function gets the value of the task title and the username of the user currently logged in. You’ll notice that I’m getting a userLoginName value here. That is nothing else then the value of <asp:LoginName control. Lastly we call the STL.Tasks.AddBigTask method on our web service. We send the two required parameters and add at the end the name of the function we want to be called back when task is saved in database. In the ‘AddBigTask_Callback(result)’ function I empty the textbox (reset it…) and simply give a user alert message that her task has been added.

OPEN CODE IN NEW WINDOW

Ok, that’s it for today. Tomorrow we are going to bind the data from the database to the lists, so after all this application will look like it works :) !


This blog is being delivered to you by
reBlogger.com
“Do you know what your employees are blogging about?”


About these ads

2 Responses to “Sliding Task Lists project (day 4) – database tables and saving new tasks with atlas”

  1. Useful AJAX Links | pc-aras Says:

    [...] Sliding Task Lists project (day 4) — Database tables and saving new tasks with Atlas (Coding [...]

  2. steroids Says:

    Thank you for all the great information ,i admirer your great work

    Nice Site layout for your blog. I am looking forward to reading more from you.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: