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:
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:
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:
Next update from the last post happened in the ModalPopupExtender. Open the code and I’ll discuss it then:
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 :
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:
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 :
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.
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?”
May 10, 2009 at 8:48 am
[…] Sliding Task Lists project (day 4) — Database tables and saving new tasks with Atlas (Coding […]
October 7, 2010 at 7:03 pm
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.