M55339A | All Modules

Lab Guide

Module 1: C# Syntax

Important Informa on about running this class.

Scenario

You are a Microso C# developer working for a so ware development company that is wri ng
applica ons for The School of Fine Arts, an elementary school for gi ed children. The school
administrators require an applica on that they can use to enroll students in a class. The
applica on must enable an administrator to add and remove students from classes, as well as to
update the details of students. You have been asked to write the code that implements the
business logic for the applica on.

Note: During the labs for the first two modules in this course, you'll write code for this class
enrollment applica on. When The School of Fine Arts ask you to extend the applica on
func onality, you realize that you'll need to test proof of concept and obtain client feedback
before wri ng the final applica on, so in the lab for Module 3, you'll begin developing a prototype
applica on and con nue with this un l then end of Module 8. In the lab for Module 9, a er
gaining signoff for the final applica on, you'll develop the user interface for the produc on
version of the applica on, which you'll work on for the remainder of the course.

Objec ves

A er comple ng this lab, you'll be able to:

 Write C# code that implements the logic necessary to edit the details of a student.

 Write C# code that implements the logic necessary to add new students.

 Write C# code that implements the logic necessary to remove students from a class.

 Perform simple data transforma ons to display informa on.

Es mated Time: 100 minutes

Lab: Developing the Class Enrolment Applica on

Exercise 1: Implemen ng Edit Func onality for the student list

Scenario
In this exercise, you'll write the code that enables an administrator who is using the applica on
to edit a student's details. A list of students is displayed in the user interface of the applica on.
When the user selects a student and then presses a key on the keyboard, you'll check whether
the key they pressed was Enter. If they did press Enter, you'll write code to display the student's
details in a separate form, which the user can use to modify the details. When the user closes
the form, you'll copy the updated details back to the list box displaying the list of students.
Finally, you'll run the applica on to verify that your code func ons as expected, and then use
the debugging tools to examine code as it runs.

Task 1: Detect whether the user has pressed the Enter key

1. Open Visual Studio.

Note: You need to Sign In with a Microso Account to use Visual Studio Community Edi on. If
you do not have an account you can use the Create one op on on the splash screen.

2. In Visual Studio, on the File menu, point to Open, and then click Project/Solu on.

3. In the Open Project dialog box, browse to E:\Allfiles\Mod01\Labfiles\Starter\Exercise

1, click School.sln, and then click Open.

Note : If any Security warning dialog box appears, clear Ask me for every project in this
solu on check box and then click OK.

4. In Solu on Explorer, expand School, and then expand MainWindow.xaml.

5. Double-click MainWindow.xaml.cs.

6. In Visual Studio, on the View menu, click Task List.

7. In the Task List window, double-click the TODO: Exercise 1: Task 1a: If the user pressed
Enter, edit the details for the currently selected student task.

8. In the code editor, click at the beginning of the comment line, press Enter, and in the
blank space above the comment, type the following code:

9. switch (e.Key)

10. {

11. In the code editor, click at the end of the comment line, press Enter, and then type the
following code:

12. case Key.Enter:

 13. Student student = studentsList.SelectedItem as Student;

14. A er all the comments in this method, type the following code:

15. break;

16. }

Task 2: Ini alize the StudentForm window and populate it with the details of the currently
selected student

1. In the Task List window, double-click the TODO: Exercise 1: Task 2a: Use the
StudentsForm to display and edit the details of the student task.

2. In the code editor, click at the end of the comment line, press Enter, and then type the
following code:

3. StudentForm sf = new StudentForm();

4. In the Task List window, double-click the TODO: Exercise 1: Task 2b: Set the tle of the
form and populate the fields on the form with the details of the student task.

5. In the code editor, click at the end of the comment line, press Enter, and then type the
following code:

6. sf.Title = "Edit Student Details";

7. sf.firstName.Text = student.FirstName;

8. sf.lastName.Text = student.LastName;

9. sf.dateOfBirth.Text = student.DateOfBirth.ToString("d", CultureInfo.InvariantCulture);

Task 3: Display the StudentForm window and copy the updated student details entered back
to the Student object

1. In the Task List window, double-click the TODO: Exercise 1: Task 3a: Display the
form task.

2. In the code editor, click at the end of the comment line, press Enter, and then type the
following code:

3. if (sf.ShowDialog().Value)

4. {
 5. A er all the comments in this method, add the following code:

6. }

7. In the Task List window, double-click the TODO: Exercise 1: Task 3b: When the user
closes the form, copy the details back to the student task.

8. In the code editor, click at the end of the comment line, press Enter, and then type the
following code:

9. student.FirstName = sf.firstName.Text;

10. student.LastName = sf.lastName.Text;

11. student.DateOfBirth = DateTime.Parse(sf.dateOfBirth.Text, CultureInfo.InvariantCulture);

12. studentsList.Items.Refresh();

13. In the Task List window, double-click the TODO: Exercise 1: Task 3c: Enable saving
(changes are not made permanent un l they are wri en back to the database) task.

14. In the code editor, click at the end of the comment line, press Enter, and then type the
following code:

15. saveChanges.IsEnabled = true;

Task 4: Run the applica on and verify that the edit func onality works as expected

1. On the Build menu, click Build Solu on.

2. On the Debug menu, click Start Without Debugging.

3. Verify that the applica on starts and displays the ini al list of students.

4. Click the row containing the name Kevin Liu.

5. Press Enter and verify that the Edit Student Details window appears and displays the
correct details:
 6. In the Last Name text box, delete the exis ng contents, type Cook, and then click OK.

7. Verify that Liu has changed to Cook on the student list, and that the Save
Changes bu on is now enabled.

8. Close the applica on.

Task 5: Use the Visual Studio Debugger to step through the code

1. In Visual Studio, in the Task List window, double-click the TODO: Exercise 1: Task 2b: Set
the tle of the form and populate the fields on the form with the details of the
student task.

2. In the following line of code, right-click the word Title in sf.Title = "Edit Student
Details";, point to Breakpoint, and then click Insert Breakpoint (Press F9).

3. On the Debug menu, click Start Debugging.

4. Click the row containing the name George Li, and then press Enter.

5. When Visual Studio enters break mode, in the bo om le window, click the Watch
1 tab.

6. In the Watch 1 window, click below Name to create a blank row.

7. In the Name column, type sf.Title, and then press Enter.

8. In the Watch 1 window, click below sf.Title to create a blank row.

9. Type sf.firstName.Text, and then press Enter.

10. In the Watch 1 window, click below sf.firstName.Text to create a blank row.

11. Type sf.lastName.Text, and then press Enter.

12. In the Watch 1 window, click below sf.lastName.Text to create a blank row.
13. Type sf.dateOfBirth.Text, and then press Enter.

14. On the Debug menu, click Step Over (Press F10).

15. Repeat step 14, three mes.

16. In the lower middle window, click the Immediate Window tab.

17. In the Immediate window, type sf.firstName.Text, and then press Enter.

18. Verify that "George" is displayed.

19. In the Watch 1 window, in the sf.firstName.Text row, right-click the Value field, and then
click Edit Value.

20. Type "Dominik" and press Enter.

21. In the Immediate window, type sf.lastName.Text, and then press Enter.

22. Verify that "Li" is displayed.

23. Type sf.lastName.Text = "Dubicki";, and then press Enter.

24. In the Watch 1 window, in the sf.lastName.Text row, verify that the Value column has
changed to "Dubicki".

25. On the Debug menu, click Con nue (Press F5).

26. Verify that the Edit Student Details form contains the informa on in the following table:

Field Value

First Name Dominik

Last Name Dubicki

Date of Birth 8/10/2005

27. Close the Edit Student details window and then close the applica on..

28. In Visual Studio, on the Debug menu, click Delete All Breakpoints.

29. In the Microso Visual Studio dialog box, click Yes.

30. On the File menu, click Close Solu on.

31. If any Microso Visual Studio dialog box appears, click Yes.
Note: If for any reason you change the contents of the database, and want to get it back, just
delete the school.db file in the School directory. The database will be recreated the next me
you run the app.

Result: A er comple ng this exercise, users will be able to edit the details of a student.

Exercise 2: Implemen ng Insert Func onality for the Student List

Scenario

In this exercise, you'll write code that enables an administrator who is using the applica on to
add a new student to the students list. A list of students is displayed in the user interface of the
applica on. When the user presses a key on the keyboard, you'll check whether the key they
pressed was Insert. If they did press Insert, you'll write code to display a form in which the user
can enter the details of a new student, including their first name, last name, and date of birth.
When the user closes the form, you'll add the new student to the list of students and display the
details in the list box. Finally, you'll run the applica on to verify that your code func ons as
expected.

Task 1: Add logic to the key down method to detect if the Insert key has been pressed

1. In Visual Studio, on the File menu, point to Open, and then click Project/Solu on.

2. In the Open Project dialog box, browse to E:\Allfiles\Mod01\Labfiles\Starter\Exercise

2, click School.sln, and then click Open.

Note : If any Security warning dialog box appears, clear Ask me for every project in this
solu on check box and then click OK.

3. In the Task List window, double-click the TODO: Exercise 2: Task 1a: If the user pressed
Insert, add a new student task.

4. In the code editor, click at the end of the comment line, press Enter, and then type the
following code:

5. case Key.Insert:

Task 2: Ini alize the student form

1. In the Task List window, double-click the TODO: Exercise 2: Task 2a: Use the
StudentsForm to get the details of the student from the user task.
 2. In the code editor, click at the end of the comment line, press Enter, and then type the
following code:

3. sf = new StudentForm();

4. In the Task List window, double-click the TODO: Exercise 2: Task 2b: Set the tle of the
form to indicate which class the student will be added to (the class for the currently
selected teacher) task.

5. In the code editor, click at the end of the comment line, press Enter, and then type the
following code:

6. sf.Title = "New Student for Class " + teacher.Class;

Task 3: Display the StudentForm window and enable the user to provide the details of the
new student

1. In the Task List window, double-click the TODO: Exercise 2: Task 3a: Display the form
and get the details of the new student task.

2. In the code editor, click at the end of the comment line, press Enter, and then type the
following code:

3. if (sf.ShowDialog().Value)

4. {

5. A er all the comments in this method, add the following code:

6. }

7. break;

8. In the Task List window, double-click the TODO: Exercise 2: Task 3b: When the user
closes the form, retrieve the details of the student from the form and use them to
create a new Student object task.

9. In the code editor, click at the end of the comment line, press Enter, and then type the
following code:

10. Student newStudent = new Student();

11. newStudent.FirstName = sf.firstName.Text;

12. newStudent.LastName = sf.lastName.Text;

 13. newStudent.DateOfBirth = DateTime.Parse(sf.dateOfBirth.Text,
CultureInfo.InvariantCulture);

Task 4: Assign the new student to a class and enable the user to save the details of the new
student

1. In the Task List window, double-click the TODO: Exercise 2: Task 4a: Assign the new
student to the current teacher task.

2. In the code editor, click at the end of the comment line, press Enter, and then type the
following code:

3. teacher.Students.Add(newStudent);

4. In the Task List window, double-click the TODO: Exercise 2: Task 4b: Enable saving
(changes are not made permanent un l they are wri en back to the database) task.

5. In the code editor, click at the end of the comment line, press Enter, and then type the
following code:

6. saveChanges.IsEnabled = true;

Task 5: Run the applica on and verify that the insert func onality works as expected

1. On the Build menu, click Build Solu on.

2. On the Debug menu, click Start Without Debugging.

3. Verify that the applica on starts and displays the ini al list of students.

4. Click the row containing the name Kevin Liu.

5. Press the Insert key and verify that the new student window appears.

6. In the First Name text box, type Darren.

7. In the Last Name text box, type Parker.

8. In the Date of Birth text box, type 02/03/2006, and then click OK.

9. Verify that Darren Parker has been added to the student list, and that the Save
Changes bu on is now enabled. The ID of a new student will be 0 un l they are saved to
the database in the next lab.

10. Close the applica on.

11. On the File menu, click Close Solu on.

Result: A er comple ng this exercise, users will be able to add new students to a class.

Exercise 3: Implemen ng Delete Func onality for the Student List

Scenario

In this exercise, you'll write code that enables an administrator to remove a student from the
students list. A list of students is displayed in the user interface of the applica on. If the user
selects a student and then presses a key on the keyboard, you'll check whether the key they
pressed was Delete. If they did press Delete, the applica on will prompt the user to confirm
that they want to remove the selected student from the class. If they do, the student will be
deleted from the student list for the appropriate class, otherwise nothing changes. Finally, you'll
run the applica on to verify that your code func ons as expected.

Task 1: Add logic to the key down method to detect if the Delete key has been pressed

1. In Visual Studio, on the File menu, point to Open, and then click Project/Solu on.

2. In the Open Project dialog box, browse to E:\Allfiles\Mod01\Labfiles\Starter\Exercise

3, click School.sln, and then click Open.

Note : If any Security warning dialog box appears, clear Ask me for every project in this
solu on check box and then click OK.

3. In the Task List window, double-click the TODO Exercise: 3: Task 1a: If the user pressed
Delete, remove the currently selected student task.

4. In the code editor, click at the end of the comment line, press Enter, and then type the
following code:

5. case Key.Delete:

6. student = studentsList.SelectedItem as Student;

Task 2: Prompt the user to confirm that they want to remove the selected student from the
class

1. In the Task List window, double-click the TODO: Exercise 3: Task 2a: Prompt the user to
confirm that the student should be removed task.

2. In the code editor, click at the end of the comment line, press Enter, and then type the
following code:

3. MessageBoxResult response = MessageBox.Show(

4. string.Format("Remove {0}", student.FirstName + " " + student.LastName),

 5. "Confirm",

6. MessageBoxBu on.YesNo,

7. MessageBoxImage.Ques on,

8. MessageBoxResult.No);

Task 3: Remove the student and enable the user to save the changes

1. In the Task List window, double-click the TODO: Exercise 3: Task 3a: If the user clicked
Yes, remove the student from the database task.

2. In the code editor, click at the end of the comment line, press Enter, and then type the
following code:

3. if (response == MessageBoxResult.Yes)

4. {

5. teacher.Students.Remove(student);

6. A er the final comment in this method, type the following code:

7. }

8. break;

9. In the Task List window, double-click the TODO: Exercise 3: Task 3b: Enable saving
(changes are not made permanent un l they are wri en back to the database) task.

10. In the code editor, click at the end of the comment line, press Enter, and then type the
following code:

11. saveChanges.IsEnabled = true;

Task 4: Run the applica on and verify that the delete func onality works as expected

1. On the Build menu, click Build Solu on.

2. On the Debug menu, click Start Without Debugging.

3. Verify that the applica on starts and displays the ini al list of students.

4. Click the drop-down menu containing the text Esther Valle: Class 3C.

5. Click the list item containing the text David Waite : Class 4B.

6. Click the row containing the name Jon Orton.

 7. Press Delete and verify that the confirma on prompt appears.

8. In the Confirm dialog box, click Yes, verify that Jon Orton is removed from the student
list, and then verify that the Save Changes bu on is enabled.

9. Close the applica on.

10. On the File menu, click Close Solu on.

Result: A er comple ng this exercise, users will be able to remove students from classes.

Exercise 4: Displaying a Student's Age

Scenario

In this exercise, you'll update the applica on to display a student's age instead of their date of
birth. You'll write code in the AgeConverter class that is linked to the grid column displaying
student ages. In this class, you'll write code to work out the difference between the current date
and the date of birth of the student, and then convert this value into years. Then you'll run the
applica on to verify that the Age column now displays age in years instead of the date of birth.

Task 1: Examine the MainWindow XAML

1. In Visual Studio, on the File menu, point to Open, and then click Project/Solu on.

2. In the Open Project dialog box, browse to E:\Allfiles\Mod01\Labfiles\Starter\Exercise

4, click School.sln, and then click Open.

Note : If any Security warning dialog box appears, clear Ask me for every project in this
solu on check box and then click OK.

3. On the Build menu, click Build Solu on.

4. In Solu on Explorer, expand School, and then double-click MainWindow.xaml and view
the XAML markup.
 5. Take note of the following lines in the markup:

6. <app:AgeConverter x:key="ageConverter"/>

7. . . .

8. <GridViewColumn Width="75" Header="Age"

9. DisplayMemberBinding="{Binding Path=DateOfBirth, Converter={Sta cResource

ageConverter}}" />

Task 2: Add logic to the AgeConverter class to calculate a student's age from their date of birth

1. In the Task List window, double-click the TODO: Exercise 4: Task 2a: Check that the
value provided is not null. If it is, return an empty string task.

2. In the code editor, click at the end of the comment line, press Enter, and then type the
following code:

3. if (value != null)

4. {

5. In the code editor, a er all the comments in this method, delete the following line of
code:

6. return "";

7. In the Task List window, double-click the TODO: Exercise 4: Task 2b: Convert the value
provided into a DateTime value task.

8. In the code editor, click at the end of the comment line, press Enter, and then type the
following code:

9. DateTime studentDateOfBirth = (DateTime)value;

10. In the Task List window, double-click the TODO: Exercise 4: Task 2c: Work out the
difference between the current date and the value provided task.

11. In the code editor, click at the end of the comment line, press Enter, and then type the
following code:

12. TimeSpan difference = DateTime.Now.Subtract(studentDateOfBirth);

13. In the Task List window, double-click the TODO: Exercise 4: Task 2d: Convert this result
into a number of years task.
 14. In the code editor, click at the end of the comment line, press Enter, and then type the
following code:

15. int ageInYears = (int)(difference.Days / 365.25);

16. In the Task List window, double-click the TODO: Exercise 4: Task 2e: Convert the number
of years into a string and return it task.

17. In the code editor, click at the end of the comment line, press Enter, and then type the
following code:

18. return ageInYears.ToString();

19. }

20. else

21. {

22. return "";

23. }

Task 3: Run the applica on and verify that the student's age now appears correctly

1. On the Build menu, click Build Solu on.

2. On the Debug menu, click Start Without Debugging.

3. Verify that the applica on starts and displays the ini al list of students, with their ages.

4. Click the row containing the name Kevin Liu.

5. Press Insert.

6. In the New Student for class 3C window, enter your first name in the First Name text
box, your last name in the Last Name text box and your date of birth in the Date of
Birth text box (in US date format - mm/dd/yyyy).
 7. Click OK and verify that your name and age display correctly on the student list.

8. Close the applica on.

9. On the File menu, click Close Solu on.

Result: A er comple ng this exercise, the applica on will display a student's age in years.

Congratula ons! You have now completed this lab. You should ensure you save your lab
environment. Failure to do so will result in the loss of all work.