字幕表 動画を再生する
Hello everyone and welcome to Learn MVC step by step in 2 days
2 days means 16 hours
yes you guessed it right 16 hours
so first thing you would ask me that some kind of scammer something
absolutely not this is not scam something this is the real thing
so next thing you would ask me that hmmm
so is it really possible to learn MVC in 16 hours
my answer is yes
absolutely yes and confidentially yes
okay
So before we start MVC right
we need to go and arrange our environment we need to go and ensure that we have the tools with us
the first thing what we should have with us is the ultimate edition
so this complete tutorial
this complete MVC tutorial is in MVC 5
but it holds too for MVC 4 as well
it holds too forMVC 3 as well
or MVC 2 also down the line right
So first thing is we need to go and get hold of this ultimate edition here you can see
I have the Visual Studio which is installed in my computer
so ensure that the first thing is you need to go online and serach for microsoft Visual Studio 2013 download
so once you go and search Visual Studio Ultimate edition on google right
you should actually go and land on to this page here
you can see I have highlighted the URL
In case you are not landed into that page
you can pause this video and you can copy that URL you can type that URL out and get to the right page
So now the next thing you would be asking me is that
why are you telling us to download this Ultimate Edition and why not free edition like XPlus Edition
or must be some kind of a downgraded edition like professional edition
This tutorial sincerely
very very sincerely aims at making you a true MVC professional
So I don't want to lose some features by downloading XPlus edition right
And second thing you know if worried about the price
watch on that screen watch my screen over there
it is clearly written free 90 days trial
So here you have 3 months with you 90 days is more than enough to learn any thing in the world right
so here you have 90 days before you a Visual Studio
and here I am promising you that I am going to teach you MVC in 2 days right
i.e. 16 hours so the remaining
whatever right 88 days is for you to go and create project if you wish right
So why go ahead and why
why should we download you know XPlus edition and lose some features
let's go ahead learn MVC like a true professional let's use Ultimate Edition
Once you have downloaded the ultimate edition and you have installed in you computer you should see on the screen what you see here
So click on file here click on new project
and click on this web menu over here
So once you click on the web menu here you can see a template here saying ASP.NET Web Application
You can also see one more sublink inside this web here Visual Studio 2012
So if you click on this you will see some template here and you can see the the MVC 4 template here as well
So the first question you know which would come to your mind is this two links over here
what is this web and what is this 2012 because if we click on this 2012 you are seeing MVC 4
if we click on this web you are not seeing anything right
So what are this two links?
Now this tutorial will be using MVC 5 for teaching you MVC
but whatever I teach in MVC 5 hold too for MVC 4 as well as MVC 3 and MVC 2 as well okay
Now in case you want to do MVC 4 then you need to click on Visual Studio 2012
and you need to use this template over here
and in case you want to do MVC 5 then you need to click on this web here and you need to actually go and create this project over here
Now this is a big difference between MVC 4 and MVC 5
In MVC 4 if you see you know you have different different templates here for example
You can see this is ASP.NET MVC 4 then we have ASP.NET Web forms and other things
very quickly before I move ahead with difference between MVC 4 and MVC 5
I want to clarify here something regarding ASP.NET
regarding MVC and regarding Web form
Lot of people think that ASP.NET is different and MVC is different
Absolutely wrong okay
First thing our base framework is .NET right
From .NET ASP.NET is created so again ASP.NET is a framework for web applications okay
From .NET we have various framework you know like
we have a windows framework
you know we have a web framework
So this ASP.NET is a web framework
and using ASP.NET microsoft has created web forms and it has created MVC
So don't think that MVC is different from ASP.NET
MVC uses ASP.NET internally
So recaping very quickly
So at the base we have our .NET Framework on that top ASP.NET is created for Web Applications
and from ASP.NET we have something called as web forms
whenever I say old ASP.NET I mean by ASP.NET web form
Web Forms has a behind code
so if you have ASPX it will have ASPX.cs right
So that is our old ASP.NET web forms
and this new architecture MVC 4 or MVC 5 whatever you think right is a separate thing
So we have web forms and MVC using ASP.NET internally and ASP.NET uses the .NET framework internally
So now if logically web forms and MVC belongs to ASP.NET framework then why should we have such kind of separate templates
And that's what they had improved in 2013
In 2013 they created only one template for everything
You can see here rather than having this templates you know separate manners if you click on web here
you can see now it is saying ASP.NET web application
and from there you can now go and make a choice say
okay now i want to create MVC now i want to create web form now i want to create API whatever it is right
So by creating this ASP.NET 1 you know it will avoid lot of confusion you know where people will thinking that ASP.NET is different and MVC is different right
So i am going to go and start from this template over here
if you wish in case you are into visual studio 2012
you can start from here the steps are almost same okay
but let me start with MVC 5 so that's a recent version and it will keep us you know upto date as well right
so let us say this is HelloWorld
so it's a first program HelloWorld and let say okay
Now you can see as i have said that it is one ASP.NET framework
you know all of these guys Web forms and MVC they have emerge from the ASP.NET framework
So you can see now this
second template here is telling me so what you want to do
do you want to use web forms
do you want to do coding in MVC
do you want to do coding in Web API
So from here you can see now you can go and make a choice of what things you want in your project
So at this moment we are learning MVC
So we have to go and select MVC over here
so you can see MVC is checked over there that is right
and what we will do is because this is our first HelloWorld program you know
let's not use any kind of authentication or security mechanism at this moment
we will talk about these options later on
So what I have done here is
i have clicked on this change authentication button here and I have said no authentication right
So you can see here I have selected here I have selected MVC
i have selected this check box and I am all set and i say just say okay over here
so you can see you know
the new project is created
you can also see the solution of the new project
In case you are not seeing the solution click on view here and click on solution explorer
So there you can see the complete solution of your MVC project
so now I am almost done with 5 minutes of the video
I have almost created a solution here but I have still not talked about what is MVC and why MVC
For now what we will do is we will talk about this why MVC later on
because if I start speaking about why MVC now right itself
it will lead to more confusion believe me that okay
so what we will do is let's complete 3 or 4 labs
and once you get hang of MVC then I will talk about why MVC
but for now let me talk about what is MVC
MVC stands for Model View Controller
MVC is nothing but it's a architectural pattern
where we divide our web application into 3 layers
one is the controller
the other one is the model and the last one is a view
So in other words every layer in MVC is assigned a unique responsibility
So the view is for look and feel and positioning
So the view is the something the
something the end user will actually see
The model supplies data and business logic
so the models are nothing but the classes like customer class you supplier class etc
and the model can intract with data access layer or some kind of services like wcf service or web service which gives data
and the controller who is actually the heart of MVC architecture
he is nothing but he is a coordinator between model and the view
so what happens is when a end users sends a request or action i will say rather
so here when we say request in MVC we term it as a action
so when a end users actually sends a action to MVC site it first hits the controller
and the controller depending on the action picks up the appropriate model and binds it with the view
and that result is send to the end user browser
so for example if a user send a action like
add customer now remember actions are normally verbs like add customer, update customer, go to home or whatever right
so when a end user actually sends a actions like add customer
this add customer action first comes to the controller
The controller then says okay let me search you know which is appropriate model for it
so must be the appropriate model is a customer model object
so he create objects of a customer model object and ties up with a view probably called customer.aspx
or in case you are using razor it can be customer.cshtml
so with this approach you know we end up assigning unique responsibility to each layer
so when we make changes in one layer the other layer is not affected
and this makes the software project more maintainable and more better in terms of architecture
so let us map our MVC architecture with the solution which we have just opened
so you can see here we have the controllers folder here
so all your controller code will go inside this folder
you can see we have a models folder here all your customer class your supplier class or whatever is your domain objects they will go into this
and then we have the views folder which will have the aspx or html or must be the cshtml UI
right
so at this moment don't worry about other folders I will come to them as we go ahead in the labs
so at this moment this where the controllers will go
this is where the models code will go
and this is where the views code will go
so let us move ahead and let's do lab1
Now before we start with Lab 1 let's go ahead and delete all these codes you know which have been inserted by the MVC templates
so that we can learn from scratch so you can see that I have deleted all the codes currently which is there in the controller folder
I want to go and delete all the folders which are there in my view folder so that we can start from scratch and I can teach you to exactly how things work
So you can see now all the codes have been deleted from the controllers folder
I have deleted the models folder did not have any code and even from the views folder there is no code here as well right
so everything clean everything nice
in the view folder there are some files but leave that files at this moment you know
they wont't affect us
you know while we are this first lab
So let us start with lap 1
displaying a simple Hello world in MVC
So whenever we start any programming language you know
as a tradition people always go and display hello words they get warmed up and then we can go ahead with more complex labs
So what we will do here is so let's create a very simple controller called as a home controller okay
And whenever end users comes he will say okay go to home so there will be actions in this home controller called as go to home
So he will send the action go to home and this go to home controller will go and display a page called as home.aspx must home.html
or home.cshtml some kind of a view
So at this moment we will not create any models let's keep it as simple as possible
because it's a first lab let's not get very heavy
So we will create a simple controller called as home
in that we will create action called as go to home and then that action will invoke a page called as home.html or home.aspx
so let us first right click on this controller here
So let's start from the start
so I want to and first add a controller here
add a contoller
so as soon as we have clicked on this add controller here you can see
he has popped up more templates for the controller
so for example you can see you know here is a controller with read and and write actions
So if I take this controller i will get some ready made code
Here is a controller which uses entity framework
you know in case you have not done entity framework please our videos of entity framework
you know where we will explain that what exactly the entity framework
but if I use this then there will be some ready made code
you know which will help me to connect to entity framework
so I will get some ready made code over here
but remember when we want to learn something
we should start from scratch
So you saw that how I deleted everything from the controllers folder
all the ready made code from the controllers folder
how I deleted all the views from the view folder right
So what we will do is let's select the first controller here
the empty controller
In other words in this controller in this template we will not get any codes
so we have to write from scratch right
So let me go and select this and I'll say add
So the next thing now what he tells us is that basically gives the name of a controller
And you can see
If you see this window over here
he has highlighted the controller name
but you can see that he has not highlighted this word controller
Remember that this word controller is a reserved word
don't even think about deleting this word
If you do that then you will end up into a mess
So Incase you want to name your controller as a home controller you should just say home and the word controller
In case you want to name the controller as a customer controller
you should say customer and the word controller
So what I'll do for now is I'll go and say this is
the home controller
So you can see I have written here the controller name
but I have not deleted the controller word
Don't ever try to do this
If you do this you are ending up into a mess okay
So I'll say add
Now the time you have created this home controller the first thing which is very noticeable here is
you can see inside the views folder he has created a home folder
so that means you know for this home controller
This is where the views will lie in right
So let me go and add a view here
So i am into go and add a view here
add a view so I'll go and add a view
So let me go and name this view as
MyHome Page Okay
And you can see there is a small check box saying use a layout page
So I'll talk about what exactly this layout page latter on
but at this moment let's go ahead and uncheck this
And let us again go ahead and say empty at this moment
So we can learn from scratch okay
I'll say add
So you can see inside the home folder he has added this MyHomePage.cshtml you which is a razor view
remember that all the .cshtml views are termed as razor view
And in a razor view the sintax always start with the @ sign
But at this moment we will not go into razor coding
you know we will talk about how to use razor later on
So at this moment I'll just say
welcome to my first
MVC page okay
or MVC view
so rather than saying page page
let's try to use the same terminology what basically uses view
so now the first hit will come to this Home Controller here
so you can see here the first hit will come to the home controller
so
On this controller the end users will send a action called as go to home okay
Remember actions are normally verbs so I am going to say here okay
this home controller will have a action called as go to home and this action will return a view called as my home page.cshtml
So remember our view name at this moment is my home page
remove the word .cshtml so I'll say as soon as someone goes and hit this action here I will return
a view my home page
remember you should not say my home page.cshtml you should say without the extension here right great
Now let's do a Ctrl F5 let's see if this thing will run or not
so what will happen now the end user will come
and he will give this home controller and he will hit with action go to home and
this go to home will actually go and invoke this MyHomePage.cshtml view
So you can see now currently our site is running here
and he is saying that I am not able to find the Index page
Why is this error coming because you can see there is a action called as Index
So by default if you don't get anything here
He is trying to hit that Index here okay.
So at this moment he is saying that I am not able to find the Index Page and that is right
We have not created any Index Page
So we need to go and invoke this action go to home right and not the Index Action
So in order to invoke this go to home what you have to do is
you have to write in this way
we have to say here /controller name
Now remember you have to say /controller name without the word controller
So you can see here currently my controller name is home controller
So I have to say here only home and not the word controller with it
And then after that I have to say inside this home I want to invoke the action go to home and let us press Enter
So you can see there our application is running.
So it is showing here the first
page you know which we have created here
this one will come to My first MVC view right
So remember you have to type the controller name without the word controller
So if it is a home controller type here home
if it is customer controller type the word customer
and inside that controller type action like Go to home
so if you press you should able be to see the view
so this was our first lab of MVC displaying a simple Hello Page using MVC 5
Now I would like to point to couple of errors which you can get you know when you actually create your first MVC page okay
For example let's say for some reason you know
if you move this MyHome.cshtml to the outer folder
for example you can see here
I am moving this MyHomePage.cshtml to the views folder here
you can see here i have new date outside the home folder right
If I do this then my project will not work
So if you see this error here very quickly if I again try to go and invoke my site here
So if I try to invoke this Go to home
You can see now I am getting this error over here so this is a very common error which people normally get
and this errors says the following
It says that
your view should either be in the controller name folder
Controller name folder means for example at this moment
my controller name is Home right
so either this page MyHomePage.aspsx or cshtml should be inside the home folder
or either it should be inside a shared folder
So in case you have not put your views in the proper folder then you will end up into this errors
So either I should go and move this page into a home folder
or what I can do is I can go the other way around
I can also and add a folder here called as a shared folder right
so I can go and move this page from here to the shared folder as well
So this is also fine.
So if I do this and if I try to reload my application
I should be able to see my view
So this is one of the very common error which you will get saying that
your view is neither in the shared folder and neither in the controller name folder
So that is a first error which probably you will get you know when you create your MVC application
and the second thing to remember here is currently if you see my action name is Go to home and my view name is My home page
but let's say for some reason my view name was go to home
then I don't need to put the name here
In other words for instance let's say
this My home page here
let me go to my solution explorer view solution explorer
let's say I rename this page as Go to home okay
So I rename this page as
Go to home
In other words this name is a same name as the action name okay
So whatever action name I have here Go to home right
I have kept my page name the same very quickly let me just drag and drop here
So you can see here now
I will zoom here
so you can see
let me put a zoom here
So you can see now my view name is Go to home.cshtml and my action name is also Go to cs go to home.go to home okay
So if this is scenario you know where your action name and the view names are same
then you don't need to put this return view and the name inside it.
In other words you straight like this you can see here return view and that't it.
so this will work
So in case your action name and your view name is same then you don't need to put the view name there right
So if I now execute this again this will run
So if I say Ctrl F5 so if i go and run my action I should see the same output
But you know at this moment here you can see i have not given the view name
why because my action name is same as my view name
right
So this are two important points
First thing always put your view inside the shared folder or the controller named folder
and second you know in case your action name and the view names are same you don't need to put the view name
So this was the first Hello World MVC program
So when I started this video
I said that we are going to learn MVC in 16 hours i.e. 2 days right
So that's a promise
a promise
okay
so till now we have completed 20 minutes and in this 20 minutes we have learnt how to display a Hello world
you know and then we also saw that what kind of errors you can get in MVC
we also talked bit about the architecture of MVC
we saw that you know what kind of softwares we need
in order to go and create an MVC application so now you are just 15 hours and 40 minutes left out to become MVC expert
So do not stop I know how boring it is to hear my voice
but it is for your good
it is for
for your carrier
So keep moving keep watching ans complete the remaining 15 hours and 40 minutes
If you have any problem any issues
you know somewhere you getting a error which is making you stop
send a mail at questpond@questpond.com
we'll definitely help you out.
So 15 hours 40 minutes still left out thank you so much
So let us move ahead with a next Lab of MVC or I'll say Lab No.2 Routing
So what exactly is Routing?
If I put in one simple words routing simplifies your MVC URL
Again I will repeat
Routing simplifies your MVC URL
Now what do I mean by URL simplification
Now if you see developers right you know
sometimes developers have a coding standard
naming standard I'll say
for example for class names I have seen developers writing clshome right cls
they put the word cls before the class
I have seen some other developers you know putting names of Sub routines like sub functions right
So if you have such kind of a living convention which is more technical
then it is very difficult for the end users to write something like this
If you see the current code the end users has to say clsHome/SubGotoHome
Now that is definitely not the users friendly right and specifically when the end users are not the technical person
you know for them it is very difficult to write such kind of URLs
and that's where exactly routing helps us
routing
helps us to create user friendly URLs
and those URLs you can map with your technical controller names and action names
So for example if you see currently
the way
the url is Home/GotoHome
let's say you want to make your end users life easy and you want to say okay
he can just sites
just type site name whatever it is
local host 1248/home and done
He does not have to type GotoHome
right
So in order to do that what you can do is you can go to your solution explorer
So go to your solution explorer and
go to the app_start folder
so you can see here there is a App_Start folder
and in that we have a file called as RouteConfig.cs file double click on it
let me go and zoom this code here
You can see that we have something called as a route collection here and that's what the routing at the end of the day
Routing is nothing but it is a
it is a collection you know which maps the user friendly URLs with the controller names and method names
So for example you can see here this map route method
First thing if I move my mouse you can see it's a route collection
again I am going to halt for 1 or 2 seconds you can see here routes is a collection
The name is Route collection okay
So just routes is nothing but it's a type of route collection. It has a method called as map route
and this map route has 3 important things
First one is a key name
every collection you know has a key name right
Key 1 Key 2
So you can see by default there is a default key what he has added
and he says that if the URl structure is like this Controller/action and the value
then go and invoke the Home controller and go and invoke the action index inside it
So what I will do is I am going to go and add one more route here
So I am going to say here Ctrl C
I am going to this things
I'll say Ctrl V and i'll we say this route is for the whole so I will say home and
when any one goes and type it like this
so when any go and says just home
please go and invoke the home controller and you know this action go to home
right
So I have created you know a simple home route here
I named it as home
If somebody types this URL
If somebody says a site name /home it will and invoke the home/go to home
In the same let me go and again create some more user friendly structure here
For example let say this is again a more one more version of home
So if somebody says home/home he will still go to home/go to home
so you can see here that now I have created some user friendly URLs
One is if we just types home he will go to home
If he types home/home then also he will go to home
Let me go and type one more user friendly URL here
Let say I'll say here something like this
I will say if he does not type anything
in other words if he just go to the sites then also he will go to home
So you can see now how I can define user friendly URL and map it to my controller name and action name
so ff you see here now three variation of the URL
one is home
one is home/home
and one is without anything it just goes to the site and the home page opens right
So if I do the Ctrl F5 now very quickly
you can see that it has ran the site but it saying with that this home 1 is already in use.
Remember I said right
this name is a key and key in a collection has to be unique
So you can see here I have said here Home1 and again I said Home1
So let's name this as Home2 okay
Let me build this
Solution let me go here and let me do a reload
So there it is now you can see as I have said for home2
you know Home2 I have said that if you does not put anything he should
he should show me the
this right the home page and you can see he has shown right
Now if I say here okay what he dis just puts home
yes it will still show me the home page
what if he is put here home/home
yes then also he shows with the same home page
So routing is nothing but it is creating the user friendly URLs and maping those user friendly URLs to your controllers and actions
Now I would like to talk about two important points regarding routing
If you remember when we open the routeconfig.cs
this code was already present you know what this code says
this code is nothing but its a entry which is made inside the routing collections where it says that
you know by default you should invoke by the controller name and by the action name
So the first thing is don't remove this code because in case let's say
if you know
if any of your structure does not map any kind of controller and action
it will trey to invoke this key from here and it will try to go and search the controller name and action name
So in case none of your URLs match
it will try to go and find from it's last routes collection okay so do not remove this code that's the first thing
and second thing is never make this code as a start code
If you do this what will happen is by default this route will always get invoked and all the other routes will get bypass
For example if you see now
let go and build the project
If you see for now if I want to say here enter
you will see that he says I don't find any thing
for example you can see now I have entered he says I don't know what is happening right
If you say here home again nothing is happening
so until you don't type the exact controller name and action name
you can see the page is not coming
Now you can see here I have typed the controller name and action name
and because that is the first thing in this collection here
he get's invoked and he shows the page
So in other words what is happening is all the other routes keys here are getting bypass
So remember that this code
this controller action format should be your last key in the collection
not the first one
Now the route stop map route the map route function actually goes and adds the route inside a collection
In the same way there is one more function here which is very important called as ignored route
Sometime you know we do not want people to and access XML files Config files AXD files right
So we don't want people to say okay http local or /you know web config can download it right
So what you can do is you can see here okay
ignore this route and you can see here there is one ignore route which is return
It says that any kind of resource you know whatever is a resource name
if anybody types .axd do not allow him to invoke
do not allow him to go and invoke that resource or do not allow him to send that request to that resource
So that you can see here I can go and add one more route here saying ignore route anything with the name config
So in this way in case if he ever goes actually config files cannot be downloaded you know
so that is one part
But In case even if he tries saying ok http local host/web.config it will not work
So again this method is very important
In case you want to go and ignore some of the files or some of the routes you know where you say that people cannot type this route then you can use this as well
So map route to add a route and ignore route to ignore any kind of routes which we do not want end users to invoke
Now as a best practice I have seen that a lot of people what they do is
rather than writing this mapping inside the code here
They actually go and create a table
in our table with must be a simple 2 or 3 fields you know which has the key name
which has the url structure and also it has which control and action to map
And what they do is you know they go and use ADO.NET or Entity framework they go and loop all the records of the table
and add it into this collection routes collection by using map route
So I have seen that lot of people you know where they have lot of URLs
and they want to map those URL to control as an actions
They go and create a simple tables so that they can configure that table later on rather than going and configuring
inside the code here itself
And one of the questions you know which keeps coming now and then when I take MVC classes
that how we can set the start page in MVC
means I am sure that people work with own web forms you know you have a habit of right clicking on a page name
like let's say home.aspx or index.aspx so you can right click and set it as a start page
but remember that the first thing is in MVC there is no start page why
because the hit never comes to the page never comes to the view right
so that's the first part
and the second part is
if want to go and set any kind of a start page
you have to actually set the start controller in that action
that's what you have to set right
So in case you want to do that what you can do is you can see here you know already I have answered it
in this
in this routing section
So here you can see I have created a URL with nothing
and I maping it with home and go to home
So what happens is you know by default whatever view this go to home invokes becomes my default view
In other words if you see here when I do a Ctrl F5
that is without any URL
structure here just the site name
it goes and it invokes this home/gotohome and that invokes our view go to home.aspx
So if you see here this has becomes the start page
So in case you want to set the start page what you have to do is you have to go and make your URL structure empty
and then map the appropriate controller name and action name which will invoke the
your home view your index view whatever it is
Now one very important point regarding routing
When I started this routing lab 2 right
I said that routing helps you to simplify URL and with that you know end users will benefit
actually that's a very half truth or I'll say it is not even a truth actually
why? because end users will not type www.questpond.com/home or www.questpond.com/home/aboutus right
End users will come come to questpond.com and from there they will click on hyperlinks
and they will go wherever they want to go
So end users really don't type URLs on the site name right
but you know by simplifying URLs
the biggest benefit you get is
Search Engine Optimization i.e. SEO
For instance you know let say you have a simple page which
which has computer inside it
okay you have written something about computers
So if your URL has a word computer inside it then the search engine will try to give more rank into it
why? because the URLs the meta data and also your page content is matching
So in the same way let say you have computers and on that you want to also say /laptop right
So you can again go and create one more
URL structure of saying okay
/laptop will go to the same page /computer will go to the same page
So basically
you know when the search engine looks at your
URL and when it's looks at your content
if they are matching then relevance become higher for your page
So the biggest benefit of
of routing is basically it helps you to
achieve greater search engine optimization
So I hope that you know you have enjoyed this video
In this video we are trying to understand routing
So great you know we have completed approximately 30 minutes of the tutorial
and you can see like in this 10 minutes I have just explained you routing
So how easy MVC is right
So we are going to move faster
we are going to move quicker but stay with me don't loose hope you have to keep continuing seeing this video
And ensure that you complete your 16 hours of training
So we are done with 30 minutes till now and pending is 15 hours and 30 minutes
keep moving keep rocking let's learn MVC in 2 days i.e 16 hours thank you so much