ASP.NET 2.0 To-Do List
It is very easy to build To-do list web application in ASP.NET 2.0. This tutorial will cover the basics of using .Net 2.0's controls and fundamentals of using Visual Web Developer to create a simple, but powerful application. There is sample To Do List ASP.NET 2.0 project, used in this tutorial.
- Difficulty Level: Beginner-Intermediate
Prerequisites:
Visual Web Developer Express
.NET Framework 2.0
Microsoft SQL Server 2005
Start Visual Web Developer Express and select New Web Site from the File Menu.
The New Web Site dialogue will appear. Verify ASP.NET is selected and click OK.
In this tutorial, you will become familiar with the Visual Web Developer Toolbox.
Please take a moment to briefly scroll through the listing of items.
Once you have viewed the Toolbox, switch into Design View by clicking Design.
Right-click the App_Data in the Solution Explorer window and choose Add New Item.
Select SQL Database from the template items and name it ToDoData.mdf. Click Add.
After the database is created, the Database Explorer will take focus.
Right-click the Tables Folder and select Add New Table.
Create three columns: ID, Date, and Note.
Right-Click the ID Row and Select Set Primary Key.
In the ID's Column Properties, select Yes for (Is Identity) under the Identity Specification.
Duplicate the columns' Properties and Data Types in the figure to the right and press Ctrl+S.
Name your table ToDoTable and click OK.
The SQL database is available for data entry. Click the Default.aspx tab to return to your Web Form.
From the Data group in the Toolbox, drag a SqlDataSource control onto the page.
On the SqlDataSource Tasks shortcut menu, select Configure Data Source.
Select ToDoData.mdf from the data connection drop-down menu. Click Next >.
Verify the checkbox is selected, and save the connection as ConnectionString. Click Next >.
Check [*] in the columns display. Next, select the Advanced button and check Generate INSERT, UPDATE, and DELETE statements. Click OK.
Click Next >.
Click Finish. You have successfully configured your data source.
From the Data group in the Toolbox, drag a FormView control onto the page.
On the FormView Tasks shortcut menu, choose SqlDataSource1 from the drop-down menu.
Next, drag a GridView control onto the page from the Data group in the Toolbox.
On the GridView Tasks shortcut menu, choose SqlDataSource1 from the drop-down menu.
Check Enable Editing and Enable Deleting.
Open Default.aspx.vb from the Solution Explore panel
and paste the following code (replace the current script).
The following script will customize the look of your controls.
Partial
Class _Default
Inherits System.Web.UI.Page
Protected Sub
Page_Load(ByVal sender
As Object, ByVal
e As System.EventArgs)
Handles Me.Load
'DEFINE PAGE CONTROLS
Dim InsertButton As
LinkButton
InsertButton =
FormView1.FindControl("InsertButton")
'ON PAGE LOAD FORMVIEW STARTS INSERT MODE
FormView1.DefaultMode = FormViewMode.Insert
'CHANGE TEXT OF BUTTON
InsertButton.Text = "ADD QUICK NOTE"
'STYLE GRIDVIEW
GridView1.Font.Name = "Arial"
GridView1.RowStyle.BackColor = Drawing.Color.AliceBlue
GridView1.AlternatingRowStyle.BackColor = Drawing.Color.LightBlue
GridView1.GridLines = GridLines.Horizontal
GridView1.BorderStyle = BorderStyle.Solid
GridView1.BorderColor = Drawing.Color.Black
GridView1.CellPadding = "5"
'STYLE FORMVIEW
FormView1.Font.Name = "Arial"
FormView1.CellSpacing = "5"
FormView1.HeaderText = "TO DO LIST"
FormView1.HeaderStyle.Font.Bold = True
End Sub
End
Class
Return to Default.aspx. Press F5 to preview the product in your browser. Congratulations. Your finished product will resemble the figure below:
Related articles:
1. Build Notepad ASP.NET Web Application
2. Build a Poll System in ASP.NET
3. Developing a picture album in ASP.NET
