In our last video we completed our creation of Egypt's form that allowed us to more dynamically submit
student enrollments to each course.
And in this video we will be going through adding an automatic refresh for each form submission.
So what happens right now is that we get a visual cue each time a student is successfully or not successfully
added.
However we do not know who is added because there is no list here for viewing would have to go back
to list and view the enrollments each time which we want to avoid.
And so what we're going to be doing is enhancing our current form such that each time a student is added
successfully.
Grid we'll be down here showing the list of students and it will refresh.
And in addition to this we will be looking at the concept of partial forms the first modification we
are going to make is to change the labels of or punch rows here on our form in Visual Studio.
I added a meta data class for the enrollment table and we did that in our previous lecture.
So I did it this time for the enrollment table but you would notice that I did add the data attribute
tag for the ideas.
However on our page they still said students ideas and of course.
So long story short the display name doesn't really work for the ideas.
But that's no problem because we can always just go to our view.
That's our treat view and we can just change those manually someone to leave the original code there
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
notice this is a label for element.
And it's pointing to the course I.D. so read internally truly what this label and for attributes here
does in the original each demo is its lows that when you click the label it automatically highlights
whatever element is being targeted so the label for 4th I.D. would just highlights or jump on list with
the horse idea as its I'd eat next inside this very label.
This other costs and I'll just copy and paste the bootstrap passes that or that are generated with our
control table that at sign because this is just pure HMO.
This is not our Razr.
So we have label for force course I.D. and we gave it the bootstrap classes and then the money we'll
take.
I would like to type is force and then I can just remove this line and I will repeat this for the student
name and know that we've completed that we can change the button text to maybe enroll and then change
the Button class to beat and success.
So we get a green button and I'm just going to say Beattie and bash block.
All right so you can get creative of course.
No like we said in the beginning the expectation is that each time we click or submit and we get a successful
response from or Jason or controller each time a student is added successfully then we expect that there
is going to be a refresh.
So what we're about to do is to create a partial view that is going to handle only displaying the students
who are in a rules know the concept of a partial view is you want a view within a view.
And let me just put that into perspective of it.
So remember that we have a layered page and in the labeled page we actually render a view so a view
is a part of the legal pitch.
Well a partial view is actually designed to be a part of an existing view.
So we have this view and what we want to do is to create another mini view inside this view that is
solely responsible for loading a particular bit of information which would be the enrollments and then
we're going to set it that when we change the value on the dropdown list that that grade will refresh
automatically as well as each time that we submit an enrollment for a course and the students that that
grade will refresh and show the new data someone to do one more modification here as I would want my
grade to load underneath my form.
So I just put on a horizontal rule just so we have a little line to show and then create a div and give
this div an idea of data.
So data or data div is going to store our partial view.
Next up we want to actually create this partial view.
So we follow the same procedure as we did in the first part when we're creating views where we write
click or enrollments folder and we go ahead and click Add and view makes you want to give it a name
someone to call this enrollments are show and using the underscore and friends is really just the naming
convention.
Some people would create a folder for the partials.
I just use that on the score to be picked whenever I have a partial view and that is a pattern that
you may see in other places.
Next I want to select the template so the templates will be what kind of page do you want.
And we would actually want a list because we want to list the students who are enrolled.
So I have this list and the model that should govern this is enrollment.
They would see that they already have this click but originally may look like this but once you click
Create as partial you see that's it blank.
So the little page because the partial view is actually going to inherits all its scripts and stars
and all of that from whatever view it is being rendered in which inherently is inheriting that from
the little page.
So that will automatically get great out and then we click add.
All right so we'll take a quick look at the resulting view we'll see that it looks just like our index.
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
pretty much identical.
So essentially the list templates gives you whatever comes up in your index page or index page is actually
using that list templates.
So we're going to modify this a bit.
We have a table.
Yes.
And we can leave.
Grid.
We can leave.
Course title and you do notice that you have of course that title.
So of course is the entity that is included in enrollment.
And the reason I said included is that if we take a look at our index controller we will see kind of
what is happening here.
So when we load up via enrollments and we run that query you'll see that there is a part.
This is not include and it includes each entity that is necessary for data.
So this is called eager loading where you're seeing I'm bringing back each record here and then does
include the corresponding or related data for each forwarding key.
So do you recall that our enrollment stage is full of foreign keys at this course I.T. student I.D.
and lecturer I.T..
So we're just seeing bringing back all of the resulting information for the corresponding course I.T.
student I.D. and lecturer I.T. and so in our view it would actually just allow us to see model which
represents enrollment in dot whichever entity dot whichever property of that entity.
So I can leave the course title and you'll see that student last name is coming back.
We don't necessarily just want the last thing would on last day and come up first name or the full name.
So these are really just the table headers like we would have seen when we looked at the enrollments
list and that is why it looks this way.
So we get to modify all of this essentially over these are just the display names for us.
So really and truly what is being displayed when this is rendered is really just whatever meta tag or
display name we put over the corresponding property in our middle class.
I'm just going to do a few modifications as it relates to what we need to see.
So we definitely want to see the greed and the horse died and the student name.
I don't want this to render student last name only though.
Someone to take this off and I want to say a student name because I'm one of your enduring values that's
are their full names.
I also don't need to see lectures first name or anything with the lecture right.
No.
And we can probably just render that one time so I can see that.
So a table should have these three table hitters and one blank one I can display action doesn't mean
you want to complete that action.
You notice that this column is reserved for these buttons.
What when you get there.
So for each role coming back in or enrollments I'm going I need the grade so I'll leave that.
I need the course title.
Leave that and I don't need the students last name.
What I really need is the student's full name so I can just replicate this.
All right.
So this is a display for where it's actually rendering whatever value is there and I just see student
first name and space student last name.
And if you want to wrap this all in the p tag or something else you can do that.
We removed the column head off for the letters first name or the lecture inflammation so I just remove
this altogether and for the actions well I would only want the ability to delete an enrollment.
Someone to take this off.
If you deem it necessary to have others then that's fine.
So we'll be modifying this also to make sure that when we delete we don't have to navigate away from
the page.
It just removes that enrollment record and refreshes the grid accordingly.
So we can see if changes means or option on one other thing we can remove this goes I don't want the
ability to create already on the crease on screen so we don't need to render out a link for creation.
Now that we've completed the view we need to actually add the action for this partial view in our fun
shoulder so remember that no view gets invoked unless a corresponding action is present.
So we need to give this action the name the same name as the partial use underspent.
Copy that from the solution explorer just to make sure I don't miss type and I'm going to place it immediately
after index.
So they're going to be a few differences and you may see it done this way you may see people do it using
actual results just the same so there are many ways to do this.
I want to show you with partial v result because I like to see what is a partial view on what is on
an option or your full view even from my controller side.
So I'm going to see partial view results and notes.
I'm not making this one asynchronous because at least in this version of MVC they don't support a synchronous
partial views.
So be very careful of that.
So I'm making it public partial view results.
Giving it the same name.
And then inside of this I'm going to be returning partial.
You know the work isn't done as yet.
Because remember that our partial view requires data.
It's looking for an I numerical object collection of enrollment object types.
So that means before I can return I need to return it with some data.
So just the same way with index that has the same list pattern the we load it up data and then we returned
that data to the view we need to follow a similar pattern here.
So I'm going to see the VAR enrollments and I can do that because enrollment is local to this function
so it won't interfere with that enrollments.
The variable and I'm going to say DV dot enrollments but then do recall that in our partial view we
need details for course and we need details for the students.
So I'm going to just borrow this code here from index that includes course based on the early voting
record and students and then when to follow that pattern here and load those in know that I have my
query done I'm going to return the partial view with enrollments and I'll just see to this or next action
item would be to add a parameter to our option.
So the parameter will serve the purpose of allowing us to filter on whatever values in that parameter
take for instance the details action where it receives an idea and then checks if the is null.
Sure.
But then what's it really wants to I.D. for is to just find that one record.
So we need to add filtering mechanism to our action based on of course I.D. so I can just add it and
I'll make it available.
So this is how you make it multiple by just putting on that question mark.
It suggests that a no value is acceptable coming in when they're called in this option.
All right.
And we're going to see.
Course I do.
Just so we know exactly which I.D. is being referred to.
The next thing we want to do is just start quarter because right now we're bringing back enrolments
or all enrolments so we want to filter on this course I.D. I'm just going to inject that code here and
I'm just going to break the line a bit so that we can see exactly what's happening.
So you can actually do this without causing any errors and I'm just going to say dot we're and I'm adding
on a filter.
So this is me adding on a lumbar expression.
If my weird flaws to see where Q dots course I.D. is equivalent to the parameter course.
So doing this would actually allow that this view can be rendered without any force idea and of course
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
and we have no of course I'd even know will actually return an empty list to or partial view.
So if you wanted this to be a bit more user friendly we could add an if statement in this partial to
see if model model being our list and we can see a dot codes mean the number of items going back in
this list is less than one or two columns as a function.
So if model code is less than 1 then we can see 4 and then each one start to see no improvements in
this course so that that can apply whether we get an empty said because remember that even if we get
back our course I.D..
If this course has little enrollments as it's then we want to let them know there are no currently no
enrolments in this course and we can put this in a bootstrap class maybe text.
But we can centralize it for sure and we can see it takes bash in full.
All right.
So then we will get this nice blue text that the user know that there are no enrolments in this class.
And then we can drop the rest of this page and then else to see if this those not evaluates true then
we want to print this entire two sentences a plus sign on the sides of this collapse everything is cut
and paste and there we go.
So the table gets rendered when the list is not empty.
All right so now that we've tested that theory we're the partial view loads we're just going to remove
this line because we don't want this to interfere with our Ajax scores.
So what we want to do is make sure that on page load our selected value from or dropped on this gets
rendered or gets used to render the partial view.
So when we have this issue that option is just calling the option blankly with no parameters and so
we'll always get that there is no enrolment because we'll be passing I know so I can just rule this
or no I just come into default for further reference but then we go ahead and start writing some just
jealous scripts RJ query Ajax scored so quick an easy way to write J.
Query when we're loading a page is just to start a g query function so we know the pattern is they'll
assign open and close parentheses and then in the open on outputs in function and just open and close
everything so we can just see where things starts and stops.
And I like seeing my curly brace and my parentheses said each other and then inside this function the
first thing I want to do is know what the Course I.D. is that the selected value from this course I'd
drop on this so I'm going to get this value from this control by targeting it using its ideas.
So another sign open race open quotation marks and hashtag course I did.
And then I would see a dot vol.
And that's actually gets me the value that is going to be selected and I'm just going to put that inside
of a variable SC divorce var c idea just for short.
All right.
So var S.A.T. is getting the car into the selected course I.D. value.
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
parameters and options and I'll explain as I go along.
So I started the ajax call dollar sign dots index and just fill in the other parts index and then we
put in our options so the first option is the euro.
So I could write you are like this but I'm going to write it a different way just so you have exposure
to all of your options.
Someone to write at sign you are.
So I'm using an HMO helper function you are a dot option.
All right.
So you see that there are different ways to approach this.
There is no one we always set in stone so you see different patterns are on the play.
So on to show you what you me see during your research.
All right.
And then we have enrollment partial and just saying we were the HMO option with the option and the controller
just rewrite it in the same fashion.
The next option we want is the data type.
Now our data this time won't be Jason but rather we'll use each key.
So you have different data types so different situations in the situation we are loading each gem of
data.
So I want the data type to be HMO.
And on that note I'll just add content type and I'll just fill in that char set sitting for each GMO.
All right.
So we're seeing that our guns and types should be off type HMO with charts at UTF it thinking just fill
that in.
Also I don't think that one is absolutely necessary.
What is good practice just to make sure that the Carter the cart character assets are being returned
and will set the type to be get since we're not posting these at this time.
We're getting data.
And remember your commas after each option as we go along and then we have data.
So of course we need to pass data in because our action is expecting some form of data as much as it
may be for giving because we've put a notable parameter there but we are expected to pass in data to
get the actual results.
So we need to see horse I.D. since that's the name of the parliament and it's expecting and then we
will pass in our loaf of value which is S.A.T..
All right so I didn't give this the name horse I.D. because then you may get confused if you are of
course I.D. call on of course I.D..
So I did this a CIC just so you could see clearly that this is corresponding on the on the left side
is corresponding with the parliament that's expected.
And on the right side corresponds with whatever value we're passing into that.
And then after data we have success.
So we need to define a function that gets called when a successful call is made and when a successful
call is made it is expected that we get back some form of data in the form of this list.
So I'm going to see data and in this function we're going to populate our data div with our data.
So we're already calling our partial view and we're just going to see inside of that data do we want
to load this partial view with this data.
So I'm going to put in some animations so we can see whole poll Fuji query really is and how it's easy
to make a nice interactive application so hashtag data targeting the element bytes I.T. and I'm going
to say feed oats.
So this will make it actually kind of bland coat and you can both set up by adding the speed or.
Right.
So remember that we did fields earlier we could put in fast or slow whatever speedy ones.
But I wanted to feed oats and then I'm going to load the HMO area with content coming from our data.
And then once it's loaded I wanted to feed in.
All right.
So this will actually get called once a page is loaded so traditionally with Jake where you would see
something like a signed document already which means or the page is no loaded the DOM is no ready to
interact with JavaScript.
But then for a short time you can just write it like this.
All right.
So this should execute wants a page loads.
So I'm just going to Debo quickly and I set a breakpoint on my controller so that we can see when it
gets called and what value gets passed to it.
Okay so now we're going to bro's to or create page and then we're going to watch as visual studio if
it's our points and we see that course Heidi is indeed being passed into our partial view and the end
result of all of this should be that the queries run against number two I.D..
So only those enrollments should go back and voila there we see that we're running a filter based on
the selected course and we're only seeing those students of course we haven't talked up anything when
this volume changes so that is our next mission.
We're when it changes it should actually reload know what we need on our drop.
Don is a change event so Jake where it makes it just as easy to create that change event just the same
way that we did a change event here just the same way that we did an event here on our text box.
We did an autocomplete.
So it is a similar pattern when we want to drop down list change.
So to do that we can just targets are elements.
So we just a dollar sign and we know that we're dealing with.
Course I.D. as our elements.
And then we put on the change events and then inside the change event and I'm just going to put some
clothes on.
And at the same time we have a function.
And then in this function what we need to do is get the current value of course I.D. so we can actually
just replicate this where we just get see I.D. and the current value.
And of course once again this is its own block.
This is its own block.
So the CIA's won't interfere with each other.
All right.
And then we need to repeat this whole block of code.
No there's a principle in programming that says Don't repeat yourself.
It's an acronym that spells dry and the principle is that if you have a block of code that can do something
and it is one supposed to be versatile enough to operate in different scenarios then you shouldn't have
it all over the place.
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
own function and then we can call it from multiple places without having all of this repeated.
But for now I'm just going to repeat it and we'll just test that our click event works.
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
and that's because we are invoking Jake worry here but we are not putting it inside off a g core block.
And by Jake we're block I mean this function.
So remember that I said every time we start off with Jake or do we see something like this with dollar
sign documents already or you see this which is a shorthand.
So whatever Jake or record you're able to write needs to go inside of that block so the age outs the
event all of that needs to be inside of that block.
Second is this I can't start on the block because here is a block for itself.
This is just a standard J query sorry javascript function.
These are JavaScript functions but this is a J word block and this is a g square block someone to put
this inside here and actually we could just merge all of these into one.
So this J for function block really ends here.
And any other G query code that we want to put in we could just make sure that it is kind of self contained.
All right.
So I'm putting in my force I'd be on change function block and it is somewhat autonomous to anything
else that is inside of this block and I just align everything so we can see where everything starts
and stops.
No when we attempt to debug this we will see an improvement in the behavior of our application where
when we change the dropdown list the grid reloads.
Okay.
Now with our page loaded I'm going to proceed to change and then we'll see what happens.
So I left my breakpoint on the option and when I change with calculus you see it gets the option and
we're getting a new course I.D..
So the filtering should bring back only persons enrolled in calculus.
And if I ring back MVC on that our dollar programming I think that was empty.
Then we see our if statement is working the enrollments in this course.
And we can go ahead and just make sure everything works.
So just add on Ledford and enroll students and we see that we still have one more adjustment to make
because this this does not reload if we change it and others remove my breakpoints here and change it
back to Java programming then we see that and that it was enrolled so what we need to happen is that
when we click this button this grid actually reloads when a successful enrollment occurs.
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
just need a few more lines of code to meet that work.
No the first adjustments I'm going to make is to repeat is to reduce the repetition that is all over
the place.
So we see that we're repeating this block of code here that is loading our grid and right nowhere threatened
to repeat it once more.
So I'm going to create a function.
And once again because I'll be doing something that is zouk or like this function needs to be inside
of object or block someone to create a function right here and I'm going to call it's Lord enrollments.
I mean you can create the function and call it whatever you like and it should receive a part of it
a parameter called CIPA client and then inside this function I'm going to take all of this block of
code and the place it's so we have our ups and others events.
So we have CAIB which is expected to be passed in anytime.
This is called and this will handle our reload.
So that means when the page is loaded we just replace.
We just tackle this code.
Although the page load so I need to make sure I make a function called here first thing in my j query
so that once the page is loaded this will execute first and I'm passing NCIC which is being siphoned
from the dropdown list and that is the first reference to it.
And the second reference to it would be inside of my change function for the dropped on this I can dis
remove all of this and replace it with one line load enrollments.
And once again you have the CIA.
No.
What we really want to address is reloading after a successful addition.
So I'm just going to copy these two lines.
And if you recall our code that handles the successful additions is our unsuccessful added function
so we just look for added and we see the error that was added.
All right.
And the result is success.
So if it is successful then we want to reload.
So we had forward for feeding oats those grids so I can just add the code underneath all of this and
added underneath this element line.
And here we just add that we're getting the course IP and we're passing it into the function and so
that should take care of calling the load enrollments anytime we want or greed off enrollments to be
refreshed so still in debug mode.
I'm just going to see if these adjustments and then went to reload my page and remember on page load
it loads the grid on dropped on this change it loads the grid and upon enrollment and I just put in
an enrollment so that didn't work because of a scoping issue where our function added which is what
is called upon a successful operation from our Ajax form is outside of the scope of this Jake or block.
And the funny thing is that if we add it to the scope of the Jake or block then the Ajax form will not
be able to detect it.
So that puts us in a weird position where we're actually going to have to repeat the code at least for
now just to get this working.
So I'll just reproduce this.
I noticed that function added is invoking its own do or block.
So that we could use a dictionary here.
All right.
So I'm just going to load it up there inside of this security function and we should see an improvement
in our behavior.
All right someone attempts to add a student to shut up fantasy sharp and there we see that we actually
get that reload and that student is added real time.
All right.
And then if we tried to add again then we get our error message.
And if we switch we see that our food coloring works.
So this is how you can go about developing a nice interactive farm and experience for your users and
easing the need to navigate between screens someone to challenge you to actually add similar behavior
to the delete option.
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
to actually try and do it based on everything that you have learned up to know you would also notice
that navigating between these course selections this error message does not disappear.
So those are little housekeeping things you probably want to do to your page where on change event you
probably set those displays to none.
So I'm just going to copy this quickly and look for my on change event which is here and I'm going to
see on change.
I want to feel it's anything that is on the screen.
So if there is anything on the screen just feed it oats and if I try that again well I would have to
refresh just to make sure it's working someone to invoke an arrow and then if I move to another page
you see that it disappears and everything reloads quite well.
All right.