Creating a Web-based Schedule with ASP.NET | 2

Creating a Web-based Schedule with ASP.NET [con't]

Open Visual Studio and Create the Project

Let's go ahead and open Visual Studio (or your editor) from the desktop: Start→Programs→Microsoft Visual Studio.

From the main menu, create a new project by following these steps:

File→New→Project.
In the New Project window, under the Visual C# tree, choose Web, then ASP.NET Web Application.
In the name text box, name our project ClassSchedule./li>
In the location drop down list, leave as is.
In the solution text box, leave as is.
Leave Create a directory for solution checked.
Click OK.

Once the project is created, you'll have one ASPX file and a web.config.

Open web.config

From the solution explorer, double click web.config and look for <connectionStrings>. Replace the default markup with the following as shown below:

Simply replace the value inside the double quotes for connection string with your settings. Once completed, save your file.

Open default.aspx

Let's tackle the ASPX file first by double clicking on it from the solution explorer. Once open, delete everything inside the opening and closing <form runat= "server "> tag. Next, right below the opening <form> tag, let's create a grid view data control as shown below:

Since we need to create a tabular view of our data, grid view control will render a table. Right now the properties are as follows:

ID
- Gives our control a unique name

Tells us this control will be run by the server first, then resulting html output will be sent to the browser

Creating Columns Manually

Since we don't want our grid view to automatically generate every column from our query (default behavior), we'll manually create our columns within the grid view; adjust our grid view as shown below:

<asp:GridView ID="gridView_Schedule" runat="server" AutoGenerateColumns="false">
   <Columns>
        <asp:BoundField DataField="sectName" HeaderText="Section Name" />
        <asp:BoundField DataField="synonym" HeaderText="Synonym" />
        <asp:BoundField DataField="credhrs" HeaderText="Credit Hours" />
        <asp:BoundField DataField="title" HeaderText="Title" />
        <asp:BoundField DataField="totalSeats" HeaderText="Total Seats" />
        <asp:BoundField DataField="remainSeats" HeaderText="Remaining Seats" />
        <asp:BoundField DataField="meetInfo" HeaderText="Meeting Information" />
        <asp:BoundField DataField="room" HeaderText="Room" />
        <asp:BoundField DataField="days" HeaderText="Days" />
        <asp:BoundField DataField="startTime" HeaderText="Start Time" />
        <asp:BoundField DataField="endTime" HeaderText="End Time" />
        <asp:BoundField DataField="instFullName" HeaderText="Instructor" />
        <asp:BoundField DataField="location" HeaderText="Location" />
    </Columns>
</asp:GridView>

As you can see from the code above, we set the property, AutoGenerateColumns to false. Nested within the grid view, we create a columns tag, followed by a(n) bound column for reach column we wish to show. This tag takes two properties:

DataField
- Value used comes from our class level variables
HeaderText
- Value used is what displays in the browser as header cells

Save your file.

Create Class File

We have two options for getting data bound to our grid view: (1) put all the database and business logic in our default.aspx.cs file, or (2) create a separate class file, put all the database and business logic in this file, and then bind to the list object it returns in our default.aspx.cs file. Our second option is the best, it creates a layer of abstraction to our application, and if it's ever needed, we could compile that class as a namespace and allow another developer to use it. As a result, we'll go with the second option. Follow these steps to create our class file:

From the solution explorer, right click and select Add→New Item.
In the Add New Item window, select Class.
In the name text field, type ClassSchedule and left click Add.

Open ClassSchedule.cs

Let's go ahead and get our data access layer working. From the solution explorer, double click ClassSchedule.cs and add the following namespaces at the top as shown below:

As you can see from the code above, we added three namespaces. The first one is to access our web.config connection key, the second is to work with stored procedures, and the third is to work with SQL server. Continuing, inside the initial declaration for our class, add the following declarations as shown below:

As you can see from the code above, we added class level variables for each column we want to show in our grid view. Next, let's create a static method so that our code behind file can directly call that method. Add the following code as shown below:

namespace ClassSchedule
{
    public class ClassSchedule
    {
        #region Declarations
        public string sectName{get;set;}
        public string synonym{get;set;}
        public int credhrs{get;set;}
        public string title{get;set;}
        public int totalSeats{get;set;}      
     public int remainSeats{get;set;}
        public string meetInfo{get;set;}
        public string room{get;set;}      
        public string days{get;set;}      
     public string startTime{get;set;}
     public string endTime{get;set;}
        public string instFullName{get;set;}
        public string location{get;set;}
        #endregion
        #region Methods
        public static List<ClassSchedule> GetClassScheduleData()
        {
            SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["mwd"].ConnectionString);
            SqlCommand cmd = new SqlCommand("spClassScheduleDisplay", conn);
            cmd.CommandType = CommandType.StoredProcedure;
            List<ClassSchedule> schedule = new List<ClassSchedule>();
            try
            {
                conn.Open();
                SqlDataReader rdr = cmd.ExecuteReader();
                while (rdr.Read())
                {
                    ClassSchedule cs = new ClassSchedule();
                    cs.sectName = rdr["SectionName"].ToString();
                    cs.synonym = rdr["Synonym"].ToString();
                    cs.credhrs = Convert.ToInt32(rdr["CreditHrs"]);
                    cs.title = rdr["Title"].ToString();
                    cs.totalSeats = Convert.ToInt32(rdr["TotalSeats"]);
                    cs.remainSeats = Convert.ToInt32(rdr["RemainingSeats"]);
                    cs.meetInfo = rdr["MeetInformation"].ToString();
                    cs.room = rdr["Room"].ToString();
                    cs.days = rdr["Days"].ToString();
                    cs.startTime = rdr["StartTime"].ToString();
                    cs.endTime = rdr["EndTime"].ToString();
                    cs.instFullName = rdr["InstFullName"].ToString();
                    cs.location = rdr["Location"].ToString();
                    schedule.Add(cs);
                }
            }
            catch (Exception ex)
            {
                throw new Exception(ex.ToString());
            }
            finally
            {
                cmd.Dispose();
                conn.Close();
            }
            return schedule;
        }
        #endregion
    }
}

As you can see from the code above, we do the following:

Create a static method named GetClassScheduleData.
Created a connection object, passing in our configuration key.
Created a command object, passing in our stored procedure and connection object.
Set our command object to accept a stored procedure.
Created a generic list object.

If for any reason we can't connect to our database or read the contents of our reader object, we wrap those items in a try/catch block and do the following:

Call the open method of our connection object.
Create a reader object, and set the command object's execute reader method to it
- Inside our while loop, we:
  1. Create a new instance of our class schedule object.
  2. Assign each class level variable to an appropriate data reader value.
  3. Add our new instance of our class schedule object to our list object each time through the loop.
Catch and throw exception if needed
Lastly, call the dispose method of our command object, call the close method of our connection object and return our list object

Save your file.

Open default.aspx.cs

Since we need to associate our list object to our grid view, we'll create another list object, call our method, and take the objects we get from that method and data bind to that. Let's first open our code behind file by following these steps:

From the solution explorer, left click the plus (+) sign next to default.aspx.
Double click default.aspx.cs.

Below our page load method, let's create another method that will bind our objects to our grid view as shown below:

As you can see from the code above, we do the following: create a list object, and call the GetClassScheduleData method from our class file. We then set the data source of our grid view to our list object, and then call the data bind method to associate our data to our control. The remaining two lines deals with a rendering problem when working with CSS. We turn grid lines off which removes the default generated border on our table and set cell spacing to zero. Before saving, we need to make a call to this method from our page load method, as shown below:

Save your file. Press F5 on your keyboard. If this is the first time running the project, you'll get the following message:

Go ahead and click OK. Make sure your page looks like the following image:

Once you're done previewing your page, return to Visual Studio and press the stop button or Shift + F6 on your keyboard.

Create the Style Sheet

We obviously need to style up the page a bit, let's do it with CSS; follow these steps to create a style sheet:

From the solution explorer, right click on the project and choose Add→New Item.
In the Add New Item window, select style sheet.
In the name text field, type style and then left click Add.

Open the Style Sheet

To open the style sheet and add some basic rules, follow these steps:

From the solution explorer, double click style.css.
Add the following CSS as shown below:
body { font-family:Verdana, Helvetica, Sans-Serif; } div table#gridView_Schedule{ width:985px; border-collapse:collapse; border:1px solid #ccc; margin:0 auto; } div table#gridView_Schedule th{ font-size:.6em; } div table#gridView_Schedule td{ font-size:.7em; text-align:center; }

As you can see from the code above, we're overriding the base font family for our Web page, setting the overall table width to 985, which allows the table to show all information consistently, and we set the font size of our table header cells (th) and table cells (td) to an appropriate size. Save your file and preview the results. Once finished, close your style sheet.

Determining Rows to Highlight

Most Web-based schedules have indicators that alert viewers to classes that are full or have lab components by highlighting those rows in different colors. Using our grid view, this is pretty simple. First, in default.aspx, inside the opening grid view declaration, add this property-value:

As you can see from the code above, we created a row data bound event. This means, as each row in the grid view is bound; we'll write conditional logic to highlight certain rows in different colors-based on specific criteria. Save this file and switch back to default.aspx.cs. Let's create a method for our event as shown below:

As you can see from the code above, we create a method named gridView_RowDataBound. You should notice that instead of EventArgs e, we pass in GridViewRowEventArgs e. Next, if the row type is that of data row, we then determine which rows we want to evaluate. We know we want the column containing remaining seats to be red if the count is less than or equal to zero. As a result, we type cast that column as an integer, use a comparison operator (<= ) and pass in zero, then use the CssClass method of e and set it to a CSS class named closed. We do the same thing for lab, except type casting it as a string, and setting the class to lab instead. Save your file.

Open your style sheet, and add the following code:

As you can see from the code above, we create two classes and set their background color to an appropriate color. Save your files and preview the results, which should look like the following:

Summary

In this article you learned how to build a relatively simple Web-based schedule application in ASP.NET. You learned how to do the following:

Create a database
- Corresponding tables
- Create and understand stored procedures
- Understand relationships with data
- Create a database diagram to enforce referential integrity
Create a Visual Studio project
- Create a Web form with a grid view control that renders a table
- Create a C# class, and understand the basics of generics
- Create a method on our grid view to determine-based on criteria different row colors

Take the knowledge you gained from this article and expand your Web-based schedule application to meet any requirement you may need.

If you have questions, please contact me.

Code Download

ASP.NET Class Schedule application source code

About the Author

Ryan Butler is the founder of Midwest Web Design. His skill sets include HTML, CSS, Flash, JavaScript, ASP.NET, PHP and database technologies.

Original: Sept. 15, 2010

[prev]