Passing data from Controller to View in Asp.net Core MVC 6.0 | ViewData | ViewBag | ViewModel

in our asp.net core mvc series we had a discussion on what is mvc architecture and we had separate sessions on model view and controller let's continue to work on the same application if you want to go through previous sessions then you can visit the playlist asp.net core mvc you will find all the videos over there if you remember in our last session we had created this tutorial model then we had displayed that data on the tutorials view and this is how our application looks i'll click on tutorial see this is how we had displayed the data in our last session i had promised you two things one is to show you how to pass data from controller to the view in different ways the second thing is to show you how to create the data in a proper way or how to deal with the data in a proper way in today's session i'll take up the first point and show you how to pass the data from controller to the view in multiple ways in next session i'll address this one to pass the data from controller to view you have two different approaches one is passing the data as weekly type data other one is passing it as strongly typed data if we prefer to go for weekly type data then we have again two different options one is using view data and other option is using viewpack if we prefer to go for strongly typed data then we have the option to send it as viewmodel what we have used in our last session is view data let's start with view data few important things to know about view data are you can use view data like a dictionary and it's of the type view data dictionary very important thing is here we use the string keys to store and retrieve data as we have already discussed data is stored as weekly typed objects if you look at the code here we are creating a list of tutorial objects next we are storing this data inside view data using the key tutorials our job at the controller is done next we have to access this data from our view we are at the index view of tutorial module if you look at the first statement we are declaring a variable and accessing data from view data using tutorials key and storing it here do you know what are we doing here here we are specifying the type of the data that we have stored inside the view data dictionary but why are we doing this what we did is called as typecasting when using view data we should remember one thing that is if you are storing string data then there is no need for this type casting while accessing this data but if you are storing some other type of data in our case we are storing a list of tutorial objects in such case while retrieving that data we need to do the type casting but why we have to do that the reason is as i already mentioned in the beginning view data is a collection of weekly typed objects from the beginning i am talking about weekly type data and strongly type data what is it let's understand that strongly type data means data will have explicitly defined type but weekly type data will not have explicitly defined type in case of strongly typed data type is resolved at compile time but in case of weekly type data type is resolved dynamically at runtime if you look at this view data you will understand this loosely typed concept see here view data does not know what type of data this is storing view data only knows that whenever somebody asks me to give a data with the key tutorials i should deliver it that's all it knows it does not know anything about the type of the data it is storing that's the reason here we are typecasting and if you are clear with what is weekly type data you will understand strongly type data when we discuss viewmodel now i'll store a string value and show you i'll say view data i'll use title as key and this is gonna be my message i'll save the changes again i'll come back to the index page here i'll use h1 tag and i'll say view data of title here i am using title key to access the data see we are not getting an error see here it is we have retrieved the string from view data without any casting now i'll show you different way to use view data for time being i'll comment it out i will declare a property inside controller class prop tab tab this is easy way to create a property here this is going to be of type string i'll use this title as the property name okay now now what i'll do i'll use view data property that's it this works the same way as we used view data now what will happen this title is going to be used as a key instead of assigning the value this way what i will do i'll simply assign this string to title here we don't have to do any cheat see everything is working as before the only changes we have declared this title property and decorated with view data attribute shall we move to next option that is view back first let's understand few facts about vue pack the first thing is as you already know it's a weekly typed collection of data then as per msdn the view back is a wrapper around view data that provides dynamic properties for the underlying view data collection we will come back to this point then another important thing is dynamic properties are used to store and retrieve data we will work with an example then you will understand all these points see in our example we have used view data what i will do i'll comment it out instead i'll say view bag dot tutorials now here what we have to understand is tutorials is the dynamic property simply right click let's go to the definition and see view pack see you can find view bag inside controller class because we are inheriting from the controller class we are able to access this view pack look at the type of viewpad view back is of dynamic type then what is this dynamic type in c sharp whenever we use dynamic type its type is checked at the runtime not at the compile time you can choose whatever name for your property but while accessing you should remember to access with the same name like earlier we had used view data i'll comment it out instead of view data this time i'll say view back [Music] view back dot tutorials the difference between view bag and view data is whenever we whenever you use view data you should do the type casting in case of view bag we don't have to do the type casting which we can simply access it with the property name see this is working without any issues view bag is a loosely typed collection of data because we are not specifying type here our second point says view back is a wrapper around view data let's understand that this means internally view data and viewpad refer to the same underlying view data collection i'll give you an example let's do one thing let's store few more information inside view data this time i'm using name as the key i'll say all about.net i'll take edge to tag and this time what i will do i'll show you the magic now i'll say view bag dot name don't get confused here i am storing this name inside view data here i am retrieving that name using view back see we are able to retrieve the text let's look at one more example see here we are storing this tutorials inside viewpack let's see if we will be able to access this using view data let's again come back to our view here earlier i had commented out and used view pack i'll command this one and i'll try to access this using view data as of now there are no errors i'll save the changes let's refresh it see we are not getting any error it is working as earlier this proves the fact that view back is a wrapper around view data thus both of them can be used interchangeably and internally they both refer to the same collection i hope you are clear with this thing please remember this is not the best practice it's always good to stick with one thing if you want to go with view bug then please store and retrieve using the viewpack if you want to go for view data use the same thing while storing and retrieving shall we move to the next one now let's see how to use strongly typed data view model is nothing complicated if you ask me what is view model then in simplest terms model that is used to pass the data from controller to view is called as viewmodel and as we already discussed this approach passes strongly type data to the view let's see how to use this in our example if we take the same example here we have tutorial model if i pass this tutorial model to the view then this will be our view model say i don't want to pass this model i want to create separate model that will have this model and as well as some other extra information that is needed by the view then that will be our view model we will see both the cases let's see how to pass this tutorial model to the view and make and consider this as a view add the tutorial controller we use this view method to pass the model to the view i don't want to confuse you i'll comment everything i'll create a new model i'll name it as new model here i have filled up with the data if we are passing model to the view in stop using this version of view method we should use overloaded version of view method which takes the model i'll say return see we are using view method to pass the model to the view controller class has got different overloads for view method in our previous case we were using this version of view method now now when we want to pass the model to the view we are using this overloaded version of view method here i'll clear everything now this becomes strongly type view to specify the model that is being used by this view we should use at model directive with this we should specify the model that we are going to use this is the model that will be used by this view now we know how to pass the model from controller to the view at the view side we have specified which model is going to be used by this view now the question is how to retrieve the data from the particular mod i don't want to loop through the list to access the model data we should say at model here we have intellisense support also i'll show you if i say at model then intellisense gives me intellisense gives me the suggestion to choose the properties let's move to the second case having separate view models for some reason you don't want to use this as a view model you want to have separate view model with this information as well as some extra information for example you want to have sub you want to have title in the view model then what we can do we can create separate view model folder we can name it as view models we can create a separate model by name tutorial view model [Music] add class now we can define the properties here here i am adding two properties one is of the type tutorial model and other one is of the type string i'll comment it out our view model is ready and we are returning that view model at the view side we have to update our model directive this is our model this is our view model we have specified it now we are getting error this is because now id is not inside this model id is inside model then tutorial then comes the id we have to we have to make little bit of the chain we can access our title also i'll say save the changes what we are displaying here is from our new view model with this we have covered all the different ways to pass data from controller to view now the question arrives when to when to go for weekly type data on and when to go for strongly typed data the choice is up to you the the best practices if you have a small amount of data then you can go for view data or view back if you want to send large amount of data then view model would be the best approach to choose with this we have come to end of today's session i hope you are clear with all the three concepts see you soon in the next video thank you

Channel: Just Pick and Learn

Views: 4,705

Keywords: just pick and learn, pick and learn, Asp.net Core MVC 6.0, ViewData, ViewBag, ViewModel, difference between Strongly typed View and Weakly typed View

Id: PbPfd8eD_QQ

Length: 14min 26sec (866 seconds)

Published: Sat Sep 17 2022