This dude's or we will be looking at scaffolding and generating controllers and views for functionality
in our Web sites.
So far we've looked at what does a controller what is a view how they're laying clear go about creating
a new view and attaching into a controller.
What we didn't do was actually linking the model to everything.
So we looked at the sea.
We looked at the V.
We've looked at the M.
We've looked at them in fair isolation and know we're going to actually tie them all together.
So in this tutorial we look at a procedure or process in Visual Studio and most MVC frameworks that
you'll use called scaffolding where we associate the model with a controller and generate the view accordingly.
Now I have here on screen my entity framework diagram and what we will be doing to begin with is create
a course control and some views associated with crowed functionalities for courses in short C is for
create R is for read U is for update and D is delete so CRUD operations basically manage or govern everything
that a user would ever do on a Web site that is data driven so without further ado we will go about
creating courses controller linking it to our course model and generating a bunch of views that allow
us to interact with our courses in our database.
So to start this procedure we go over to our controllers folder we right click and click and then we
select controller.
Then we're given this kind of wizard window where they ask us what kind of controller would you like
to see here you have MVC 5 you have web API 2 with a bunch of other things while you were the one told
of this one is MVC 5 controller with views using entity framework very specific.
So we split this one and then we click at
then they ask us what would you like as the model class.
So from this dropdown we'll see every single CSR file that is in our project listed here but we're not
interested in every single CSR file we're looking specifically for the one with the name that corresponds
with our mission.
So in this situation we want the course which is found in our models folder and remember if we drilled
on into the idea Max we would see the CSR file through that quickly and give you some context.
So we drilled into models we have our entity framework diagram we drill into that and then down here
you'll see that you do have course that C S and that is the model that we want to use to generate this
controller.
So once again we are actually controllers we go to add weekly controller we select MVC 5 controller
with views using entity framework and click Add then we select from this dropdown box course and the
data context class would be our school management DB entities and so we can just select that we can
choose to use async controller actions for void this time and then use it the next time and then they're
asking us which labeled page would we like to use for our views.
So we see here we have a checkboxes generate views we have a chat box here this is reference script
libraries which we really don't need to do since our little page already has the references so we will
just select or label a page by clicking the ellipsis button there we're going to views shared and then
we select our layouts.
Once again you can have multiple layouts so you choose a label that is appropriate for this situation
and then by the end of it there would be asking for the controller name where you can see following
the same naming convention it is auto generated using the name off the model which is course the same
courses and the word controller.
So the naming convention maintains that we click add
it will go through a scaffolding exercise at the end of this exercise you'll be given a class file and
you'll see much more code than we're used to from our home controller.
Now once again our controller is just a class with the name of the model.
In this situation and the word controller is inheriting from a base class called controller.
Then they go about initializing our data.
Context object which allows us to communicate with our database.
Remember keep on saying that this diagram is our bridge.
This bridge is all invoked in this one line.
Here in line 15 so we initialize this object to a new instance of our entities diagram which establishes
the connection to our database.
Then if we look through we'll see that we have quite a few methods that were generated and some comments
to guide us as to what is happening here.
So the first one is index.
Remember as always indexes the first file that should ever be in any website.
And this one returns a view.
But then in this situation we see that we have parameters in this view all right.
So you see that you have VB which is the same name as our database context.
And we're running a query against the courses table and we're just passing all of those to list
for the domain.
You have a detailed speech which is taking probably an integer.
All right.
So that question mark really means that it could be.
No.
It could be a value.
It is preparing that it might be a no idea value that is coming in and then it has a cursory check to
see if the idea that is passed in is no then return some bad request code right.
Otherwise it will go on to source that course by I.D..
So this is DB that courses that find find will return any record with this I.D. and store it in a variable
called course and then it will go on to see if the course that is returned is no meaning nothing comes
back at the end of this query then it still sees issue ATP not phone.
So you see quite a few returns here and none of them are views right.
So action results.
What then.
Action Result allows you to have different values return.
As long as you have the card value or an acceptable value then you have a card to return type.
So we can return each GDP those quarter results for Butters but request we can return if GDP is not
phoned or we can return view with our sourced course.
All right.
So we looked for the course.
And then once nothing is no and everything checks out then we return the view with our course data.
We also have a create method stub and we go on to see that there to create methods.
So we have one to get which just returns of you.
And then one for posting which comes with some security features and some binding and as we go along
we'll explore them more.
And this one makes sure that the data coming back is valid before it goes up both adding it to our database.
Our course is stable in our database and then saving the changes and then redirecting to index if the
state is invalid then it returns to the view with the course with some error messages stating what is
missing or what was involved in the same way we have to create we have to edit.
So we have one edit here which is I get and we have one edit here which is of course then the code bases
that are quite similar.
And then we have a similar construct for our deletes and then we have a dispose function.
So all of this was generated just by you adding a controller.
Having the class generating the views and you get all of this.
So the key in what I just said was generating the views we have the methods.
So we have to ensure that we have the views that correspond with these methods in a corresponding folder
for this controller.
So if I go to my solution Explorer I see here that control those added courses controller but then I
need to validate the views and if we go to interviews we see here courses that name just collapse this
the names correspond courses controller courses folder and you'll see that for each method that is here
in the controller you have a corresponding file so if we click index we will see quite a few things
happening here that was not present on the previous index but so we have here the inclusion of a model
right on this type.
I enumerable so C Sharp has quite a few data types.
If you've been doing this thing for a while I'm sure this wouldn't be very foreign to you but you have
this being included because in all fairness the index file is getting a list right.
So remember over here we're passing up a list into index of DV.
That course is to list.
So it is getting a collection type.
All right this is getting a list of course is a index page should display all of the courses.
I'm sorry that's the wrong index file.
All of the courses that would have been in the database as at the time of you loading this speech are
and they have quite a few things happening here you have this create button action linked for create
and because index and create are in the same controller you don't have to explicitly refer to the controls
it could put on or you could put on the controller in the name which courses you can redirect to another
controller.
Of course this would feel because there's no create inside of the home controller.
Right.
But then by virtue of the fact that they are in the same controller you don't have to be that explicit
moving from index to create.
So this works then we go on to create a table.
We have two properties for our courses table that don't include the idea.
So we have ideas with type.
Then what creates we don't need to display the idea and MVC knows you don't need to display the idea
so and they generated this speech they made sure to just exclude what they figure you wouldn't want
to display to the the end user anyway.
So we have a display name for title and one for credits and all of those are both of those are put into
the header section of our table and then we see them injecting some C sharp code here where they say
for each.
All right.
So they're seeing for each item in module model being this here or the data coming back.
So once you pass the data into the view you can reference it by seeing module.
That's a keyword right there.
So all of the data and just by hovering over the tooltip is indicating that this reference is the collection
of course is coming from the database.
Once again courses controller index where querying our database looking in our courses table and getting
all of them and passing them to list and passing that into the view the view can identify all of that
data coming in through the keyword called module since it's a collection we need to list everything
in that clinic collection.
So we see for each item in the model or set of data coming back we want our rule.
So for each item we want to generate our rule and this rule should have one column for the title and
one column for our credits and then a third column with our action buttons which would see edit details
and delete which each will wrote to the corresponding methods in our control.
All right so remember in our courses controller we had edits and added quickly we have edits we had
create we have to both create and we have details and we also have delete.
No we need to be able to browse to this page or any one of our pages.
I'm going to go to our layout page and make sure that our leaflet has a link that can bring us to that
index page so I'll remove our previously created test view link as we don't need it going forward.
And I will just manually type this out so I am creating a new nav property or NAV link setting an action
link so I'd sign each t o dot action link and then I'm passing in as parameters what I want to be printed
I know what I want to be printed would be course is just print of course is and then we're looking inside
of the index sorry we're looking for the index method inside of our courses.
Controller.
All right.
So remember it is what is displayed the action or the view that we want and the controller that we should
be able to find it in
now having done all of that we hit F5 and see what happens.
Now this is the result of our page so far.
And we see here that we have a link called courses when we click that we should be guided to our index
page.
And when that page loads we see it is empty.
We'd love anything in our database.
Right.
But then we see it's consistent with what we saw in the view we have index which I believe is in an
H to tag.
We have a link that says create new which when we click it should lead us to our create form and then
we have the two headings for our tables.
But we have no rules and columns afterwards because we have no data.
Remember it is generating each row for what is in the database.
If the database is empty then no rules will be generated that for each loop will not run.
So let's us go about creating something new.
So create new brings us store create view which asks us for a title and the credits.
So you see the create view is actually auto generating and I'll just head over to visual studio while
we're still in debug mode and take a look at the create view.
We see it generated a form.
All right.
So there is an issue and a helper function called begin form which renders out a form in each demo and
then using some bootstrap code.
We're getting a form here that does a validation summary with a class attached to it and there's a certain
pattern here that as you see the code more and more and you catch onto the pattern.
So I'm deliberately not going into the details of certain things because I want you to see and appreciate
the pattern as you go along those certain things will come to light more and more and then we have a
div.
And in this div we have a label.
So you see another issue on a helper function being used and we're looking at the model and we're creating
a label for a title and giving it some bootstrap classes.
Sorry.
All right.
And then down here we generate an editor for.
So there's a helpful function that says editor for pretty much this just says I will look at the data
type that I'm supposed to create a control for and creates an appropriate control.
So if we had a boolean for our human C that we needed to create something for editor four would automatically
generate that checkbox so there are situations where you want to use editor for four E's and there are
times when you need to be explicit so you could see each some of that takes the box for all right so
you can be explicit.
And there are certain times you want to be very explicit because it is therefore has some limitations
takes looks for comes with more text box related functions that allow you to do a few things otherwise.
So we want a text box for our model and then we have a little lambda expression here to see a model
about title and then we're adding Isham attributes if you remember from each demo when you have a nation.
I'll tell you I can add in attributes such as I.T. class please holder when it comes to text boxes.
So we're adding new customer attributes and remember this is all a C sharp.
So we have to treat it a bit differently from how we would have in St. ECMO.
So we're adding emotional attributes we're adding.
Once again another is another collection of attributes.
Now if you use text box for then some of the code here will also have to change.
So you won't be able to see new age or attributes in this manner.
You'll have to refractory your code a bit.
So to not complicate the situation as we're just waiting our appetites.
I leave it to an editor for and then we'll move along.
So we see editor for is increasing our text box and it's assigning a bootstrap class called form dash
control to it.
We also have another section for validation message which means that if we stipulate that at the database
level that this field is not knowable then the validation message would know that once we try to submit
and no value or an empty field when we click submit on our form it will reject it like we saw in our
controller logic where it checks is valid.
So if it is not valid then it will reject the tentative return to view with whatever values came back
and the validation message would show accordingly so it does a lot of the heavy lifting for us.
And then at the end of it all we have our Submit button which just gets a bootstrap class or defaults
on which it changes to success.
So having changed it to success to just save changes we're still in debug mode and we just go back to
our screen and refresh and although it's to reload our page with our changes and there we go.
Now let's go about creating a new course.
So I'll call this one introduction to web design.
I'll make sure I got my spending right.
And then the like I was seeing with the edit for it knows that credits is supposed to be an integer
so it is actually giving us a text box.
I'm actually typing text right.
No I'm not accepting it because the control that it's generating for it is a no thicker soft type no
picker if I inspect element I'm sure I'll see input type to be no.
There we go.
So it is restricting me and what I am able to enter.
So usually introduction to web design is a three credit course.
I just could create and there we go.
So we go back to our index page right.
And now we see that we have a generated row with two columns one for the title one for the credits and
then another column which had or action buttons or edit details and delete and each one will bring me
to the corresponding page according to the title.
So if I click edit and I'm actually going to bring up visual studio this time around and puts a breakpoint
on our edit action.
All right.
So each method here is called an action so the breakpoint is sitting there were still in debug mode.
And then I'm going to click edit and then we take the time out to dissect what happens in Visual Studio.
So the breakpoint is hit.
And then if I hover over idea I see that I want.
And that's because our newly created record in our courses table has an idea of 1 and then if we step
through our code we see that if I.T. is equivalent to know this evaluates the falls.
So it skips by that
and then it goes on to run this query which then says Find the course with the IDA one.
So I if I step by that it runs that query and it goes through some sort of
and then it should return course.
So if I hover over a course I'll see that it comes back with a bunch of generated values but I can drill
down and see the exact details.
And here we see that we have our credits being three and our title being introduction to web design.
And like I was saying earlier once there is a relationship entity framework will automatically bring
over whatever values are associated.
So since we have no enrollments that are directly related to this particular course then the list of
enrollments is zero.
It's empty.
All right.
So if I press F5 it will continue to evaluate if the course is not known and we know it's not known
because we just saw that it has a value.
So the value is not no.
So it will return the view with the corresponding data that we just looked up and that's all we engage
in the editing procedure where it then says bring up this form.
So we see it looks very similarly to our creates.
Except it comes preloaded with all the data because we looked for the course got the data associated
with the course and then passed it back to this view.
Now if I make a change here the expectation is that the course would update when listed in the index.
So I'm going to change this because we expanded our programs and our way of introduction to web design
part 1 and then we'll have a part 2.
I can also edit this view because I want the save button to look like green so I'm going to go back
over here
so I'm going to make a few changes here on this view.
Either way I want to save button to be green much like on or create page so I'll go by here we're still
in debug mode we'll go into the solution explorer find that view.
So we're looking course this folder and we look for the edit view and we'll see that it looks very similar
to our index create page and then we will modify our submit button to have Beatty and dash success once
again.
So as you go along you get all the generated code which is really just a guideline but you will be prompted
and influenced to give it your or individual flair and change certain elements as you see fit.
So if I go back here and refresh and you see it's hitting the breakpoints again I don't want it to do
that so I just take off the brake points on clicked it and I just click continue and there we see that
our patients reloaded and we have our green save button.
Of course our changes were on done so this change again and then I click save and there we go.
So the change was done and we now have introduction to web design one the same number of credits.
And if I look at the details the details action is doing a very similar thing it's finding which course
has the idea associated here of course that is not visible but if we hover over the button we'll see
in the bottom left corner that the link is being displayed.
So it's going to of course is lush detail slash one so that slash 1 is that parameter that gets passed
into our action in the Parliament is I say if I look at details to be specific we'll see we can find
details we see actions or details it's getting a Parramatta called.
So whatever the idea is it's being blown to this link right here that such that when it is clicked it
is going to be passed to the details.
Action in the I.D. parameter and then it is evaluated making sure that we're not wasting the time because
a database called Think of it as expensive.
So you want to make sure that you vets your data as much as possible before a database call is required.
So here we're just making sure that if nothing came over then don't bother to waste the time to try
and look for something that's will be invalid so we check we validate that this idea value me.
Well it may exist at this point we don't know yet.
Then we try and find it and then we check if we phoned it and if we didn't we say not phone which is
like four or four and if we did then we say please return the view with the data associated with the
course.
So let us try that and then we see here this is our details you very simple page and all it's doing
is displaying the title and credits so it's details it's a view page it's it's for viewing purposes
it's not for editing or creating.
So this would be more like the are in crowed.
This is your read page right.
And we can choose to go back to the list which will just roll spark to the same place.
This week we're also still or we can choose to go ahead and edit which would be the you.
The update and then we do want to update this again.
We can just go back to the list and then from here we can also delete.
So if I click the would be led to something of a confirmation page which did a similar thing to the
details it looked for the course and it brought about the course it's printing the details and then
it's asking Are you sure or you want to delete this.
And then just to add to the the aesthetics of the page I'll just go and find this delete view and then
we can look through we can change the verbiage as we wish we can say okay delete.
Are you sure you want to delete this and we can put this in an alert so we can give it a class and I'll
give it an alert danger all right.
So that's a bootstrap class alert danger bootstrap has excellent documentation I'll share that with
you so you can if you're not so filled with bootstrap classes and what they do you can always go to
the bootstrap get bootstrap outcome and they have excellent documentation where they go to all of their
classes and there are functions for you.
So I've made that change and then I refresh to see my changes.
All right.
That's not the best I think I'm using the class wrongly but you can see where the bootstrap class is
helping me to just add a little individuality to the page as opposed to what was auto generated for
me and I'd probably want the button to be read.
So I was find that button and here is a button it's a submit button and I'll change that to meet to
invest.
Danger
I believe for this one.
I need to put alerts then alerts.
So just do that save and refresh
and there we go.
So this looks much better.
We see that alerts give it a bit more putting on an alert dangerous what made it red.
All right so a lot of those bootstrap classes you have to use in peers but take your time and look through
the examples and then our button is also right so delete.
Just to show that our code works and what I'll do is also set a breakpoint in our courses.
So we already loaded our get delete because we got the data.
All right.
So we've got the data for display purposes.
That's what this one does know.
When I click submit.
As with any other page it needs to do something.
So like I mentioned before each one has I get and I post editors I get and then it has a post.
So you get is what happens when you burrows to the edit page but once you click submit the post is what
happens.
So we'll see in our delete post what happens now.
The point is it.
And then I will go ahead and click delete and then it hits the breakpoint.
So here it pauses.
We see that I.D. one it is not going to find the course and then visual studio 2017 allows us to do
this cool thing where we just skip directly through a line somewhere to skip over this line.
All right.
That means a query was run.
So if we look inside of course object we see that it got the course.
That's the idea.
Those are the credits and that is the title and then it's going to see remove from the table whatever
data is in this object.
All right.
And then once that removal occurs we need to see changes.
I'll just press F5 and at the end of all of this it is no going to redirect to our index action so you'll
see that this is also one big pattern that happens in every single action in the edit action we see
where it does some operation it validates that the data that has been put in since the edit is valid
and then it does something where it attaches the fact that this entity was modified and it seems the
changes.
That's a nice quick way to do an edit.
And then we return to the index.
If we look at our create create is rendering the view well then it has a post where it is validating
then adding seeing the change and then redirecting to index that is pretty much the flow of any code
operation you context to only write code to effect whatever change to the database.
You probably are creating content so you have to do that particularly maybe your editing Clinton's they
have to find out what it is that you're editing and then lets you know it has been edited and then see
if that changes.
And then in this case we're deleting so we have to get the file are the record rather that we're deleting
then seeing the changes and then we always go back home to the list.
The list is what shows us that the changes have been made.
So I'm just going to present five and skip ahead and then there we are we're redirected to index and
we have an empty list.
Now you can do that with any other data team that you have in your database that same procedure that
you just did for courses obtains for students and it may be a bit different for enrolments.
But I want to challenge you.
Go ahead and do it for students and create the student code operations using the methods and techniques
that you just learned in this video.
Feel free to leave comments and let me know if you have any difficulty I'll be more than happy to assist
you.
Thanks again and have a good one.