1
00:00:00,570 --> 00:00:08,430
In our last video we completed our creation of Egypt's form that allowed us to more dynamically submit

2
00:00:08,610 --> 00:00:11,120
student enrollments to each course.

3
00:00:11,220 --> 00:00:18,500
And in this video we will be going through adding an automatic refresh for each form submission.

4
00:00:18,840 --> 00:00:25,050
So what happens right now is that we get a visual cue each time a student is successfully or not successfully

5
00:00:25,200 --> 00:00:25,490
added.

6
00:00:25,500 --> 00:00:31,050
However we do not know who is added because there is no list here for viewing would have to go back

7
00:00:31,050 --> 00:00:34,980
to list and view the enrollments each time which we want to avoid.

8
00:00:35,160 --> 00:00:42,510
And so what we're going to be doing is enhancing our current form such that each time a student is added

9
00:00:42,600 --> 00:00:43,730
successfully.

10
00:00:43,770 --> 00:00:48,490
Grid we'll be down here showing the list of students and it will refresh.

11
00:00:48,490 --> 00:00:54,600
And in addition to this we will be looking at the concept of partial forms the first modification we

12
00:00:54,600 --> 00:01:01,290
are going to make is to change the labels of or punch rows here on our form in Visual Studio.

13
00:01:01,290 --> 00:01:07,320
I added a meta data class for the enrollment table and we did that in our previous lecture.

14
00:01:07,320 --> 00:01:13,980
So I did it this time for the enrollment table but you would notice that I did add the data attribute

15
00:01:14,220 --> 00:01:16,220
tag for the ideas.

16
00:01:16,230 --> 00:01:20,200
However on our page they still said students ideas and of course.

17
00:01:20,250 --> 00:01:25,400
So long story short the display name doesn't really work for the ideas.

18
00:01:25,430 --> 00:01:28,340
But that's no problem because we can always just go to our view.

19
00:01:28,380 --> 00:01:34,170
That's our treat view and we can just change those manually someone to leave the original code there

20
00:01:34,410 --> 00:01:40,530
and I'm going to retype it so we'll see a label and see for and the advantage of this label for as you

21
00:01:40,530 --> 00:01:42,710
notice this is a label for element.

22
00:01:42,740 --> 00:01:48,270
And it's pointing to the course I.D. so read internally truly what this label and for attributes here

23
00:01:48,270 --> 00:01:55,410
does in the original each demo is its lows that when you click the label it automatically highlights

24
00:01:55,650 --> 00:02:02,760
whatever element is being targeted so the label for 4th I.D. would just highlights or jump on list with

25
00:02:02,760 --> 00:02:06,770
the horse idea as its I'd eat next inside this very label.

26
00:02:06,810 --> 00:02:13,320
This other costs and I'll just copy and paste the bootstrap passes that or that are generated with our

27
00:02:13,320 --> 00:02:16,650
control table that at sign because this is just pure HMO.

28
00:02:16,650 --> 00:02:18,510
This is not our Razr.

29
00:02:18,600 --> 00:02:23,500
So we have label for force course I.D. and we gave it the bootstrap classes and then the money we'll

30
00:02:23,500 --> 00:02:23,890
take.

31
00:02:23,910 --> 00:02:31,440
I would like to type is force and then I can just remove this line and I will repeat this for the student

32
00:02:31,530 --> 00:02:38,900
name and know that we've completed that we can change the button text to maybe enroll and then change

33
00:02:39,020 --> 00:02:41,910
the Button class to beat and success.

34
00:02:41,950 --> 00:02:46,510
So we get a green button and I'm just going to say Beattie and bash block.

35
00:02:46,570 --> 00:02:48,860
All right so you can get creative of course.

36
00:02:48,890 --> 00:02:55,190
No like we said in the beginning the expectation is that each time we click or submit and we get a successful

37
00:02:55,280 --> 00:03:02,660
response from or Jason or controller each time a student is added successfully then we expect that there

38
00:03:02,660 --> 00:03:04,240
is going to be a refresh.

39
00:03:04,250 --> 00:03:11,960
So what we're about to do is to create a partial view that is going to handle only displaying the students

40
00:03:11,990 --> 00:03:17,680
who are in a rules know the concept of a partial view is you want a view within a view.

41
00:03:17,720 --> 00:03:20,100
And let me just put that into perspective of it.

42
00:03:20,150 --> 00:03:26,450
So remember that we have a layered page and in the labeled page we actually render a view so a view

43
00:03:26,450 --> 00:03:28,530
is a part of the legal pitch.

44
00:03:28,550 --> 00:03:33,980
Well a partial view is actually designed to be a part of an existing view.

45
00:03:33,980 --> 00:03:40,130
So we have this view and what we want to do is to create another mini view inside this view that is

46
00:03:40,280 --> 00:03:46,370
solely responsible for loading a particular bit of information which would be the enrollments and then

47
00:03:46,370 --> 00:03:52,940
we're going to set it that when we change the value on the dropdown list that that grade will refresh

48
00:03:53,030 --> 00:03:59,990
automatically as well as each time that we submit an enrollment for a course and the students that that

49
00:03:59,990 --> 00:04:06,770
grade will refresh and show the new data someone to do one more modification here as I would want my

50
00:04:06,770 --> 00:04:08,840
grade to load underneath my form.

51
00:04:08,840 --> 00:04:16,850
So I just put on a horizontal rule just so we have a little line to show and then create a div and give

52
00:04:16,850 --> 00:04:19,310
this div an idea of data.

53
00:04:19,340 --> 00:04:23,930
So data or data div is going to store our partial view.

54
00:04:23,930 --> 00:04:26,470
Next up we want to actually create this partial view.

55
00:04:26,480 --> 00:04:32,600
So we follow the same procedure as we did in the first part when we're creating views where we write

56
00:04:32,630 --> 00:04:38,870
click or enrollments folder and we go ahead and click Add and view makes you want to give it a name

57
00:04:38,870 --> 00:04:45,560
someone to call this enrollments are show and using the underscore and friends is really just the naming

58
00:04:45,560 --> 00:04:46,340
convention.

59
00:04:46,340 --> 00:04:49,200
Some people would create a folder for the partials.

60
00:04:49,250 --> 00:04:54,920
I just use that on the score to be picked whenever I have a partial view and that is a pattern that

61
00:04:54,920 --> 00:04:56,900
you may see in other places.

62
00:04:56,900 --> 00:05:02,700
Next I want to select the template so the templates will be what kind of page do you want.

63
00:05:02,700 --> 00:05:07,970
And we would actually want a list because we want to list the students who are enrolled.

64
00:05:08,030 --> 00:05:12,610
So I have this list and the model that should govern this is enrollment.

65
00:05:12,640 --> 00:05:17,630
They would see that they already have this click but originally may look like this but once you click

66
00:05:17,630 --> 00:05:19,590
Create as partial you see that's it blank.

67
00:05:19,620 --> 00:05:26,210
So the little page because the partial view is actually going to inherits all its scripts and stars

68
00:05:26,210 --> 00:05:32,300
and all of that from whatever view it is being rendered in which inherently is inheriting that from

69
00:05:32,540 --> 00:05:33,380
the little page.

70
00:05:33,380 --> 00:05:37,090
So that will automatically get great out and then we click add.

71
00:05:37,130 --> 00:05:43,190
All right so we'll take a quick look at the resulting view we'll see that it looks just like our index.

72
00:05:43,220 --> 00:05:48,560
So if I go to index and I load it up you put almost all of them up side by side and see that they're

73
00:05:48,560 --> 00:05:49,760
pretty much identical.

74
00:05:49,760 --> 00:05:56,300
So essentially the list templates gives you whatever comes up in your index page or index page is actually

75
00:05:56,300 --> 00:05:58,230
using that list templates.

76
00:05:58,280 --> 00:05:59,870
So we're going to modify this a bit.

77
00:05:59,900 --> 00:06:00,900
We have a table.

78
00:06:00,920 --> 00:06:01,510
Yes.

79
00:06:01,550 --> 00:06:02,880
And we can leave.

80
00:06:02,880 --> 00:06:03,410
Grid.

81
00:06:03,410 --> 00:06:04,340
We can leave.

82
00:06:04,340 --> 00:06:08,780
Course title and you do notice that you have of course that title.

83
00:06:08,790 --> 00:06:13,070
So of course is the entity that is included in enrollment.

84
00:06:13,070 --> 00:06:19,940
And the reason I said included is that if we take a look at our index controller we will see kind of

85
00:06:19,940 --> 00:06:21,050
what is happening here.

86
00:06:21,050 --> 00:06:26,170
So when we load up via enrollments and we run that query you'll see that there is a part.

87
00:06:26,170 --> 00:06:32,090
This is not include and it includes each entity that is necessary for data.

88
00:06:32,090 --> 00:06:37,260
So this is called eager loading where you're seeing I'm bringing back each record here and then does

89
00:06:37,280 --> 00:06:42,110
include the corresponding or related data for each forwarding key.

90
00:06:42,260 --> 00:06:47,150
So do you recall that our enrollment stage is full of foreign keys at this course I.T. student I.D.

91
00:06:47,180 --> 00:06:48,320
and lecturer I.T..

92
00:06:48,320 --> 00:06:53,390
So we're just seeing bringing back all of the resulting information for the corresponding course I.T.

93
00:06:53,390 --> 00:07:00,170
student I.D. and lecturer I.T. and so in our view it would actually just allow us to see model which

94
00:07:00,170 --> 00:07:06,380
represents enrollment in dot whichever entity dot whichever property of that entity.

95
00:07:06,380 --> 00:07:12,040
So I can leave the course title and you'll see that student last name is coming back.

96
00:07:12,050 --> 00:07:17,350
We don't necessarily just want the last thing would on last day and come up first name or the full name.

97
00:07:17,360 --> 00:07:22,790
So these are really just the table headers like we would have seen when we looked at the enrollments

98
00:07:22,790 --> 00:07:24,410
list and that is why it looks this way.

99
00:07:24,440 --> 00:07:29,830
So we get to modify all of this essentially over these are just the display names for us.

100
00:07:29,830 --> 00:07:35,820
So really and truly what is being displayed when this is rendered is really just whatever meta tag or

101
00:07:35,830 --> 00:07:42,250
display name we put over the corresponding property in our middle class.

102
00:07:42,250 --> 00:07:46,540
I'm just going to do a few modifications as it relates to what we need to see.

103
00:07:46,540 --> 00:07:53,110
So we definitely want to see the greed and the horse died and the student name.

104
00:07:53,110 --> 00:07:56,070
I don't want this to render student last name only though.

105
00:07:56,070 --> 00:08:01,450
Someone to take this off and I want to say a student name because I'm one of your enduring values that's

106
00:08:01,450 --> 00:08:02,740
are their full names.

107
00:08:02,740 --> 00:08:08,280
I also don't need to see lectures first name or anything with the lecture right.

108
00:08:08,280 --> 00:08:08,990
No.

109
00:08:09,000 --> 00:08:13,130
And we can probably just render that one time so I can see that.

110
00:08:13,320 --> 00:08:20,610
So a table should have these three table hitters and one blank one I can display action doesn't mean

111
00:08:20,660 --> 00:08:22,800
you want to complete that action.

112
00:08:22,840 --> 00:08:26,470
You notice that this column is reserved for these buttons.

113
00:08:26,470 --> 00:08:27,730
What when you get there.

114
00:08:27,730 --> 00:08:36,210
So for each role coming back in or enrollments I'm going I need the grade so I'll leave that.

115
00:08:36,250 --> 00:08:38,050
I need the course title.

116
00:08:38,050 --> 00:08:40,830
Leave that and I don't need the students last name.

117
00:08:40,840 --> 00:08:45,510
What I really need is the student's full name so I can just replicate this.

118
00:08:45,540 --> 00:08:45,780
All right.

119
00:08:45,790 --> 00:08:51,170
So this is a display for where it's actually rendering whatever value is there and I just see student

120
00:08:51,430 --> 00:08:55,570
first name and space student last name.

121
00:08:55,570 --> 00:08:59,440
And if you want to wrap this all in the p tag or something else you can do that.

122
00:08:59,440 --> 00:09:06,160
We removed the column head off for the letters first name or the lecture inflammation so I just remove

123
00:09:06,170 --> 00:09:14,950
this altogether and for the actions well I would only want the ability to delete an enrollment.

124
00:09:14,960 --> 00:09:15,990
Someone to take this off.

125
00:09:16,060 --> 00:09:18,630
If you deem it necessary to have others then that's fine.

126
00:09:18,730 --> 00:09:24,130
So we'll be modifying this also to make sure that when we delete we don't have to navigate away from

127
00:09:24,130 --> 00:09:24,540
the page.

128
00:09:24,550 --> 00:09:29,610
It just removes that enrollment record and refreshes the grid accordingly.

129
00:09:29,680 --> 00:09:35,500
So we can see if changes means or option on one other thing we can remove this goes I don't want the

130
00:09:35,500 --> 00:09:40,400
ability to create already on the crease on screen so we don't need to render out a link for creation.

131
00:09:40,520 --> 00:09:46,890
Now that we've completed the view we need to actually add the action for this partial view in our fun

132
00:09:46,890 --> 00:09:52,750
shoulder so remember that no view gets invoked unless a corresponding action is present.

133
00:09:52,840 --> 00:09:57,550
So we need to give this action the name the same name as the partial use underspent.

134
00:09:57,550 --> 00:10:03,670
Copy that from the solution explorer just to make sure I don't miss type and I'm going to place it immediately

135
00:10:03,730 --> 00:10:05,110
after index.

136
00:10:05,230 --> 00:10:12,640
So they're going to be a few differences and you may see it done this way you may see people do it using

137
00:10:12,640 --> 00:10:15,210
actual results just the same so there are many ways to do this.

138
00:10:15,210 --> 00:10:20,730
I want to show you with partial v result because I like to see what is a partial view on what is on

139
00:10:21,510 --> 00:10:25,350
an option or your full view even from my controller side.

140
00:10:25,600 --> 00:10:30,680
So I'm going to see partial view results and notes.

141
00:10:30,820 --> 00:10:38,140
I'm not making this one asynchronous because at least in this version of MVC they don't support a synchronous

142
00:10:38,140 --> 00:10:39,700
partial views.

143
00:10:39,700 --> 00:10:41,480
So be very careful of that.

144
00:10:41,530 --> 00:10:44,620
So I'm making it public partial view results.

145
00:10:44,620 --> 00:10:45,960
Giving it the same name.

146
00:10:46,090 --> 00:10:50,400
And then inside of this I'm going to be returning partial.

147
00:10:50,460 --> 00:10:53,070
You know the work isn't done as yet.

148
00:10:53,140 --> 00:10:56,020
Because remember that our partial view requires data.

149
00:10:56,020 --> 00:11:04,480
It's looking for an I numerical object collection of enrollment object types.

150
00:11:04,510 --> 00:11:08,360
So that means before I can return I need to return it with some data.

151
00:11:08,590 --> 00:11:15,340
So just the same way with index that has the same list pattern the we load it up data and then we returned

152
00:11:15,400 --> 00:11:19,830
that data to the view we need to follow a similar pattern here.

153
00:11:19,870 --> 00:11:27,000
So I'm going to see the VAR enrollments and I can do that because enrollment is local to this function

154
00:11:27,040 --> 00:11:29,950
so it won't interfere with that enrollments.

155
00:11:30,010 --> 00:11:37,030
The variable and I'm going to say DV dot enrollments but then do recall that in our partial view we

156
00:11:37,030 --> 00:11:41,260
need details for course and we need details for the students.

157
00:11:41,260 --> 00:11:48,880
So I'm going to just borrow this code here from index that includes course based on the early voting

158
00:11:49,330 --> 00:11:57,370
record and students and then when to follow that pattern here and load those in know that I have my

159
00:11:57,370 --> 00:12:06,490
query done I'm going to return the partial view with enrollments and I'll just see to this or next action

160
00:12:06,520 --> 00:12:10,680
item would be to add a parameter to our option.

161
00:12:10,690 --> 00:12:17,080
So the parameter will serve the purpose of allowing us to filter on whatever values in that parameter

162
00:12:17,560 --> 00:12:25,340
take for instance the details action where it receives an idea and then checks if the is null.

163
00:12:25,340 --> 00:12:25,740
Sure.

164
00:12:25,750 --> 00:12:30,170
But then what's it really wants to I.D. for is to just find that one record.

165
00:12:30,430 --> 00:12:38,990
So we need to add filtering mechanism to our action based on of course I.D. so I can just add it and

166
00:12:38,990 --> 00:12:39,980
I'll make it available.

167
00:12:40,010 --> 00:12:44,130
So this is how you make it multiple by just putting on that question mark.

168
00:12:44,150 --> 00:12:50,850
It suggests that a no value is acceptable coming in when they're called in this option.

169
00:12:50,900 --> 00:12:51,270
All right.

170
00:12:51,560 --> 00:12:52,940
And we're going to see.

171
00:12:52,940 --> 00:12:55,530
Course I do.

172
00:12:55,550 --> 00:12:58,650
Just so we know exactly which I.D. is being referred to.

173
00:12:58,790 --> 00:13:03,620
The next thing we want to do is just start quarter because right now we're bringing back enrolments

174
00:13:03,910 --> 00:13:10,280
or all enrolments so we want to filter on this course I.D. I'm just going to inject that code here and

175
00:13:10,280 --> 00:13:14,000
I'm just going to break the line a bit so that we can see exactly what's happening.

176
00:13:14,150 --> 00:13:21,350
So you can actually do this without causing any errors and I'm just going to say dot we're and I'm adding

177
00:13:21,350 --> 00:13:22,130
on a filter.

178
00:13:22,150 --> 00:13:24,880
So this is me adding on a lumbar expression.

179
00:13:25,010 --> 00:13:32,820
If my weird flaws to see where Q dots course I.D. is equivalent to the parameter course.

180
00:13:33,110 --> 00:13:40,970
So doing this would actually allow that this view can be rendered without any force idea and of course

181
00:13:41,000 --> 00:13:47,420
a query like that where this is zero and we know that we have no course I'd be zero or this is no actually

182
00:13:47,750 --> 00:13:54,440
and we have no of course I'd even know will actually return an empty list to or partial view.

183
00:13:54,440 --> 00:14:00,980
So if you wanted this to be a bit more user friendly we could add an if statement in this partial to

184
00:14:00,980 --> 00:14:11,390
see if model model being our list and we can see a dot codes mean the number of items going back in

185
00:14:11,390 --> 00:14:16,290
this list is less than one or two columns as a function.

186
00:14:16,350 --> 00:14:25,820
So if model code is less than 1 then we can see 4 and then each one start to see no improvements in

187
00:14:25,970 --> 00:14:33,080
this course so that that can apply whether we get an empty said because remember that even if we get

188
00:14:33,080 --> 00:14:34,400
back our course I.D..

189
00:14:35,420 --> 00:14:41,390
If this course has little enrollments as it's then we want to let them know there are no currently no

190
00:14:41,390 --> 00:14:48,790
enrolments in this course and we can put this in a bootstrap class maybe text.

191
00:14:49,000 --> 00:14:54,230
But we can centralize it for sure and we can see it takes bash in full.

192
00:14:54,260 --> 00:14:54,620
All right.

193
00:14:55,010 --> 00:15:00,550
So then we will get this nice blue text that the user know that there are no enrolments in this class.

194
00:15:00,680 --> 00:15:07,730
And then we can drop the rest of this page and then else to see if this those not evaluates true then

195
00:15:07,730 --> 00:15:14,090
we want to print this entire two sentences a plus sign on the sides of this collapse everything is cut

196
00:15:14,450 --> 00:15:16,640
and paste and there we go.

197
00:15:16,640 --> 00:15:21,530
So the table gets rendered when the list is not empty.

198
00:15:21,530 --> 00:15:28,670
All right so now that we've tested that theory we're the partial view loads we're just going to remove

199
00:15:28,670 --> 00:15:34,270
this line because we don't want this to interfere with our Ajax scores.

200
00:15:34,280 --> 00:15:41,330
So what we want to do is make sure that on page load our selected value from or dropped on this gets

201
00:15:41,330 --> 00:15:45,440
rendered or gets used to render the partial view.

202
00:15:45,470 --> 00:15:51,710
So when we have this issue that option is just calling the option blankly with no parameters and so

203
00:15:51,710 --> 00:15:56,990
we'll always get that there is no enrolment because we'll be passing I know so I can just rule this

204
00:15:56,990 --> 00:16:03,620
or no I just come into default for further reference but then we go ahead and start writing some just

205
00:16:04,010 --> 00:16:10,740
jealous scripts RJ query Ajax scored so quick an easy way to write J.

206
00:16:10,790 --> 00:16:17,200
Query when we're loading a page is just to start a g query function so we know the pattern is they'll

207
00:16:17,210 --> 00:16:25,490
assign open and close parentheses and then in the open on outputs in function and just open and close

208
00:16:25,490 --> 00:16:28,630
everything so we can just see where things starts and stops.

209
00:16:28,820 --> 00:16:35,450
And I like seeing my curly brace and my parentheses said each other and then inside this function the

210
00:16:35,450 --> 00:16:41,670
first thing I want to do is know what the Course I.D. is that the selected value from this course I'd

211
00:16:41,760 --> 00:16:48,230
drop on this so I'm going to get this value from this control by targeting it using its ideas.

212
00:16:48,260 --> 00:16:58,770
So another sign open race open quotation marks and hashtag course I did.

213
00:16:59,150 --> 00:17:01,480
And then I would see a dot vol.

214
00:17:01,520 --> 00:17:07,280
And that's actually gets me the value that is going to be selected and I'm just going to put that inside

215
00:17:07,280 --> 00:17:13,890
of a variable SC divorce var c idea just for short.

216
00:17:14,330 --> 00:17:14,590
All right.

217
00:17:14,870 --> 00:17:21,660
So var S.A.T. is getting the car into the selected course I.D. value.

218
00:17:21,680 --> 00:17:27,080
Next we'll do an ajax call and it's going to look similar to this but I'm going to put in a few different

219
00:17:27,470 --> 00:17:30,800
parameters and options and I'll explain as I go along.

220
00:17:31,220 --> 00:17:38,600
So I started the ajax call dollar sign dots index and just fill in the other parts index and then we

221
00:17:38,600 --> 00:17:41,900
put in our options so the first option is the euro.

222
00:17:42,020 --> 00:17:47,320
So I could write you are like this but I'm going to write it a different way just so you have exposure

223
00:17:47,320 --> 00:17:48,530
to all of your options.

224
00:17:48,530 --> 00:17:51,230
Someone to write at sign you are.

225
00:17:51,240 --> 00:17:58,180
So I'm using an HMO helper function you are a dot option.

226
00:17:58,220 --> 00:17:58,680
All right.

227
00:17:58,820 --> 00:18:01,910
So you see that there are different ways to approach this.

228
00:18:01,920 --> 00:18:06,480
There is no one we always set in stone so you see different patterns are on the play.

229
00:18:06,470 --> 00:18:10,700
So on to show you what you me see during your research.

230
00:18:10,700 --> 00:18:11,020
All right.

231
00:18:11,030 --> 00:18:16,790
And then we have enrollment partial and just saying we were the HMO option with the option and the controller

232
00:18:16,880 --> 00:18:19,270
just rewrite it in the same fashion.

233
00:18:19,460 --> 00:18:23,050
The next option we want is the data type.

234
00:18:23,140 --> 00:18:29,400
Now our data this time won't be Jason but rather we'll use each key.

235
00:18:29,570 --> 00:18:34,520
So you have different data types so different situations in the situation we are loading each gem of

236
00:18:34,520 --> 00:18:35,320
data.

237
00:18:35,360 --> 00:18:38,940
So I want the data type to be HMO.

238
00:18:39,140 --> 00:18:48,570
And on that note I'll just add content type and I'll just fill in that char set sitting for each GMO.

239
00:18:48,590 --> 00:18:48,850
All right.

240
00:18:48,860 --> 00:18:55,830
So we're seeing that our guns and types should be off type HMO with charts at UTF it thinking just fill

241
00:18:55,850 --> 00:18:56,240
that in.

242
00:18:56,240 --> 00:18:59,410
Also I don't think that one is absolutely necessary.

243
00:18:59,420 --> 00:19:06,560
What is good practice just to make sure that the Carter the cart character assets are being returned

244
00:19:07,020 --> 00:19:12,200
and will set the type to be get since we're not posting these at this time.

245
00:19:12,200 --> 00:19:13,610
We're getting data.

246
00:19:13,610 --> 00:19:20,090
And remember your commas after each option as we go along and then we have data.

247
00:19:20,450 --> 00:19:29,210
So of course we need to pass data in because our action is expecting some form of data as much as it

248
00:19:29,210 --> 00:19:35,000
may be for giving because we've put a notable parameter there but we are expected to pass in data to

249
00:19:35,000 --> 00:19:36,260
get the actual results.

250
00:19:36,650 --> 00:19:42,470
So we need to see horse I.D. since that's the name of the parliament and it's expecting and then we

251
00:19:42,470 --> 00:19:45,640
will pass in our loaf of value which is S.A.T..

252
00:19:45,650 --> 00:19:50,750
All right so I didn't give this the name horse I.D. because then you may get confused if you are of

253
00:19:50,750 --> 00:19:52,480
course I.D. call on of course I.D..

254
00:19:52,490 --> 00:19:59,750
So I did this a CIC just so you could see clearly that this is corresponding on the on the left side

255
00:19:59,750 --> 00:20:02,280
is corresponding with the parliament that's expected.

256
00:20:02,360 --> 00:20:07,810
And on the right side corresponds with whatever value we're passing into that.

257
00:20:07,970 --> 00:20:11,450
And then after data we have success.

258
00:20:11,450 --> 00:20:19,070
So we need to define a function that gets called when a successful call is made and when a successful

259
00:20:19,070 --> 00:20:25,390
call is made it is expected that we get back some form of data in the form of this list.

260
00:20:25,460 --> 00:20:37,550
So I'm going to see data and in this function we're going to populate our data div with our data.

261
00:20:37,970 --> 00:20:43,100
So we're already calling our partial view and we're just going to see inside of that data do we want

262
00:20:43,100 --> 00:20:45,530
to load this partial view with this data.

263
00:20:45,890 --> 00:20:53,180
So I'm going to put in some animations so we can see whole poll Fuji query really is and how it's easy

264
00:20:53,180 --> 00:21:00,440
to make a nice interactive application so hashtag data targeting the element bytes I.T. and I'm going

265
00:21:00,440 --> 00:21:01,990
to say feed oats.

266
00:21:02,150 --> 00:21:09,160
So this will make it actually kind of bland coat and you can both set up by adding the speed or.

267
00:21:09,170 --> 00:21:09,400
Right.

268
00:21:09,410 --> 00:21:16,210
So remember that we did fields earlier we could put in fast or slow whatever speedy ones.

269
00:21:16,400 --> 00:21:25,410
But I wanted to feed oats and then I'm going to load the HMO area with content coming from our data.

270
00:21:25,550 --> 00:21:29,360
And then once it's loaded I wanted to feed in.

271
00:21:29,420 --> 00:21:29,720
All right.

272
00:21:30,080 --> 00:21:36,080
So this will actually get called once a page is loaded so traditionally with Jake where you would see

273
00:21:36,080 --> 00:21:44,270
something like a signed document already which means or the page is no loaded the DOM is no ready to

274
00:21:44,270 --> 00:21:45,600
interact with JavaScript.

275
00:21:45,710 --> 00:21:49,300
But then for a short time you can just write it like this.

276
00:21:49,400 --> 00:21:49,700
All right.

277
00:21:49,730 --> 00:21:53,900
So this should execute wants a page loads.

278
00:21:53,900 --> 00:21:58,820
So I'm just going to Debo quickly and I set a breakpoint on my controller so that we can see when it

279
00:21:58,820 --> 00:22:01,360
gets called and what value gets passed to it.

280
00:22:01,510 --> 00:22:06,280
Okay so now we're going to bro's to or create page and then we're going to watch as visual studio if

281
00:22:06,290 --> 00:22:13,370
it's our points and we see that course Heidi is indeed being passed into our partial view and the end

282
00:22:13,370 --> 00:22:17,930
result of all of this should be that the queries run against number two I.D..

283
00:22:18,440 --> 00:22:24,470
So only those enrollments should go back and voila there we see that we're running a filter based on

284
00:22:24,470 --> 00:22:32,480
the selected course and we're only seeing those students of course we haven't talked up anything when

285
00:22:32,480 --> 00:22:35,280
this volume changes so that is our next mission.

286
00:22:35,380 --> 00:22:41,120
We're when it changes it should actually reload know what we need on our drop.

287
00:22:41,130 --> 00:22:48,290
Don is a change event so Jake where it makes it just as easy to create that change event just the same

288
00:22:48,290 --> 00:22:54,860
way that we did a change event here just the same way that we did an event here on our text box.

289
00:22:54,860 --> 00:22:56,390
We did an autocomplete.

290
00:22:56,540 --> 00:23:02,670
So it is a similar pattern when we want to drop down list change.

291
00:23:02,840 --> 00:23:05,870
So to do that we can just targets are elements.

292
00:23:05,870 --> 00:23:10,270
So we just a dollar sign and we know that we're dealing with.

293
00:23:10,270 --> 00:23:13,460
Course I.D. as our elements.

294
00:23:13,490 --> 00:23:21,060
And then we put on the change events and then inside the change event and I'm just going to put some

295
00:23:21,060 --> 00:23:21,630
clothes on.

296
00:23:21,770 --> 00:23:25,200
And at the same time we have a function.

297
00:23:25,640 --> 00:23:32,270
And then in this function what we need to do is get the current value of course I.D. so we can actually

298
00:23:32,270 --> 00:23:39,870
just replicate this where we just get see I.D. and the current value.

299
00:23:39,980 --> 00:23:42,310
And of course once again this is its own block.

300
00:23:42,320 --> 00:23:43,310
This is its own block.

301
00:23:43,310 --> 00:23:46,450
So the CIA's won't interfere with each other.

302
00:23:46,460 --> 00:23:46,790
All right.

303
00:23:47,330 --> 00:23:51,620
And then we need to repeat this whole block of code.

304
00:23:51,690 --> 00:23:55,550
No there's a principle in programming that says Don't repeat yourself.

305
00:23:55,550 --> 00:24:02,840
It's an acronym that spells dry and the principle is that if you have a block of code that can do something

306
00:24:03,140 --> 00:24:09,470
and it is one supposed to be versatile enough to operate in different scenarios then you shouldn't have

307
00:24:09,470 --> 00:24:10,850
it all over the place.

308
00:24:11,120 --> 00:24:17,300
So far no I'm going to just copy and paste it but what we aim to do is put this block of code in its

309
00:24:17,300 --> 00:24:23,940
own function and then we can call it from multiple places without having all of this repeated.

310
00:24:24,050 --> 00:24:31,250
But for now I'm just going to repeat it and we'll just test that our click event works.

311
00:24:31,310 --> 00:24:37,100
Now at this point to me I want to go ahead and test and if you do you may realize that it's not working

312
00:24:37,100 --> 00:24:45,730
and that's because we are invoking Jake worry here but we are not putting it inside off a g core block.

313
00:24:45,750 --> 00:24:49,240
And by Jake we're block I mean this function.

314
00:24:49,250 --> 00:24:54,500
So remember that I said every time we start off with Jake or do we see something like this with dollar

315
00:24:54,500 --> 00:24:58,700
sign documents already or you see this which is a shorthand.

316
00:24:58,700 --> 00:25:05,210
So whatever Jake or record you're able to write needs to go inside of that block so the age outs the

317
00:25:05,750 --> 00:25:08,630
event all of that needs to be inside of that block.

318
00:25:08,630 --> 00:25:14,210
Second is this I can't start on the block because here is a block for itself.

319
00:25:14,210 --> 00:25:18,790
This is just a standard J query sorry javascript function.

320
00:25:18,830 --> 00:25:24,260
These are JavaScript functions but this is a J word block and this is a g square block someone to put

321
00:25:24,260 --> 00:25:30,630
this inside here and actually we could just merge all of these into one.

322
00:25:30,680 --> 00:25:34,990
So this J for function block really ends here.

323
00:25:35,210 --> 00:25:42,440
And any other G query code that we want to put in we could just make sure that it is kind of self contained.

324
00:25:42,980 --> 00:25:43,340
All right.

325
00:25:43,580 --> 00:25:54,800
So I'm putting in my force I'd be on change function block and it is somewhat autonomous to anything

326
00:25:54,800 --> 00:26:01,130
else that is inside of this block and I just align everything so we can see where everything starts

327
00:26:01,130 --> 00:26:02,480
and stops.

328
00:26:02,490 --> 00:26:08,780
No when we attempt to debug this we will see an improvement in the behavior of our application where

329
00:26:09,140 --> 00:26:12,520
when we change the dropdown list the grid reloads.

330
00:26:12,840 --> 00:26:13,130
Okay.

331
00:26:13,150 --> 00:26:18,050
Now with our page loaded I'm going to proceed to change and then we'll see what happens.

332
00:26:18,050 --> 00:26:24,170
So I left my breakpoint on the option and when I change with calculus you see it gets the option and

333
00:26:24,170 --> 00:26:25,670
we're getting a new course I.D..

334
00:26:25,670 --> 00:26:30,630
So the filtering should bring back only persons enrolled in calculus.

335
00:26:30,770 --> 00:26:36,140
And if I ring back MVC on that our dollar programming I think that was empty.

336
00:26:36,140 --> 00:26:41,550
Then we see our if statement is working the enrollments in this course.

337
00:26:41,870 --> 00:26:44,530
And we can go ahead and just make sure everything works.

338
00:26:44,540 --> 00:26:51,400
So just add on Ledford and enroll students and we see that we still have one more adjustment to make

339
00:26:51,410 --> 00:26:59,900
because this this does not reload if we change it and others remove my breakpoints here and change it

340
00:26:59,900 --> 00:27:06,500
back to Java programming then we see that and that it was enrolled so what we need to happen is that

341
00:27:06,500 --> 00:27:15,860
when we click this button this grid actually reloads when a successful enrollment occurs.

342
00:27:15,890 --> 00:27:21,950
So I'm not going to come out of debug mode I'm just going to go to my create and really and truly I

343
00:27:21,950 --> 00:27:26,840
just need a few more lines of code to meet that work.

344
00:27:26,840 --> 00:27:34,070
No the first adjustments I'm going to make is to repeat is to reduce the repetition that is all over

345
00:27:34,070 --> 00:27:34,490
the place.

346
00:27:34,520 --> 00:27:41,900
So we see that we're repeating this block of code here that is loading our grid and right nowhere threatened

347
00:27:41,960 --> 00:27:43,430
to repeat it once more.

348
00:27:43,430 --> 00:27:45,650
So I'm going to create a function.

349
00:27:45,700 --> 00:27:50,660
And once again because I'll be doing something that is zouk or like this function needs to be inside

350
00:27:50,660 --> 00:28:01,140
of object or block someone to create a function right here and I'm going to call it's Lord enrollments.

351
00:28:01,250 --> 00:28:05,850
I mean you can create the function and call it whatever you like and it should receive a part of it

352
00:28:06,020 --> 00:28:14,030
a parameter called CIPA client and then inside this function I'm going to take all of this block of

353
00:28:14,030 --> 00:28:21,560
code and the place it's so we have our ups and others events.

354
00:28:21,990 --> 00:28:25,380
So we have CAIB which is expected to be passed in anytime.

355
00:28:25,380 --> 00:28:29,490
This is called and this will handle our reload.

356
00:28:29,730 --> 00:28:33,630
So that means when the page is loaded we just replace.

357
00:28:33,630 --> 00:28:34,760
We just tackle this code.

358
00:28:34,770 --> 00:28:41,790
Although the page load so I need to make sure I make a function called here first thing in my j query

359
00:28:41,820 --> 00:28:49,610
so that once the page is loaded this will execute first and I'm passing NCIC which is being siphoned

360
00:28:49,610 --> 00:28:54,670
from the dropdown list and that is the first reference to it.

361
00:28:54,770 --> 00:29:01,790
And the second reference to it would be inside of my change function for the dropped on this I can dis

362
00:29:01,790 --> 00:29:06,290
remove all of this and replace it with one line load enrollments.

363
00:29:06,440 --> 00:29:08,520
And once again you have the CIA.

364
00:29:08,770 --> 00:29:09,290
No.

365
00:29:09,320 --> 00:29:13,850
What we really want to address is reloading after a successful addition.

366
00:29:13,910 --> 00:29:17,080
So I'm just going to copy these two lines.

367
00:29:17,600 --> 00:29:26,410
And if you recall our code that handles the successful additions is our unsuccessful added function

368
00:29:26,570 --> 00:29:31,310
so we just look for added and we see the error that was added.

369
00:29:31,430 --> 00:29:31,730
All right.

370
00:29:31,730 --> 00:29:34,880
And the result is success.

371
00:29:34,880 --> 00:29:37,600
So if it is successful then we want to reload.

372
00:29:37,610 --> 00:29:45,950
So we had forward for feeding oats those grids so I can just add the code underneath all of this and

373
00:29:46,230 --> 00:29:48,870
added underneath this element line.

374
00:29:49,130 --> 00:29:57,280
And here we just add that we're getting the course IP and we're passing it into the function and so

375
00:29:57,280 --> 00:30:04,840
that should take care of calling the load enrollments anytime we want or greed off enrollments to be

376
00:30:04,840 --> 00:30:06,790
refreshed so still in debug mode.

377
00:30:06,790 --> 00:30:13,720
I'm just going to see if these adjustments and then went to reload my page and remember on page load

378
00:30:13,870 --> 00:30:22,600
it loads the grid on dropped on this change it loads the grid and upon enrollment and I just put in

379
00:30:22,600 --> 00:30:30,130
an enrollment so that didn't work because of a scoping issue where our function added which is what

380
00:30:30,130 --> 00:30:39,630
is called upon a successful operation from our Ajax form is outside of the scope of this Jake or block.

381
00:30:40,060 --> 00:30:47,680
And the funny thing is that if we add it to the scope of the Jake or block then the Ajax form will not

382
00:30:47,680 --> 00:30:49,000
be able to detect it.

383
00:30:49,030 --> 00:30:54,430
So that puts us in a weird position where we're actually going to have to repeat the code at least for

384
00:30:54,430 --> 00:30:56,600
now just to get this working.

385
00:30:56,650 --> 00:30:59,510
So I'll just reproduce this.

386
00:30:59,590 --> 00:31:04,010
I noticed that function added is invoking its own do or block.

387
00:31:04,350 --> 00:31:06,620
So that we could use a dictionary here.

388
00:31:06,640 --> 00:31:07,020
All right.

389
00:31:07,390 --> 00:31:15,670
So I'm just going to load it up there inside of this security function and we should see an improvement

390
00:31:16,150 --> 00:31:18,010
in our behavior.

391
00:31:18,010 --> 00:31:27,650
All right someone attempts to add a student to shut up fantasy sharp and there we see that we actually

392
00:31:27,650 --> 00:31:31,670
get that reload and that student is added real time.

393
00:31:31,670 --> 00:31:32,000
All right.

394
00:31:32,000 --> 00:31:35,170
And then if we tried to add again then we get our error message.

395
00:31:35,270 --> 00:31:39,530
And if we switch we see that our food coloring works.

396
00:31:39,530 --> 00:31:46,670
So this is how you can go about developing a nice interactive farm and experience for your users and

397
00:31:46,730 --> 00:31:55,280
easing the need to navigate between screens someone to challenge you to actually add similar behavior

398
00:31:55,550 --> 00:31:57,790
to the delete option.

399
00:31:57,800 --> 00:32:03,260
I'm going to do it and I'm going to check in the code so that you have it's a reference but I want you

400
00:32:03,410 --> 00:32:09,890
to actually try and do it based on everything that you have learned up to know you would also notice

401
00:32:09,890 --> 00:32:16,400
that navigating between these course selections this error message does not disappear.

402
00:32:16,400 --> 00:32:23,570
So those are little housekeeping things you probably want to do to your page where on change event you

403
00:32:23,570 --> 00:32:26,630
probably set those displays to none.

404
00:32:26,630 --> 00:32:33,950
So I'm just going to copy this quickly and look for my on change event which is here and I'm going to

405
00:32:33,950 --> 00:32:35,540
see on change.

406
00:32:35,540 --> 00:32:38,540
I want to feel it's anything that is on the screen.

407
00:32:38,930 --> 00:32:44,960
So if there is anything on the screen just feed it oats and if I try that again well I would have to

408
00:32:44,960 --> 00:32:53,170
refresh just to make sure it's working someone to invoke an arrow and then if I move to another page

409
00:32:53,170 --> 00:32:56,920
you see that it disappears and everything reloads quite well.

410
00:32:56,920 --> 00:32:57,240
All right.