1
00:00:00,370 --> 00:00:05,550
In the last video we updated the comic
book's controller to use our repository.

2
00:00:05,550 --> 00:00:11,130
Unfortunately, we encountered an error
when viewing our comic book detail view.

3
00:00:11,130 --> 00:00:12,920
Let's reproduce the error.

4
00:00:12,920 --> 00:00:18,370
Start the website and
once the /ComicBooks/detail route

5
00:00:18,370 --> 00:00:24,935
has finished loading,
update the URL to /ComicBooks/Detail/1.

6
00:00:24,935 --> 00:00:28,100
Okay, here's our exception.

7
00:00:29,520 --> 00:00:35,400
An exception of type
system.NullReferenceException occurred and

8
00:00:35,400 --> 00:00:38,050
under the additional information section,

9
00:00:38,050 --> 00:00:42,450
object reference not set to
an instance of an object.

10
00:00:42,450 --> 00:00:45,800
Click OK to dismiss the exception dialog.

11
00:00:45,800 --> 00:00:48,640
Visual Studio is highlighting
in yellow the line of

12
00:00:48,640 --> 00:00:50,970
code that the error occurred on.

13
00:00:50,970 --> 00:00:54,410
We can use the Autos window to
start debugging this error.

14
00:00:54,410 --> 00:00:58,190
The Autos window displays variables
used in the current statement and

15
00:00:58,190 --> 00:00:59,910
the previous statement.

16
00:00:59,910 --> 00:01:04,540
We can see here on this line that
the view's model property is null.

17
00:01:04,540 --> 00:01:08,850
In the offending line of code, we're
trying to access the display text property

18
00:01:08,850 --> 00:01:12,910
on a null object reference which
is why we're getting this error.

19
00:01:12,910 --> 00:01:15,780
So why is the model property null?

20
00:01:15,780 --> 00:01:17,480
Let's keep the website running.

21
00:01:17,480 --> 00:01:20,300
Press F5 to let execution continue,

22
00:01:20,300 --> 00:01:23,370
then switched to the current
books controller class.

23
00:01:23,370 --> 00:01:27,870
We're going to use Visual Studio's
Debugger, to further analyze this error.

24
00:01:27,870 --> 00:01:32,770
The Debugger is a powerful tool that
allows us to observe the runtime behavior

25
00:01:32,770 --> 00:01:36,490
of our website and
determine the location of errors.

26
00:01:36,490 --> 00:01:39,958
Breakpoints are used to suspend
the execution of our code.

27
00:01:39,958 --> 00:01:44,917
We can set a breakpoint by clicking
here in the lefthand margin.

28
00:01:44,917 --> 00:01:47,830
Breakpoints appear as red circles.

29
00:01:47,830 --> 00:01:52,450
Also, notice that the associated
line of code is highlighted in red.

30
00:01:52,450 --> 00:01:56,720
By setting a breakpoint on the first line
of code in our detail action method,

31
00:01:56,720 --> 00:02:00,000
Visual Studio will suspend
execution of our website

32
00:02:00,000 --> 00:02:02,070
when our action method is called.

33
00:02:02,070 --> 00:02:04,600
We can then step through our code.

34
00:02:04,600 --> 00:02:08,300
Now that we have our breakpoint set,
refresh the page in the browser.

35
00:02:09,690 --> 00:02:11,610
Switching back to Visual Studio,

36
00:02:11,610 --> 00:02:15,700
we can see that execution has
been suspended at our breakpoint.

37
00:02:15,700 --> 00:02:20,010
The yellow arrow indicates which
statement is about to be executed.

38
00:02:20,010 --> 00:02:21,811
Just like with our breakpoint,

39
00:02:21,811 --> 00:02:26,200
Visual Studio highlights
the associated statement in yellow.

40
00:02:26,200 --> 00:02:30,290
In the Autos window we can see
that the ID argument is 1,

41
00:02:30,290 --> 00:02:34,200
which matches the value that
we passed via the URL path.

42
00:02:34,200 --> 00:02:37,770
We could also hover the mouse
pointer over a parameter or

43
00:02:37,770 --> 00:02:40,200
any variable to see its value.

44
00:02:40,200 --> 00:02:42,570
With execution of our website suspended,

45
00:02:42,570 --> 00:02:47,670
we can now execute one line of code at
a time by stepping through our code.

46
00:02:47,670 --> 00:02:50,766
These three toolbar buttons can
be used to step through our code,

47
00:02:50,766 --> 00:02:55,360
step into, step over, and step out.

48
00:02:56,440 --> 00:03:02,510
Step into and step over both tell the
Debugger to execute the next line of code,

49
00:03:02,510 --> 00:03:05,120
but they handle method calls differently.

50
00:03:05,120 --> 00:03:08,220
Step into will execute the method call and

51
00:03:08,220 --> 00:03:12,600
suspend execution on the first
line of code in the method.

52
00:03:12,600 --> 00:03:16,220
Step over will execute
the entire method and

53
00:03:16,220 --> 00:03:21,220
suspend execution on the next line
of code after the method call.

54
00:03:21,220 --> 00:03:23,610
When you step into a method call,

55
00:03:23,610 --> 00:03:28,740
step out will finish executing that method
and return you to the calling method.

56
00:03:29,800 --> 00:03:34,272
If you're like me and
want to keep your hands on the keyboard,

57
00:03:34,272 --> 00:03:38,658
you can use the F11 key for
the step into command, F10 for

58
00:03:38,658 --> 00:03:42,780
step over, and shift + F11 for step out.

59
00:03:42,780 --> 00:03:47,310
Don't worry if the differences
between the step into, step over, and

60
00:03:47,310 --> 00:03:51,020
step out commands don't
immediately make sense.

61
00:03:51,020 --> 00:03:55,830
As we step through our code, I'll make it
clear which command I'm using and why.

62
00:03:55,830 --> 00:03:58,480
You'll get the hang of it in no time.

63
00:03:58,480 --> 00:04:03,510
I'm going to start by pressing F10 to
move execution to the next statement.

64
00:04:03,510 --> 00:04:05,135
Since we have an ID value,

65
00:04:05,135 --> 00:04:10,170
we'd expect this if statement to
evaluate to false and not execute.

66
00:04:10,170 --> 00:04:13,950
It's worth noting that since the if
statement expression doesn't include any

67
00:04:13,950 --> 00:04:19,470
method calls, the step into and step out
commands will both do the same thing.

68
00:04:19,470 --> 00:04:23,890
Now we're ready to call
the repository's GetComicBook method.

69
00:04:23,890 --> 00:04:28,060
I'm going to press F10 to step over
the call to the GetComicBook method.

70
00:04:29,570 --> 00:04:33,850
Notice here in the Autos window at
the comicBook variable is null.

71
00:04:33,850 --> 00:04:38,360
If we were to continue execution we'd
end up passing null to our view,

72
00:04:38,360 --> 00:04:40,100
which is causing our error.

73
00:04:40,100 --> 00:04:44,860
Looks like the GetComicBook method is
not behaving as we expected it to.

74
00:04:44,860 --> 00:04:49,660
We need to rewind execution in order
to step into that method call.

75
00:04:49,660 --> 00:04:53,860
Luckily, the Debugger
allows us to do just that.

76
00:04:53,860 --> 00:04:57,290
We can drag the yellow arrow
back up to that line of code.

77
00:04:58,770 --> 00:05:03,750
Now we can press F11 to step into
the GetComicBook method call.

78
00:05:03,750 --> 00:05:06,630
Now we're debugging
the GetComicBook method.

79
00:05:06,630 --> 00:05:11,180
I'm going to press F10 twice to
step down to the for each loop.

80
00:05:11,180 --> 00:05:14,850
Okay, so here's where we loop
through our available comic books

81
00:05:14,850 --> 00:05:18,840
in order to find the one whose ID
matches our ID argument value.

82
00:05:19,850 --> 00:05:25,430
I'll press F10 five times to step down
to the if statement inside of our loop.

83
00:05:25,430 --> 00:05:28,710
One, two, three, four, five.

84
00:05:28,710 --> 00:05:34,630
In the Autos window, we can see that our
ID argument value is 1, which is correct.

85
00:05:34,630 --> 00:05:38,690
But our comicBook.Id value is currently 0.

86
00:05:38,690 --> 00:05:40,960
That seems odd.

87
00:05:40,960 --> 00:05:45,400
We can expand the comicBook variable to
see all of the comicBook model properties.

88
00:05:46,700 --> 00:05:50,133
That's certainly the first
comic book in our list,

89
00:05:50,133 --> 00:05:55,900
The Amazing Spider-Man #700, but
the ID property is definitely 0.

90
00:05:55,900 --> 00:06:00,000
Let's continue to step through our
loop by pressing F10 five more times.

91
00:06:01,040 --> 00:06:05,280
Now we can see in the Autos window that
the comicBook variable has been updated

92
00:06:05,280 --> 00:06:11,329
with the second comic book in our list,
The Amazing Spider-Man #657.

93
00:06:11,329 --> 00:06:14,860
Its ID property value is also 0.

94
00:06:14,860 --> 00:06:18,610
Again, let's continue to the next
iteration of our loop by pressing F10.

95
00:06:18,610 --> 00:06:24,670
Our third comic book,
Bone number #50 has the same problem.

96
00:06:24,670 --> 00:06:28,140
Its ID property value is also 0.

97
00:06:28,140 --> 00:06:31,470
If we press F10 until we exit our loop,

98
00:06:31,470 --> 00:06:35,660
we can see that our comic book
to return variable is null.

99
00:06:35,660 --> 00:06:39,360
Press F10 three more times and
we'll be our controller's

100
00:06:39,360 --> 00:06:44,680
detail methods return statement,
which is about to pass null to our view.

101
00:06:44,680 --> 00:06:48,310
All three of our comic
books had ID values of 0.

102
00:06:48,310 --> 00:06:50,790
That's definitely a problem.

103
00:06:50,790 --> 00:06:53,100
Go ahead and stop the website.

104
00:06:53,100 --> 00:06:57,874
Let's look at our comic book data
in the ComicBookRepository class.

105
00:06:57,874 --> 00:06:59,950
Do you see the problem?

106
00:06:59,950 --> 00:07:02,610
See if you can resolve
the issue on your own.

107
00:07:02,610 --> 00:07:05,455
When you're ready,
proceed to the next video and

108
00:07:05,455 --> 00:07:07,240
we'll walk through the solution together.