1
00:00:01,870 --> 00:00:07,840
It goes in this video we will begin to implement our J query auto complete function.

2
00:00:07,960 --> 00:00:11,910
So it those with enrolling students in a course.

3
00:00:12,070 --> 00:00:17,620
But before we get into all of that I want to go through quickly some adjustments that I have made to

4
00:00:17,620 --> 00:00:22,510
the application since the last video and you can feel free to emulate these if you wish.

5
00:00:22,990 --> 00:00:31,450
Firstly I removed the contact and about links from or not bar No we only have home courses students

6
00:00:31,450 --> 00:00:32,570
and enrolments.

7
00:00:32,570 --> 00:00:32,920
All right.

8
00:00:32,950 --> 00:00:38,560
And we could actually just add lecturers here considering that we added a module to managed lecturers

9
00:00:38,740 --> 00:00:49,150
just quickly so are enough bar no only has links to our modules that we have implemented or are implementing.

10
00:00:49,570 --> 00:00:58,720
Secondly you would notice that I have styles that render and this is rendering some styles for Duke

11
00:00:58,780 --> 00:01:02,980
or UI so I added a new bundle to my one to one fig for J.

12
00:01:02,980 --> 00:01:07,430
Query why and I'm including the bass.

13
00:01:07,480 --> 00:01:15,280
All that C assist which includes the bass that census and the things that census files as well as I

14
00:01:15,280 --> 00:01:20,710
had did because I was running an experiment but this should really be autocomplete not CSF.

15
00:01:20,920 --> 00:01:31,240
So I am adding these two files to my overall C Asus imports and I am referencing them in the G.

16
00:01:31,270 --> 00:01:39,790
Query you I says render it and if the need arises to have more than we can just put them in as we know

17
00:01:39,790 --> 00:01:42,650
we need to once again order matters.

18
00:01:42,700 --> 00:01:49,990
So you'd want to make sure you include all of the base files first before the individual CSA files.

19
00:01:49,990 --> 00:01:57,220
All right so now before we get into our G core excitement I want us to just run back over to our documentation

20
00:01:57,220 --> 00:02:02,220
here given to us by G where UI dot com and just take a look at the autocomplete feature.

21
00:02:02,320 --> 00:02:07,880
What we're aiming for is when we type a student's name here and select it.

22
00:02:07,930 --> 00:02:12,660
And in this example it is made with programming languages.

23
00:02:12,670 --> 00:02:18,970
So let's say the programming languages would be our student names and I type something like H S then

24
00:02:18,970 --> 00:02:25,840
the expectation is that any student whose name contains H S should come up in this dropdown so if I

25
00:02:25,840 --> 00:02:28,190
type C need to get a better picture.

26
00:02:28,540 --> 00:02:34,640
And then when I select that it will be that students that will be enrolled.

27
00:02:34,690 --> 00:02:36,820
Once I click Create.

28
00:02:36,810 --> 00:02:39,450
So we're doing it in pieces.

29
00:02:39,610 --> 00:02:43,900
Right now we're just dealing with implementing the autocomplete in the next video.

30
00:02:43,900 --> 00:02:51,690
Then we will deal with actually effecting that adding and enrollment functionality back in Visual Studio

31
00:02:51,700 --> 00:02:58,360
we start this exercise by first finding the create value for our enrollments and then we're going to

32
00:02:58,360 --> 00:03:06,880
do a bit of refractory rearranging of our fields and just by way of recap we have a field or grade we

33
00:03:06,880 --> 00:03:13,180
have a field for course I.D. which gave us a drop down list with all of the courses in there.

34
00:03:13,180 --> 00:03:21,640
We have a field for students which give us a drop bonus for students and another one for lecturers once

35
00:03:21,640 --> 00:03:27,820
again with a drug and in case you've forgotten and you're wondering why we have so many dropdown lists.

36
00:03:27,820 --> 00:03:34,990
Once there is a one to many relationship meaning with enrollments it's literally many to one with all

37
00:03:34,990 --> 00:03:41,200
of these so many students can be in the enrollment soup many courses can be in the enrollment tables

38
00:03:41,200 --> 00:03:42,690
and many lectures.

39
00:03:42,820 --> 00:03:49,900
You'll find that document in scaffolding will actually give you dropdown lists auto generated giving

40
00:03:49,900 --> 00:03:56,770
you all of your possible options and all that's really gets passed by is the course I.D. since that

41
00:03:56,770 --> 00:04:00,970
is what the enrollment table is really storing anyway.

42
00:04:01,030 --> 00:04:07,830
So you want drop bone lists for some of these and for some of these views you want to change them up

43
00:04:07,830 --> 00:04:12,380
a bit at the time of enrollment then we probably don't need and greed.

44
00:04:12,400 --> 00:04:18,030
So actually the greed read and remember in the database that we would have allowed no fourth grade.

45
00:04:18,040 --> 00:04:24,400
So at the time of creating an enrollments that is adding across seeing who is the lecturer and adding

46
00:04:24,400 --> 00:04:27,300
the students we really don't need the grade.

47
00:04:27,430 --> 00:04:33,700
So I can remove this as at the time of creation of often enrollment we probably don't know who the lecturer

48
00:04:33,700 --> 00:04:34,000
is.

49
00:04:34,210 --> 00:04:37,350
So we don't need the lecture idea right.

50
00:04:37,350 --> 00:04:38,100
No.

51
00:04:38,290 --> 00:04:46,270
All of that is really important is to specify which class we're dealing with and which student or students

52
00:04:46,360 --> 00:04:48,640
will be assigned to this class.

53
00:04:48,790 --> 00:04:55,090
Part of this activity will be to make this entire procedure dynamic enough that you don't have the user

54
00:04:55,090 --> 00:04:59,380
won't have to browse a and browse buck every time they want to add a student.

55
00:04:59,380 --> 00:05:06,080
They can just select a course at ABA and a part of the page will refresh but we're not there yet.

56
00:05:06,080 --> 00:05:09,230
Right now we're just dealing with the auto complete.

57
00:05:09,290 --> 00:05:15,680
One to reference the query documentation once again just so we have an appreciation for the code that

58
00:05:15,680 --> 00:05:22,330
we're about to write and the part of the auto complete documentation that I want to focus on is a remote

59
00:05:22,350 --> 00:05:24,830
juice and P data service.

60
00:05:24,830 --> 00:05:25,120
All right.

61
00:05:25,370 --> 00:05:31,760
So we're going to be using Jake or Ajax and you see that me reference it declare Egypt's which will

62
00:05:31,760 --> 00:05:38,360
actually call a link or call adjacent endpoints that we are going to meet right.

63
00:05:38,360 --> 00:05:38,840
No.

64
00:05:38,960 --> 00:05:46,310
That will serve up some list from the database in this case the list of students based on what is being

65
00:05:46,310 --> 00:05:47,120
typed.

66
00:05:47,150 --> 00:05:54,380
So the example here is that they have a database of birds and they have a Euro for the search and they're

67
00:05:54,660 --> 00:05:58,370
specifying the data type and what should be searched for.

68
00:05:58,370 --> 00:06:05,870
So that's what data represents the term to be searched for and then upon a successful query and it will

69
00:06:05,870 --> 00:06:09,590
return the data and they will show the data.

70
00:06:09,650 --> 00:06:09,950
All right.

71
00:06:10,310 --> 00:06:16,700
And then when one is selected so that is actually just an event in this entire process.

72
00:06:16,730 --> 00:06:24,820
So the source of the data will be over Egypt's far they're seeing the minimum length for any search

73
00:06:24,820 --> 00:06:32,060
query should be to so two characters and then you trigger the search and then once it is selected then

74
00:06:32,090 --> 00:06:38,530
they would wish to write to the love that you selected this with that value on that idea.

75
00:06:38,600 --> 00:06:40,930
Now let us begin our journey.

76
00:06:40,940 --> 00:06:43,340
Something to tie up this script thing.

77
00:06:43,490 --> 00:06:46,200
It's the third part of my page.

78
00:06:46,280 --> 00:06:52,910
I'm just putting into the top tier of the view so that we can have a distinct section for it to me probably

79
00:06:52,970 --> 00:06:53,890
later on.

80
00:06:53,900 --> 00:06:56,690
Extract this and put in a script file and reference it directly.

81
00:06:56,690 --> 00:06:57,500
That's fine.

82
00:06:57,590 --> 00:07:01,430
But for now I'm just going to write the thread here and because I'm using J.

83
00:07:01,430 --> 00:07:01,960
Query.

84
00:07:01,970 --> 00:07:06,510
Sometimes you would start off J query as document dots ready.

85
00:07:06,530 --> 00:07:12,690
You can actually just see dollar sign function and then you open and close.

86
00:07:12,700 --> 00:07:18,350
I like to just close my functions at the same time.

87
00:07:18,470 --> 00:07:20,710
We're just getting warmed up here.

88
00:07:20,720 --> 00:07:25,130
But before we even start writing Jake where we have to make sure that we have the appropriate controls

89
00:07:25,130 --> 00:07:26,680
for what we're able to do.

90
00:07:26,750 --> 00:07:33,680
Now remember that we want to be able to type the student's name and we have a drop down list working

91
00:07:33,680 --> 00:07:33,890
with.

92
00:07:33,890 --> 00:07:39,850
So we can't type the student's name with a drop down list and there's another factor to this that the

93
00:07:39,860 --> 00:07:45,010
drop below list is actually tracking the students i.e. a text box won't be checking the students I.D.

94
00:07:45,030 --> 00:07:46,850
or the tracking the name of the student.

95
00:07:47,120 --> 00:07:54,110
So in order to facilitate the need for the user to see the name in a text box and the actual solution

96
00:07:54,110 --> 00:08:00,410
to get an I.D. upon the submission of the form we have to take this out.

97
00:08:00,880 --> 00:08:06,650
So in the sense that you raised this and then went to replace it with two controls a text box and a

98
00:08:06,650 --> 00:08:07,570
hidden field.

99
00:08:07,600 --> 00:08:11,840
All right so I did that real quickly and I'll just walk you through the two lines of code which really

100
00:08:11,840 --> 00:08:13,130
shouldn't be that far.

101
00:08:13,340 --> 00:08:18,650
We have our each helper here and we're using it for you could have used that text box for.

102
00:08:18,650 --> 00:08:20,330
That's fine.

103
00:08:20,330 --> 00:08:26,030
Then you'd realize that the anatomy of the edit 4 and the text box for our kind of different when it

104
00:08:26,030 --> 00:08:29,430
comes to referencing or C assist classes.

105
00:08:29,540 --> 00:08:37,460
But either way they both need model and we're associating the text box with model but students thought

106
00:08:37,490 --> 00:08:45,590
first name and the reason I'm using the first name is that we we did not use the full name column in

107
00:08:45,680 --> 00:08:48,380
students we used first name and last name.

108
00:08:48,380 --> 00:08:54,410
And I'm just going to use this because I just need a text box does remember the Edit 4 is going to yield

109
00:08:54,470 --> 00:09:00,410
a control that is in keeping with whatever data type we're telling that we need it for.

110
00:09:00,410 --> 00:09:03,910
So in this case it's a text we'll get that text box.

111
00:09:03,980 --> 00:09:11,780
I could have used last name if I used a view model which would be an abstraction from the actual entity

112
00:09:11,810 --> 00:09:17,970
coming from the database I could have included a full name data field in that and then used full name

113
00:09:17,990 --> 00:09:20,450
so there are multiple ways to do this.

114
00:09:20,510 --> 00:09:27,080
I'm just keeping it simple so that can get up and running later on and of course actually view models

115
00:09:27,080 --> 00:09:31,870
and you can create that level of abstraction but for now let's just stick to this.

116
00:09:31,880 --> 00:09:39,860
So we have model dot student dot first name and then we're just giving it some new each attributes and

117
00:09:40,160 --> 00:09:46,430
including the class form dash control which gives it that bootstrap loop and then the second line is

118
00:09:46,430 --> 00:09:54,690
a hidden field because we want to track the student I.D. when the student is selected from our autocomplete

119
00:09:54,700 --> 00:10:02,870
struck down list once again this auto complete textbook is only going to show us the name but what the

120
00:10:02,870 --> 00:10:05,520
application needs is the I.D..

121
00:10:06,080 --> 00:10:10,700
So we're just using a hidden force so that the user doesn't have to see the one two three to two thousand

122
00:10:10,700 --> 00:10:13,600
and whatever the student I.D. value is.

123
00:10:13,700 --> 00:10:19,640
So we're hiding that from the user but then when the form is submitted this is what the model really

124
00:10:19,640 --> 00:10:19,910
needs.

125
00:10:19,910 --> 00:10:24,860
This is what the controller needs to see and we can just take a quick look on the post option for print

126
00:10:24,880 --> 00:10:30,170
that's it's really just wanting student I.D. doesn't care about the first name and the last name.

127
00:10:30,170 --> 00:10:30,500
All right.

128
00:10:30,500 --> 00:10:38,840
So this is striking a balance between giving the user a visually acceptable interface and actually making

129
00:10:38,840 --> 00:10:44,980
sure that our solution doesn't break and maintaining the integrity of the D for that we're passing across.

130
00:10:45,020 --> 00:10:45,290
All right.

131
00:10:45,290 --> 00:10:51,530
So we've modified this and we just took out the dropdown box and we added a text box which is going

132
00:10:51,530 --> 00:11:00,260
to serve the purpose of having us facilitate our auto complete functionality and a hidden for which

133
00:11:00,290 --> 00:11:07,880
is just tracking the idea of the student that is selected from this autocomplete text box.

134
00:11:08,170 --> 00:11:16,790
Now bucking Jake wary we we we can actually just go to the documentation and probably copy and paste

135
00:11:17,120 --> 00:11:20,240
some of this code and change it as we go along.

136
00:11:20,240 --> 00:11:25,520
So I'm just going to quickly grab some of this and I'm just going to adjust it as I go along.

137
00:11:25,880 --> 00:11:26,210
All right.

138
00:11:26,210 --> 00:11:35,070
So here we have our code and we're going to start refreshed to or purposes the first change is the target

139
00:11:35,100 --> 00:11:35,640
elements.

140
00:11:35,680 --> 00:11:45,220
Now in January you can target any elements using the name the IP value just I can see as this when insists

141
00:11:45,240 --> 00:11:51,060
you want the element by either use the hashtag or if you wanted by class use a dot.

142
00:11:51,060 --> 00:11:57,120
So in this situation you can actually reference it directly by the IP using the hashtag or directed

143
00:11:57,120 --> 00:11:58,400
by the class name using.

144
00:11:58,440 --> 00:12:05,400
But in this case what we want to target is the edit 4 and if we have student dot first name.

145
00:12:05,520 --> 00:12:13,340
So in other words whatever the model value is here that determines the idea of the elements.

146
00:12:13,350 --> 00:12:21,090
So the idea of this dropdown list is in this case course i.e. the idea for a four is student not not

147
00:12:21,180 --> 00:12:22,390
what's underscore.

148
00:12:22,530 --> 00:12:27,940
When you have that entity and it's property then it's usually on the score.

149
00:12:27,960 --> 00:12:32,760
So that's a little gray area but would go into debug mode and show you how you can determine what's

150
00:12:32,760 --> 00:12:34,110
that idea will be.

151
00:12:34,170 --> 00:12:40,740
In this case the hidden for its ideas is student I.T. so I'm just going to quickly go into Bebo mode

152
00:12:41,220 --> 00:12:45,320
and show you the ideas as they're entered.

153
00:12:45,470 --> 00:12:51,390
All right so this is a little accretion page it looks like right now having stripped todo the drop boxes

154
00:12:51,690 --> 00:13:00,780
and we of course idea the label which we know we can change using our method classes and we have student

155
00:13:00,780 --> 00:13:08,020
I.D. And what we wanted to determine was the idea for this element which is a text box so I can just

156
00:13:08,020 --> 00:13:14,010
go there and inspect element and then by looking at whatever is rendered here I can see that the idea

157
00:13:14,040 --> 00:13:19,110
for the element is student the model is student dot first name.

158
00:13:19,530 --> 00:13:27,510
So in code it's would be student dot first name was a dot is an illegal element in an I.D. in each demo.

159
00:13:27,510 --> 00:13:36,720
So the what is rendered is actually student on this for first name so we can just come out of debug

160
00:13:36,720 --> 00:13:43,050
mode quickly or we can stay in debug mode since what we're able to do is go going to modify the interface

161
00:13:43,410 --> 00:13:52,590
so we can just change this target element to student on the score first name and then we see that we're

162
00:13:52,590 --> 00:14:00,190
following the code dot autocomplete which is calling the function autocomplete on that target elements.

163
00:14:00,210 --> 00:14:04,850
The next step is to change the law that is being referenced.

164
00:14:04,850 --> 00:14:12,010
We're going to have our own you are and you have two ways to read this you can write it using the HDMI

165
00:14:12,120 --> 00:14:18,690
help or you can just read it using the same pattern of slash and end.

166
00:14:18,690 --> 00:14:24,140
So I'm going to use the session endpoint method where I'm going to see a slash and I want it in the.

167
00:14:24,140 --> 00:14:26,310
That's the controller right.

168
00:14:26,340 --> 00:14:29,240
So it would be enrolments slash.

169
00:14:29,310 --> 00:14:30,740
What is the actual name.

170
00:14:30,780 --> 00:14:31,440
And I'd call it.

171
00:14:31,450 --> 00:14:33,060
Get students.

172
00:14:33,060 --> 00:14:39,420
So we need to go into our controller and the means controller and later on make an action that will

173
00:14:39,420 --> 00:14:43,060
get called whenever this function is invoked.

174
00:14:43,340 --> 00:14:43,730
All right.

175
00:14:43,950 --> 00:14:47,880
And the data type we can just modify this to Jason.

176
00:14:47,950 --> 00:14:48,280
All right.

177
00:14:48,370 --> 00:14:50,750
Jason these are specialized formats.

178
00:14:50,790 --> 00:14:53,970
Jason so I feel more comfortable using Jason.

179
00:14:54,150 --> 00:14:57,590
You can test it with either and let me know how it works.

180
00:14:57,870 --> 00:15:04,320
And then for data you need to specify what the name of the variable that is going to Conti and whatever

181
00:15:04,320 --> 00:15:07,230
data is being entered into this element.

182
00:15:07,230 --> 00:15:08,190
That's the name.

183
00:15:08,190 --> 00:15:15,900
So that means when we build our Jason endpoints we have to make sure that it is outfitted and prepared

184
00:15:15,900 --> 00:15:21,630
to take some variable called term and the value that we're passing is a request term.

185
00:15:21,630 --> 00:15:23,040
So this could really be anything.

186
00:15:23,040 --> 00:15:27,390
This could be turned this could be query or you know whatever you want to call it.

187
00:15:27,390 --> 00:15:36,000
Just make sure that when we're implementing this action we have a facility to recognize that this is

188
00:15:36,090 --> 00:15:38,310
a parameter being passed in.

189
00:15:38,460 --> 00:15:40,260
So we will get to that point soon.

190
00:15:40,260 --> 00:15:44,140
I'm just building all this do query code line by line.

191
00:15:44,430 --> 00:15:48,180
The next function is success and success.

192
00:15:48,180 --> 00:15:57,030
Basically it's invoked when the source successfully brought data and so success is said data.

193
00:15:57,030 --> 00:16:02,060
And what I'm going to do here is add quick debug line.

194
00:16:02,070 --> 00:16:10,500
So in the querying you know you don't really get a debugging tool like visual studio to take it line

195
00:16:10,500 --> 00:16:11,010
by line.

196
00:16:11,010 --> 00:16:18,000
So what is a good technique is to just seize console dot log and then you can just put whatever value

197
00:16:18,110 --> 00:16:24,060
is that you want or add to the console on this console would be the browser console or whatever browser

198
00:16:24,060 --> 00:16:25,970
you're using in this case Chrome.

199
00:16:26,090 --> 00:16:31,710
You always have a console tab here and you'll see that we have an error here and in this era.

200
00:16:31,890 --> 00:16:37,770
But when we do console love whatever value it is that we want to see printed here you can just see it

201
00:16:37,800 --> 00:16:38,140
there.

202
00:16:38,220 --> 00:16:44,270
And that is how we go ahead and build on debug and make sure that the values that we expect our to vote

203
00:16:44,270 --> 00:16:48,840
is that where it gets back we can leave the minimum length properties.

204
00:16:48,870 --> 00:16:55,250
So that means that it won't involve the autocomplete until the minimum two characters have gone into

205
00:16:55,260 --> 00:17:01,260
the search box are the elements which in this case is student almost for a first name and select we'll

206
00:17:01,260 --> 00:17:01,910
see.

207
00:17:02,040 --> 00:17:06,000
What do you want me to do when a value has been selected.

208
00:17:06,000 --> 00:17:13,080
This speaks to Parramatta's event which says what was the event that was triggered and UI or C query

209
00:17:13,170 --> 00:17:15,090
or data whatever it is.

210
00:17:15,090 --> 00:17:22,670
And that is whatever value is being returned upon the success or whatever value is being selected.

211
00:17:22,680 --> 00:17:29,640
So I'm just going to put our console love here once again just so that we can make sure that we're getting

212
00:17:29,640 --> 00:17:35,830
back some sensible data not ones that come out of debug more quickly and explain that error.

213
00:17:36,060 --> 00:17:37,650
Let me just bring it up quickly.

214
00:17:38,130 --> 00:17:44,460
So this arrow is basically saying that if you're trying to initialize something when there is a referencing

215
00:17:44,460 --> 00:17:49,950
problem and I would have said it's more than once and if we could that we see that urgency problem is

216
00:17:49,950 --> 00:17:50,590
right here.

217
00:17:50,590 --> 00:17:52,370
Oh sorry we didn't refresh.

218
00:17:52,380 --> 00:17:57,830
All right so it seemed that referencing problem is right there at our function invocation.

219
00:17:57,840 --> 00:18:03,060
And that is because and I'll bring up the food feed source so we can see it.

220
00:18:03,270 --> 00:18:07,170
That is because our script here is running in isolation.

221
00:18:07,170 --> 00:18:13,920
This is a Jew query block of code Jaker and agents and we are running it's at the top of the page when

222
00:18:13,920 --> 00:18:15,070
we're Francine J.

223
00:18:15,090 --> 00:18:20,250
Query at the end of the page and remember that I said sequence matters.

224
00:18:20,250 --> 00:18:26,650
So what needs to happen is that these scripts need to be referenced above this block.

225
00:18:26,850 --> 00:18:30,060
And so everything will work properly.

226
00:18:30,540 --> 00:18:33,380
So I'm going to come out of debug mode.

227
00:18:33,480 --> 00:18:41,820
Go to my layouts and I'm just going to move the C of as a city of a number of techniques to handle this.

228
00:18:42,090 --> 00:18:49,430
You'll see a number of ways I'm just going to move on my files to the top of the page or it's underneath

229
00:18:49,590 --> 00:18:52,230
modernizer all right.

230
00:18:52,600 --> 00:18:57,520
So I have all of my stars and all of my scripts rendering first and then by the time everything would

231
00:18:57,520 --> 00:19:02,770
have been rendered and it gets to the body or the view remember the view gets rendered there.

232
00:19:02,770 --> 00:19:04,430
And in this case this is the view.

233
00:19:04,510 --> 00:19:10,950
Then this script would have already been taken care of in terms of what prerequisite libraries it needs

234
00:19:10,960 --> 00:19:15,100
to reference in order to do the auto companies and the G query functions.

235
00:19:15,130 --> 00:19:22,300
Now that I've done the Joe script portion I'm going to modify my controller and add the action and I

236
00:19:22,300 --> 00:19:30,280
just add it's below the belief confirmed and we're going to type this out quickly so firstly I did specify

237
00:19:30,430 --> 00:19:37,630
that I wanted the type of call to be post that I did not so I'm going to modify that we wanted to be

238
00:19:37,630 --> 00:19:39,120
a post call.

239
00:19:39,150 --> 00:19:49,960
So we'll just say type and we right in quotation marks post so or euro should be called in post and

240
00:19:49,960 --> 00:20:00,300
then in my controller I'm going to modify the code and add an issue d put people's Jason result function.

241
00:20:00,520 --> 00:20:04,800
So up until now we would have seen action results each time.

242
00:20:04,800 --> 00:20:07,440
No we need Jason the results.

243
00:20:07,450 --> 00:20:10,140
We have a public and it's Jason.

244
00:20:10,150 --> 00:20:12,500
And you see that into the sense is hoping it alone.

245
00:20:12,910 --> 00:20:18,840
So they give us a built in function that can return Jason results.

246
00:20:18,850 --> 00:20:22,950
And I did say that the function should be called get students.

247
00:20:23,020 --> 00:20:25,880
So I'm just making sure that the spelling is correct.

248
00:20:26,050 --> 00:20:34,250
And then what we are passing in is a parameter called What Do We Call It term.

249
00:20:34,330 --> 00:20:43,170
So we're getting a middle string term and then this function we're going to declare a variable full

250
00:20:43,210 --> 00:20:47,380
students and or we're going to do just run a quick query.

251
00:20:47,380 --> 00:20:52,810
So by now we should know how parties work because we've been scaffolding we've been modifying code and

252
00:20:52,810 --> 00:21:00,850
so we just want to run up because I'm just going to say D.B. dots and what they're referring students

253
00:21:01,420 --> 00:21:07,870
and then use our dot operator again and then we're going to go into some of the dynamic nature of link

254
00:21:07,990 --> 00:21:09,580
and entity framework.

255
00:21:09,580 --> 00:21:16,120
And so we're going to declare an abstract object with the data values that we really really need for

256
00:21:16,120 --> 00:21:17,410
this operation.

257
00:21:17,410 --> 00:21:25,570
Once again the two data values that we know we need are the actual name which should populate this text

258
00:21:25,570 --> 00:21:32,030
box and the idea whose value we want to place in these elements.

259
00:21:32,050 --> 00:21:38,410
We know however that we can only look at one element at a time when it released the name either the

260
00:21:38,410 --> 00:21:42,820
first name or the last name and the I.D. Well it's there.

261
00:21:42,820 --> 00:21:49,300
So what we need are a name and I.T. and to be very complete in our search we want to make sure that

262
00:21:49,570 --> 00:21:57,490
when we type any two letters that combination of letters needs to be in either the first name or the

263
00:21:57,490 --> 00:21:59,530
last name not just the first name.

264
00:21:59,860 --> 00:22:05,870
So even though we're using first name here we do want to limit our autocomplete to just first name.

265
00:22:05,890 --> 00:22:11,980
So once again this is just because we didn't use a view model that I'm not looking at full name in the

266
00:22:12,250 --> 00:22:18,120
ability to specify what the text box should be I'm just using students first name.

267
00:22:18,280 --> 00:22:23,770
And if you still don't feel comfortable with that you could actually just use a regular input field

268
00:22:23,980 --> 00:22:34,870
type equals text to the books and then you could see the idea is equal to student name and you give

269
00:22:34,870 --> 00:22:38,210
it the bootstrap class of course and then you could just use that here.

270
00:22:38,230 --> 00:22:38,540
Right.

271
00:22:38,530 --> 00:22:45,340
So it's just showing you that the name of the I.D. is immaterial to the operation that we're really

272
00:22:45,340 --> 00:22:46,330
about to perform.

273
00:22:46,330 --> 00:22:54,130
So I'll just leave this bit of code here as a reference point if you wish but continue with this since

274
00:22:54,130 --> 00:23:02,860
you spent so much time ventilating that so that students dots act which then requires me to put in some

275
00:23:02,860 --> 00:23:06,700
parliament those and I have to specify a lumbar expression first.

276
00:23:06,790 --> 00:23:13,690
So cue here is where I can actually declare a brand new object that doesn't necessarily look like a

277
00:23:13,690 --> 00:23:21,420
students object someone to see you because I want a new and abstract object with my own values.

278
00:23:21,460 --> 00:23:31,310
So cue is pointing to a new object and I'm going to fill this abstract object with a name and foreign

279
00:23:31,310 --> 00:23:31,830
name.

280
00:23:31,840 --> 00:23:39,010
I'm going to see two dots and then I remember the cue gives me access to all of the properties of whatever

281
00:23:39,010 --> 00:23:40,310
tune we're looking at.

282
00:23:40,370 --> 00:23:42,220
Cue that first name.

283
00:23:42,220 --> 00:23:44,530
And I'm going to make it look like a full name.

284
00:23:44,530 --> 00:23:46,630
Someone's upon putting a first name.

285
00:23:46,660 --> 00:23:50,470
And the last thing on C Q Dot and the last name.

286
00:23:50,500 --> 00:23:54,340
And of course who puts the space there so it looks user friendly.

287
00:23:54,340 --> 00:23:57,410
So that is the full name of the students.

288
00:23:57,430 --> 00:24:00,850
And then we also want an I.D..

289
00:24:00,850 --> 00:24:06,880
So once again this abstract object allows me to be clear whatever properties I want on the fly.

290
00:24:06,880 --> 00:24:11,730
And then it will construct these objects and put the list off them.

291
00:24:11,890 --> 00:24:14,930
In this students variable.

292
00:24:14,940 --> 00:24:15,240
All right.

293
00:24:15,270 --> 00:24:21,650
So I.D. will be equal to two dots Heidi student I.D. rather.

294
00:24:21,650 --> 00:24:29,890
And right there you said once again from our database and our students table select into a brand new

295
00:24:29,950 --> 00:24:30,790
object.

296
00:24:30,820 --> 00:24:32,470
That's pretty much what they're saying.

297
00:24:32,470 --> 00:24:39,700
Select these properties into our brand new object and this brand new object has the property name and

298
00:24:39,700 --> 00:24:47,020
give me these values and it has an I.D. Give me those values and we could go ahead and just put as many

299
00:24:47,590 --> 00:24:48,930
other properties as we wish.

300
00:24:48,940 --> 00:24:53,980
But once again we really only need the name and the I.D. So those are the only two that I'm selecting.

301
00:24:53,980 --> 00:24:57,970
But it's not finished there because remember that we want to filter.

302
00:24:57,970 --> 00:25:04,540
So this is selecting all of the students into brand new objects with name and I.D. that's fine.

303
00:25:04,570 --> 00:25:08,190
But the fact is we need to filter on term.

304
00:25:08,200 --> 00:25:14,080
We need to make sure that whatever is being returned as students has term in there.

305
00:25:14,100 --> 00:25:21,370
So we're going to add we're we can use cue and the filter command would be CU dots and then you notice

306
00:25:21,370 --> 00:25:27,430
that the queue is not only picking up idea and name because it's only trying to filter on whatever new

307
00:25:27,430 --> 00:25:28,960
object I just selected.

308
00:25:28,960 --> 00:25:31,040
All this data into all right.

309
00:25:31,360 --> 00:25:39,640
So then I want to see where a name which is a combination of first name and last name contains and our

310
00:25:39,640 --> 00:25:41,540
expression is term.

311
00:25:41,560 --> 00:25:48,010
So when to walk through all of this one more time we're running a query and we're storing the results

312
00:25:48,040 --> 00:25:55,060
in a variable called students and this query is looking into the students table and it is selecting

313
00:25:55,300 --> 00:26:03,070
all of the records but it's reconstructing them into on the fly very abstract model that we just created.

314
00:26:03,070 --> 00:26:04,840
We didn't give it we didn't even give it a name.

315
00:26:04,840 --> 00:26:10,600
We just created it's just for this purpose and I'm saying I want the name which will be cued up first

316
00:26:10,600 --> 00:26:16,120
name plus and it's empty space and last name just so it looks user friendly.

317
00:26:16,120 --> 00:26:19,650
That's a full name like what I'll call this full name if I wanted to.

318
00:26:19,660 --> 00:26:21,240
It's really up to you.

319
00:26:21,250 --> 00:26:28,510
I just need my dad's name and then we select the I.D. and we see the I.D. should have the students I.D.

320
00:26:28,870 --> 00:26:30,880
and then we're going to filter all of that.

321
00:26:30,880 --> 00:26:33,160
So all of this will be filtered.

322
00:26:33,160 --> 00:26:41,740
We're the name that is returned on teens this term and then at the end of all of that we need to return

323
00:26:41,770 --> 00:26:44,950
because you noticed that this red line has been here all this time.

324
00:26:44,950 --> 00:26:50,620
We have a Jason results so the return is going to be a bit different so we're going to see a return

325
00:26:50,700 --> 00:26:59,170
to son and we want to return our variable students and we just passing in one of those methods that

326
00:26:59,320 --> 00:27:01,280
we need to pass in.

327
00:27:01,330 --> 00:27:01,770
All right.

328
00:27:02,080 --> 00:27:09,780
So we're returning a juice on results of this object or a set of these objects as do some objects.

329
00:27:09,930 --> 00:27:12,130
And we just add in that behavior.

330
00:27:12,160 --> 00:27:17,350
So I'll get that we can build and just ensure that we have no errors.

331
00:27:17,350 --> 00:27:17,580
All right.

332
00:27:17,590 --> 00:27:24,480
So here in our browser we just test and see if all is going well with our function calls we can quickly

333
00:27:24,490 --> 00:27:28,380
look and see the students that we have in our database.

334
00:27:28,390 --> 00:27:29,700
It's added a few more.

335
00:27:29,800 --> 00:27:32,650
So bucking create remember that our code right.

336
00:27:32,650 --> 00:27:39,530
No it's just monitoring via console that love what is happening with each step.

337
00:27:39,530 --> 00:27:46,550
So when source is successful then it should write the data that it's bringing back to the console.

338
00:27:46,610 --> 00:27:48,810
And also if something is selected.

339
00:27:48,830 --> 00:27:54,500
But right now I think we'll only be able to see what comes back to the console log.

340
00:27:54,500 --> 00:27:58,730
So if I type T you know there's nothing is happening because it's not minimum length.

341
00:27:58,840 --> 00:28:04,010
So if I type T E and then you see the minimum length and you see that there's some action happening

342
00:28:04,340 --> 00:28:09,800
but if we drill down into the console we see that it's actually bringing back some data for ossified

343
00:28:09,860 --> 00:28:17,470
Turkey a it brings back data again and you see that's it's really just filtering based on that search.

344
00:28:17,480 --> 00:28:23,480
So we're bringing up the name and we're bringing by the ivy like likely specified in our abstract object

345
00:28:23,510 --> 00:28:29,840
that we really only need name and I.D. are what we need to do is actually display the actual dropdown

346
00:28:29,870 --> 00:28:33,530
so that we can click and select that value here.

347
00:28:33,530 --> 00:28:39,070
But in the background store this idea value in our hidden field art.

348
00:28:39,080 --> 00:28:44,070
So back in our application I made a change here quickly and just walk you through it.

349
00:28:44,090 --> 00:28:50,780
The whole point of source having two parameters request and a response meaning then that but we really

350
00:28:50,780 --> 00:28:56,040
named them according to what their fourth request is what will be passed and a response is what is received.

351
00:28:56,210 --> 00:29:04,190
So what is received comes back with success and using our response function we can actually map some

352
00:29:04,310 --> 00:29:07,420
data items which would have been what is returned.

353
00:29:07,430 --> 00:29:11,360
So data is an ARI off the search results.

354
00:29:11,360 --> 00:29:21,840
So the response mapping all of those data items and I'm calling a passing each record from this I read

355
00:29:22,190 --> 00:29:27,170
into this function and then returning a label value of item name.

356
00:29:27,170 --> 00:29:34,210
So remember that item or data would have an array of objects that have I.D. and name.

357
00:29:34,430 --> 00:29:38,930
So each item here is going to have a name and then I.D..

358
00:29:39,260 --> 00:29:48,080
So what I'm doing is returning objects with label and value and an I.D. label and value are especially

359
00:29:48,080 --> 00:29:54,500
important for what is displayed on the screen when the names come up and dropped Doctorow dropped Bill

360
00:29:54,550 --> 00:29:58,310
peers use the label is what appears in the drop below.

361
00:29:58,310 --> 00:30:02,980
And when you click and the text feels that takes box then that would be the value.

362
00:30:02,990 --> 00:30:08,880
So you wouldn't want to change these from name since the name is what is expected to be seen in both

363
00:30:09,350 --> 00:30:10,590
situations.

364
00:30:10,640 --> 00:30:15,510
However Heidi once again is just for background purposes.

365
00:30:15,560 --> 00:30:21,770
So we'll back to our interface and bring up the console so we can see what's happening.

366
00:30:21,770 --> 00:30:28,100
And then I'm going to start typing so remember nothing until two characters see a trip and then there

367
00:30:28,100 --> 00:30:31,370
you see you see the peering if I type will.

368
00:30:31,540 --> 00:30:31,930
All right.

369
00:30:31,940 --> 00:30:38,290
So it's actually searching the full name for any character sequence and you see that for each successful

370
00:30:38,320 --> 00:30:38,810
results.

371
00:30:38,810 --> 00:30:41,650
We're getting back that data object.

372
00:30:41,670 --> 00:30:46,670
All right someone to actually select one and remember that we have a console that love tracking when

373
00:30:46,670 --> 00:30:53,630
we select and that was it being fired there and we see here that we have the item object with the label

374
00:30:54,050 --> 00:30:59,030
which would have been what is displayed when it struck down the value which you notice is going into

375
00:30:59,030 --> 00:31:00,950
the text box and the I.D..

376
00:31:00,950 --> 00:31:07,160
So now we need to write some code to make sure that our hidden field gets populated with that idea because

377
00:31:07,190 --> 00:31:15,090
if we look at it specifically there is nothing changing we have the hidden field and there is no value.

378
00:31:15,110 --> 00:31:15,550
All right.

379
00:31:15,890 --> 00:31:17,060
Which is not what we want.

380
00:31:17,060 --> 00:31:24,890
So we want that when we select that name the value of this hidden field gets updated.

381
00:31:25,190 --> 00:31:35,550
So back in Visual Studio we will modify our select function to then update the element in question and

382
00:31:35,600 --> 00:31:38,190
elements in question is student I.D..

383
00:31:38,220 --> 00:31:46,700
So I'll leave the console log query and what I'll do is see the sign open equal use open press kits

384
00:31:46,700 --> 00:31:48,230
and quotation marks.

385
00:31:48,230 --> 00:31:55,430
Student I.D. and do where it makes it easy for us to set the values so we can discard the valve function

386
00:31:55,730 --> 00:32:02,800
and we'll just pass in the value that we want it to be set up so we can see data Dot.

387
00:32:02,820 --> 00:32:07,290
Oh sorry we named the query so this query dot.

388
00:32:07,310 --> 00:32:15,760
And then remember that this is actually being mapped to an object with item and item has name and I.D..

389
00:32:15,950 --> 00:32:25,790
So you need query dot item dots and I'm going to specify with Colin keys since that's how it's written

390
00:32:25,790 --> 00:32:26,090
here.

391
00:32:26,090 --> 00:32:28,760
So it's labeled value and I.D..

392
00:32:28,790 --> 00:32:33,680
So I'm setting the value off or hidden field students idea.

393
00:32:33,740 --> 00:32:40,920
So that's I.T. and remember that is happening when a select event is fired.

394
00:32:41,030 --> 00:32:45,290
So I'm just going to quickly go back refresh and we'll try that again.

395
00:32:45,620 --> 00:32:49,160
And just watch the value for the field.

396
00:32:49,310 --> 00:32:51,710
And there you go you see it's being updated.

397
00:32:51,740 --> 00:32:56,840
So if I say test and we have these two it's being updated each time.

398
00:32:56,840 --> 00:33:02,770
So now we know that we're actually tracking the value of the student that is being selected.

399
00:33:03,120 --> 00:33:10,700
So once again our objective is that we will have this page and that create button when we click Create.

400
00:33:10,700 --> 00:33:18,170
We see a dynamic refresh and reload of the list of students currently associated with this course.

401
00:33:18,170 --> 00:33:24,860
So for now I'm just going to select one from the dropdown box and I'm going to enroll test students

402
00:33:25,040 --> 00:33:26,080
into this.

403
00:33:26,180 --> 00:33:29,300
And then with the click Create and then we see what happens.

404
00:33:29,330 --> 00:33:29,620
OK.

405
00:33:29,630 --> 00:33:36,560
Sorry Adam a break point on that bits of code but if we go here and look at the object you'll see that

406
00:33:36,560 --> 00:33:38,300
we're passing in the essentials.

407
00:33:38,300 --> 00:33:39,300
Of course I.D..

408
00:33:39,600 --> 00:33:40,590
No no.

409
00:33:40,670 --> 00:33:46,460
But then we did a alone no four letter I.D. and fourth grade and students is getting it.

410
00:33:46,460 --> 00:33:51,860
So the two most important parts of this particular model are getting data.

411
00:33:51,860 --> 00:33:59,690
So if we press five and continue then we will be rewrote it to the enrollments index speech.

412
00:33:59,690 --> 00:34:03,120
Now once again we are going to be doing some modifications.

413
00:34:03,230 --> 00:34:08,600
So that will process so it doesn't go back here every time and then we have to create new we will actually

414
00:34:08,990 --> 00:34:17,420
have a partial view of the list of students enrolled refreshing each time create our each time this

415
00:34:17,420 --> 00:34:23,360
is changed it will refresh to show exactly who is enrolled in the selected class.

416
00:34:23,360 --> 00:34:30,050
And once a student is entered here and selected it will refresh and I've been banned no color without

417
00:34:30,410 --> 00:34:32,030
moving away from the speech.