It's where we left off in the last video we created our data models and in this city where we would
be looking at adding controllers views and taking a general store of the files that help us through
our web programming.
No.
Microsoft gave us quite a few generated files and folders.
They gave us a nice full structure.
It is something like a skeleton or a guidance system if you will.
It is not hard and fast that your project must look like this because as you go along you add things
you remove things so you're full the structure me very from this.
But at the end of the day once you create an NBC project this is the general for the structure that
you get no one to go through the folders we can take a look for and fully appreciate exactly what we
have.
So an upstart you have a few code files.
Those are essential to the actual startup of our application.
They have some free processes and set up routing configuration some identity stuff some bundles for
our styles and scripts.
I'm not going to get into the details of those but we can just have an appreciation of what is an upstart.
If we look at content we see that we have a few CFS files out of the box MVC five comes with bootstrap
kind of integrated and built in so your web application has that bootstrap look and view by default.
You can actually remove it if you wish and you can update it if you wish you can do whatever it wants
it's there.
They also give you another standard since this file which is yours to edit at will.
This practice would have you create another serious file and override styles and bootstrap as opposed
to editing the bootstrap file.
So that's why they would have given you another one where you would add your own custom styles and additional
things to make bootstrap more customized and more personalized in the controllers folder.
We have three controllers and we can deduce from the naming convention that the controller name would
be some word in this case icons and the word controller.
And if you look at all three files you notice that they all have that same form some word.
In this case home and the word manage a controller.
So if you're going to create a new controller you should have whatever you're calling it and ending
with the word control in tabular case.
Funds those are generated.
Those are coming with bootstrap because throw the internet.
Not every computer is going to have the funds that you would like to display.
So it's always good at least in modern day web development to include the funds file with your project
so that the server loads the funds as opposed to the client machine.
So that's that's why that's is there.
I would advise you not to eat it though unless you have a game plan.
We went through modules how we saw where we have different class files and we added or the needs of
these entities model.
So we have our approach star database
where the scripts folder which plays host to a bunch of scripts.
Most of the G query scripts that are needed to complement or bootstrap scripts.
We also have moderniser response which help with responsiveness and the backwards compatibility for
more Isham of stuff for older browsers.
So all of this stuff comes prepackaged with the web projects.
You don't have to add these things manually.
All right so here we have or views folder which plays host to our res of you files with the extension
thought C S HDMI.
I guess it seeing C sharp finished him combined that's exactly what Razer is.
No I wanted to appreciate the correlation between the folder names here in the views and the names of
the controllers.
So we're going to look at the home controller and appreciate that correlation.
So we have a home controller which is a s file and a CSI file is just the class file.
As you see it's really just a class in purging from base class called controller and in it it has functions
methods procedures whatever keyword you use used identify them.
It has those they all return some type of action results and the return value for an action result is
you know what this is doing is establishing that for every method you have here you should have a corresponding
view file and that is what this returns.
So when you send a request for index from the home controller it will search through the view folder
and then look for a follow the corresponding name or home and then it will look for a controller with
a view look for a view with the corresponding function name index and then it will return it.
So that means if you have a method here and you have no corresponding file in a corresponding folder
then you will get something like a forum for error.
What we will get into that is an explorer.
All of that in a few minutes.
So just take a look at index really quickly.
Now our index file I want wanted to appreciate that it has purely HDMI all things in it.
Apart from this section which is preceded by this at sine once you see an outline that means you are
able to superimpose C sharp into your HMO.
All right.
Was a C issue in the file so it's allowing a lot of bit of C sharp and it is merging it with HMO and
I just do a quick example of C sharp in this as a school vector statement so I'd sign if a limit is
3.
This is just my way of example just to show you how appraisal works that actually allows me to create.
Sorry of syntax error.
It allows me to actually superimpose C sharp code right here in my age.
So that is the relevance of my C issue or reason of your file.
Another thing to note is that we don't have that traditional skeleton on I thought it's a skeleton where
every Asian of beach should start with not type.
And our head and our body types we don't have that here.
None of these files have.
That's because they are all inheriting from what we call a lake of fire and we get to see the little
fire in a few.
But what I really want you to see and appreciate is the fact that each file here the name corresponds
with the name of the method that is it the controller.
All right so once you have a method name once again you need to have a corresponding you file in a folder
which has a corresponding name to the controller all right.
So let's just take a tour and finally Press five the moment you've all been waiting for.
So we'll grows so it may have taken a while but once you're here we want to take a look.
I told visual studio and is not at NBC are aiding us to create a fully functional data driven Web sites.
Now this is our index speech.
Cardinal rule for me when it comes to web design is that all pages should be called index once it is
the intended Holmby.
All right now our index page if you look at this and we look at the code you see the correlation between
what is here as contents and what was on the page.
We'll also see that we have a little bootstrap theming going on we're using the bootstrap love bootstrap
buttons even the funds is coming from bootstrap everything's integrated bootstrap.
Now I want us to also appreciate that this is loading from local horse it's not loading from your of
file sets as it would be if you were building a regular HMO page visual studio is actually conjuring
a session of I S express as is short for internet information services.
So it is conjuring magnified version of that and using it to emulate a web server experience when you
go into e-book mode which is when you pressed a five.
Now if we browse freeform we see that this is already home we keep a boat and we see that link change.
So no we have both the host and airport number may differ from mine.
We see form we see a boat now remember or controller name was called Hope so whatever the name of the
fund trawler is that is what will appear and this will be followed by the name of the view that we have
requested.
So in fact contact you see a similar change home slash contact.
All right.
And I will go back to home.
It's going to load index anyway so it doesn't need to indicate anything else.
Now we're going to go back to visual studio and make a few changes.
Back in Visual Studio I'm just going to come out of e-book mode
now we're going to add a new view.
So I'm just going to take two steps though in public.
You know our return type once the action resolves and then I'll see test review
opened up for her or girl abuses and then we know that we have to return view as is the value at the
very least that's our method stub is expecting.
No.
If I run in debug mode once again and then attempts to rose to this view you should get an arrow because
there is no corresponding file in this folder.
So we'll just run that experiment and then we'll build and go ahead accordingly
now that we have or what.
Up up we can follow the same path convention that we're used to.
So we can just see a slash home since that is the controller that we just added that view to.
And then I'm going to write in the name of the new added you which is test you press enter and then
we're greeted with this very unattractive page.
But then if we take the time to appreciate what it is seeing just letting us know that the view by this
name was not phoned in any of the locations that were searched.
So we see that it looked in the views folder it looked in the corresponding home folder and then they
didn't find any files that would possibly could possibly have passed as a view file all right.
So that is that kind of URL that we would get.
Having not made the hard adjustments to our projects now back in Visual Studio we still have a bit of
work to do to get this view over and running.
We already created the method stop here.
What we want to do is get the file over here.
You can rightly click and go to view and then give it the name that we know you want and that will be
test you.
And then you'll see a bunch of other options here we don't need to worry about template model class
just yet.
We don't want to take this but then we'll see something here about Leo.
Page I mentioned Leo pages earlier but we still have not made it to look at the LEO page.
But I will just leave this blank for no ad
and then it goes through this thing called scaffolding.
I know we have our newly created view and it's quite a simple page like we said it's almost a bare bones
each journal page that is capable of having some amount I'll see sharp text in it you get the title
here in this variable.
So it's also generating all of this.
And I'm just going to write a v tag that says hello world and I will give it's one of those famous bootstrap
classes.
Class.
Let's see.
Text Nash in full.
So we should get blue text when we render that of course we can control a shift and B are able to build
and build solution.
Either one works just to ensure that we have no syntax errors in our code.
We also see that or you file is created over here.
So if you go back into debug mode and then we've gross to test you then we should be greeted with a
page with an issue tag with this generates a text as well as a text that we've just added
know that we've made that adjustments.
We'll just come back to this age refresh or maybe you press F5 from visual studio then it would have
loaded to this speech we see here that we have or H2 tag printing this and our whole world looking blue
because we've put on the bootstrap class for text cache info so we can just go MacOS of evil mode.
And now we know how to add more views.
So our project once again we go to the controller and we make sure that there is a method stub that
has a corresponding name with the view that we want to get to.
All right.
Now I mentioned the little webpage more than once and I'm not going to give you a quick tour of what
is in the little piece.
Essentially the page is a generic reusable template for your pages you can have more than one layouts
and a case for having more than one fields would be like if you have a system that has a customer facing
side and an admin portal then a portal probably looks differently from the customer facing one.
So you can have a little ad for the IP inside and the layout for the customer office inside and then
that would reduce the need to do the repetitive stuff over and over and over.
It's just of meaning to the scripts and doing the HMO skeleton every time.
All right.
So that is why you have such a very scaled down version of a view file over here.
But then in the shared folder under views you have a layout that see this ECMO file and you go into
this and you're not bombarded with a bunch of HD IMO but if you take a step back and you just go through
it you see that it's regulated stuff that it's HMO ever hit thugs inside that we have some metal declarations
or char sets and for Responsive Web Design purposes these are bootstrap required at the very least.
We see here where the title is being set dynamically if we remember.
So if we go back to testify we see that here we set the view bagged up titled eat test you in the labeled
file it is changing with each page that the test render and then the static part of it which is my is
the ultimate application since we're doing a school management system of change that the school management
system right.
And then some of the declarations here.
These functions are C sharp functions.
So we see here are at sign signifying that we're superimposing some C sharp and then styles is a static
class which is calling function called render which is then passing in some pharmacies which if you
look at the HMO that gets generated from this you will see the actual code linking all of our files
from our content folder.
All right.
We'll get into that right now.
Later on we'll explore that in more detail.
I just want you to appreciate what you're looking at.
And then we render some of the scripts.
In this case we're really rendering just moderniser does the testing go ahead of everything else but
then below that is where we're rendering the other scripts such as the G query and bootstrap and setting
some parameters.
No if we just scroll through and look at it we see Buddy we see here we're adding enough bar bootstrap
style.
All right.
We see here that we have an action link.
So we have an object but each GMO has a function called Exon link which is taking a few files so a few
values as parameters.
All right.
So here I'm just going to change application name as I'm sure we remember on our page you see application
name coming up every time on each page.
And who would want to say application names would actually want to give its the name it should be.
So this would all management system and then we have enough bar poem about contact.
If we look here we see that this is our enough bar and we have each of those links home uploads contacts.
Now we just created a test view you'd like for it to be in the nav bar that we can browse through it
at will.
So I'm just going to control the.
And that duplicates the line and then we can just modify this so to say test you all right.
So the first block of text speaks to what it is.
What is it you want to print on the enough bar.
The second block speaks to the actual method that it should look for.
So remember in the controller we want to look for the method by the name test.
You notice there's no space here because we don't put spaces in our method names but we have to see
it as it is here and it is not case sensitive if you want to use lowercase here or use.
Look is here.
Are you grossly with lowercase we will all be the same thing over outputs of space with this one because
we wouldn't want to print the kind of case test view or user so we print what we want to or use it here
and then the controller is home.
So this last parliament speaks of the control.
So if you take a careful look at home you would see that we're printing home in our enough bar here.
However it is linking to the index method inside of our home controller.
So it is linking to our index method in our own controller which then search for the.
Searches for the view called index and then renders that over.
We're telling the user it's home all right.
And then as we go down in our layouts we see here in our body contents give.
That's where rendering body so render Buddy really speaks to the actual rendering of the C.S. Isham
view file inside of this entire layout which is why all of them are being rendered we find of bar and
with a filter we saw our filter had our copyright sign the year and some random text which was up in
generics in my is done on its application.
So since we're changing out all of those occurences of my speed on this application we want to ensure
that all school management systems I just looked at that and I'm displacing it here and then I can control
shift and V and build and make sure I have no syntax errors and then we can go back into debug mode
and see all of or changes a person at five to interview so when our page loads we see here that we have
of all of our changes reflecting we have split management system printed here instead of application
name we have artists view no Avatar enough bar and we have our filter reflecting or age.
So if we want to start changing contents you know if it then dude wouldn't want to have a school management
system which is being printed over there we'd want to change the content and so on and we'd have to
go into our view files keynote the content and start putting in all of our custom content for each page.
All right.
So I hope you appreciate all views and controllers work and hope they'll tie back to the LEO page and
how you can effectively go about adding more content and functionality to your Web site.
See you again next time.