ASP.NET MVC Fundamentals - Part 02 - HTTP POST (full page postback using dropdownlist)

in this video we are going to take a look at HTTP POST or say full page post back so in this video we're going to concentrate only on full page goes back using asp.net MVC 5 so just for the sake of this demonstration we are going to use drop-down list in order to do a full page post back we are also going to see and how to retrieve all the posted values also browser posted values to the server using asp.net MVC in various ways so let us start directly by creating a project so I go to visual C sharp and then there I just wanted to sell the web and make sure that asp.net MVC application I mean web application is selected you can forward whatever the application name you would like to provide so in this case say I would like to go with sample click OK and I would like to select an empty template however I would like to ensure that MVC based empty template needs to be made available for my application so make sure that you select empty template however ensure that you have all the references with respect to a me see our are in place okay so now we have a sample solution I mean sample project and we have all the folders necessary those are the controller's morals and views so if you are not familiar at the views models or controllers please refer to my previous video on introduction to MVC so for now we are going to concentrate on full page post back so in order to do that let us start with a V model so in this case yes I would like to have it drop down list to be made available so I would like to have the drop down list to be filled with a list of countries so for that purpose I would like to use a view model where that the job of the view model is going to be producing or say pulling up all the countries which are necessary for the drop-down list to be shown so for that purpose I'm just going to create a new view model so in this case I would like to call this on a sample 0-1 view model you can just put whatever the class name you would like to house in this case I would like to start with sample 0-1 and click Add and now you can see I have a view model class generated and now all I would like to have is public list of country so I would like to have a list of countries to be made available using this property so let me you only get for now so which means it is just added on the property where the job of get is going to be to actually fulfill all the countries necessary to be retrieved so country is supposed to be a class I did not create any class called country so I would like to create that right now so go to models had another class called country and in this case the country in is going to have two properties to maintain the country information one is going to be the ID so country ID you can say the other is going to be name secondary name or whatever so in this case I would like to have both of those two so now I have country and name so choose ID and name to be made available as part of country and that particular country is going to be what I am using here and this get essentially is going to create a new list of countries so I would like to have new list of contrary to be created and to be returned back so this is what I would like to hell but here you can see it is just returning empty list of countries I need at least a couple of countries to be shown in the drop-down list so just for demonstration purpose I would like to hard-code a few countries so in this case I would like to create a country called in India so where the ID is going to be I am in this case however name of the country is going to be India so I created only one country so let me create a couple more so I'm going to have one more and one more so I am going to have three countries altogether and the second country is going to be something like this the USA United States of America and the third one is going to be Canada saying so I would like to say the IDS CA and in this case and the caption or name is going to be Canada so now that I have the v-model so viewmodel in this case right now I have only one property called countries essentially this property is going to list out all the list of countries available so the list is going to be hard-coded as of now where each of the country will have ID and name properties okay so now that we have the model ready let us switch back to controller so I don't have a controller so let me create a new controller from the scratch I click Add and then go to controller and now I'm going to have an empty controller in this case and I just wanted to call this controller a sample zero one so right now this is the index and that is the get operation by default you can see he doesn't have HTTP POST attribute so if you have HTTP POST attribute it works as a post operation or post action in this case it is just a get operation so all I'm going to have is index and now what I'm saying is I would like to have a new sample 0-1 view model needs to be instantiated and finally this and at that one to the viewer so which means I'm going to have an instance of sample 0-1 view model for which I need to import the necessary namespace so I'm creating an instance of the view model so that view model internally will have the list of countries to be proud just by using the property countries right so that the same model I'm going to send to the viewer so you should be responsible to pull that information from the view model so I don't have a view at this moment you can see I don't have a view inside sample 0-1 so let me create a new view so the easiest way just right-click and say add view so I can say index for now it is asking me if I would like to have any layout page to be created for now I don't want any layout and just click Add for now okay so you can see this is a full page and this particular index page I would like to make sure that it is using sample of your model why I am using this the reason behind it is you can see this view has to work with whatever the model we are sending here so we are sending M which is of type sample 0 1 view model so in order to make sure that this view works based on this model you need to mention this particular model specification directly at the top so this is essential so now that we have it so which means I'm saying that this view index can receive an object of type this particular sample be a model and that particular object is always accessible by just writing at the right model you can see M is capital so here M is capital and here M is small so whenever I say at the rate model M is capital which means you are literally accessing the object which has been sent to the view so which means whatever you are sending M here is automatically going to be made available in model object so this is a default object which is already available as part of your view and the data type of this one is going to be exactly the same data type whatever you have specified here so if you specify different data type here you are going to have this model to be working in a different fashion however in this case as you are sending the model of type sample 0 1 via model it has to be in sync in sync with whatever you are using here so this view works this model works with this model similarly in order to work with this view the controller has to send the same model object and the same model object we are going to send here is accessible using at the rate model and now if I said dot you can see I have the country's property automatically imagine I did not use this and I am directly using at the rate model and you can see it doesn't know what it is doing so it could not give us any information however the moment you say but the moment you specify the view model type on which this view is depending upon the moment you say model dot you can see the countries has already made available for you so that is the significance of actually having the model specification as part of your particular view ok so in order to have our particular drop-down list so I have a helper which is made available as part of asp.net MVC so I can say HTML top down list and I can provide the name of the drop-down list in this case that could be confuse and I can say like it can work with model dot countries let us see if this is going to work in our case however you can see it is already giving some kind of problem for us so what is that let us see all those particular overloaded methods we have so we have string with option label which is fine and now this is important this is name it is fine I give the DDL countries as the name which should be fine in our case however there are there are other things which are necessary so in this case it is expecting an enumerable ienumerable of type select list item but we are not sending select list item types here but our countries is a list of countries it is not select list item but our particular view is actually expecting that one to be of type select list item so in order to have these particular countries to be translated to ienumerable of select list item I would like to have a new method to be added to my particular view model and the job of that particular new method is going to be convert this list of countries to select list items it is going to be just a helper method in this case so I'm going to add a new method which essentially gives ienumerable of select list item type so this is exactly what that particular drop-down list is expecting and I can say get countries list items so in this case so that is just a helper method okay so where is the Select list item if you open this you can see that what the Select list item class is available as part of system that web data may say I need to import that so the moment I import it you can see I hate that particular class is made available and now this method is supposed to translate all this list of countries to ienumerable of select list item so in order to do that I am going to use a link expression where it is going to retrieve all the current countries what I have in there dot select and now for each of the countries available inside that countries list and saying that please create a new select list item and that particular select list item should have the respective properties select list item has very importantly two properties one is text the other is value so I can say text is going to be what the user is going to see in this case the country name is what the user is going to see and the value is what will be posted to the server once the user has selected a country so in this case I would like to get country ID so which means I'm going to say like whenever a particular drop-down list item has been selected this value is going to be posted to the server so which means I'm saying that if the user selects United States of America USA will be sent to the user sorry sent to the server so the server needs ID that is the selected country but the user needs to see the caption so in order to have both of these two together as part of the drop-down list I'm saying that text which is what the user is going to see needs to be set to the caption or the name what the user is going to see the value is the one which is going to be posted to the server or sent to the server and now that I have everything in place all I am going to say is use this particular get country list items directly if I go back here and I'm going to say just use this so let us see if this is going to work in our case so I go to VM browser okay did not break this one yet so let me stop this and build it for a second okay so let me switch sure and make sure that the build is successful and now I can save you in browser and now you can see I have India United States of America and Canada and these three whatever you are going to see are nothing but the captions are the names of the countries but not the Hyades but the moment you open a view page source let us consider okay you can see like you are seeing all the captions right here however the value is based on whatever the idea of putting so whenever you post this information to the server you are not posting the caption but instead you are going to post the value if you would like to have the ID to be shown here instead of caption you will have to modify your particular get country list items in such a way so the text I don't want caption but I want ID so that is possible too so now I can say again it build it and let me view it again and now you can see I have IDs here so again if you go to the view page source you can see I am going to hell ID here and also the user is going to be saying ID you can also have both if you would like to contribute or concatenate together in this case so I can say something like this so I would like to have ID together with the caption both of this tool so which means the user has has to see both so just for my convenience I would like to switch from Firefox to Google Chrome so let me in view in browser now now it is going to open Google Chrome and now you can see I have the ID along with the caption so the user is going to see the ID and also the caption together the moment you say page view per source here now you can see this is the caption what the user is going to see however the values are going to be just the same as we mentioned okay now that we got the drop-down list - what we really need there is some more things what we can do for example if I switch to this one let me go back to the browser for a second imagine I don't want India to be selected by default I would like to have select a country to be the first element so the easiest way to do that is it has a power loaded method where I can specify any kind of caption label so in this case I can say selected country so that is possible - so let us see if this is going to work and there we go so now the first thing is select a country so I've been a drop-down layer I can select whatever the value I have in here okay so now that the drop-down list is actually displaying what it is supposed to now the goal of this particular video is whenever I select something here the value needs to be posted back to the server and that value needs to be retrieved by the server whatever the value we posted and in return I would like to have the same webpage to be refreshed with a label here where that label essentially is supposed to show the value whatever we have selected so let us see on how we can accomplish that so in order to post something first of all we should have a form form in the sense a form tag so let us switch back to our view source for a second we don't have a form tag here if you can see there is no form tag so whenever you would like to post something that particular ID I mean that particular element needs to be made available as part of form so in order to have a form the easiest way is to use the helper so I can say using HTML dot begin form and this particular begin form is can have three parameters in this case so let us work with three parameters for now it has got too many overloaded methods but for now let us go with the easiest way so it has this particular form for now so let me push my stuff here so which means what I'm saying is whenever I select drop-down list and if I post it it has to post to that particular form that is what I am saying and now this particular form I need to specify all the necessary features are the supporting attributes for the respective form so in this case what I'm saying is whenever I post anything it has to go to index action of this control of which is sample zero one and the method is going to be for method that dot post so this is essential so what I'm saying is if I post something as part of drop-down or any other element available in between this scope that particular submit or that particular request to the server will be going in the form of post so it is going to be HTTP POST so whenever it is posting it is going to find a particular action with this name which supports post so right now if you open the controller sample 0 1 this is with get I don't have another action of the same name which supports post so I need to have an action index which supports post in this case it could be index or anything else but that particular action should support post so that is important so I am saying that this whenever we post anything through drop-down list has to go to this action which is marked with this post and that particular action needs to be available as part of this controller so in this case we are using the same controller and now I need to have a new action to be defined which can support post operation so I can say public action result and I can say index which is also and now I would like to say something like you know string dam here whatever so you might be wondering why I would need that I will be explaining that in a second so for now let us consider I would like to specify something like this HTTP POST so let me return the view so that - I am going to create okay let me return whatever I have in here okay so what I am saying is there is a particular action called index which is marked with HTTP POST which means if it is a get request it has to go to this action if it is a post request it has to go to this particular action so as long as that particular action name matches with the respective HTTP action if no action is specified like a specified HTTP POST here if we don't specify anything here it is by default it is get so if the action is called index but if you did not specify any HTTP verb this is the get action and this is the post action with the same action name so I can have the same action to be presented with both get and also the post so I'm having this particular action which is supported in post and at the same time right now if you remove this let us consider I know this okay so in this case it might work but let let me build this for a second and see if that is going to work with no problems and now you can see it says controller already defines a member called index at the same parameter nerve so you can see it doesn't accept it right because according to the object-oriented terms you cannot have two methods with the same name and at the same time with same parameter so in this case I don't have any parameters here I also don't have any parameters here that is not going to be acceptable so this is still going with respect to object-oriented terms so we need to have something there so in this case yes this is a demonstration I would like to make some difference in the signature so which means now this is a method index Evolver loaded method index according to object-oriented terms so according to object orientation what I am saying here is we have two methods one method with no parameters and another method with simple parameters so we are just for loading it and now if I build it it should successfully compiled but that is only from the object orientation semantics but from the HTTP point of view this action will be automatically taken into the consideration if the request is of type post if that particular request is of type gas.get and the action is indexed this is going to be picked up okay so let us see one by one now I switch back to index again for a second and now I need to have this particular drop down to be acting as a post so right now if I execute this okay so I have the drive down but if I select something it is not really posting back to the server I need this particular drop-down list to be automatically posting the selected value to the server that is what is my goal so in order to accomplish that I need to have the drop-down list to be doing its own self post for that purpose I can add a particular unchanged attribute HTML attribute which is nothing but on change attribute for the HTML select where I can provide my own JavaScript so in this case I am saying that on change equal to this dot form got submit so this is simple JavaScript which is inline JavaScript which is going to be added as part of all change attribute for the respective select tag what this particular drop-down list is going to emit so let us see how this is going to work let me put a breakpoint here so that we will know what is going and which action is being invoked at runtime so let me execute this and now you can see I am actually going to the controller sample 0 1 and index so it is a get operation and now you can see for the first time it is hitting here as because I am not posting any data but for the first time I am landing on to the page which is a nothing but a get request so the moment I executed okay and now I got everything ready here so let me quickly see on what this select is so you can see I have the Select which is nothing but the drop-down list from the HTML point of view and you can also see on change so whatever I specified there in the markup has directly come in here so this is exactly what is specified on change with whatever the JavaScript you would like to queue and the moment ok let me go to the network here so right now I don't have any traffic here you can see there is no traffic available and the moment I select any particular item inside the drop down you can see it has automatically selected HTTP POST related action and it is waiting there okay for now I just continue without doing much and let us quickly observe the network on what it is doing let us go back now you can see I have the sample zero one so let us click on that and let us click on headers and you are going to see all I am trying to accomplish is I am requesting this URL and that a quest method is paused this is important this is very very important to understand I am requesting the post HTTP verb if you are not sure about get and post please refer my previous video so what I am doing is I am just specifying we need to post something and if you come down what are we posting you can see I'm posting something called DDL countries which is going to have a value for the USA so this is the key and this is the value and this is exactly what I am posting to the server and once it is posted the server is going to be responding back with this response and right now the whole response whatever you are seeing here is exactly what has been sent by the server and now you can see that whole part is made available here this is this response is reinterpreted by the browser and you see a fresh page here okay let me clear all the net of traffic let us start from the beginning again so I say sample 0 1 index you can see it is going to be a get request as because I am NOT submitting the form so press ENTER and now you can see it has selected the gate operation right because I did not submit a form I am just trying to retrieve a page so plus continue and now let us see what is going on I have an index here let us click on that go to the headers and now you can see the request method is of I get that is important so if we have get you can see I don't have any of the form submission related key value pairs here so this at the developer tools you can always get these developers tools by pressing f12 that is important okay anyway now whenever I select something now you can see it has posted so let me continue and now you can say this is the one which is doing the post operation and during the post operation it is sending form data and the key values so now that we are actually posting something to the server we need to retrieve that information at the server level so how do I do that now we are pretty sure that this is going to be the action which is going to hit the moment the first operation is selected so change once we post this this is the action which is going to be executed so as part of this one to make our things simple I would like to use view data so as part of this I would like to say selected country equal to I can say something like get the value directly from request parameters in this case so I can say a request of the real countries so what I'm specifying a is whenever I post something to this index I am trying to retrieve the form data whatever I have as part of the request the post request what we have seen earlier in the developer tools the form data the key value pairs so I am retrieving the value of a particular key DDL countries and putting into the view data so this is my own key the reason behind using view data is the same view data can be used in our view directly so which means whatever you place in this view data can be directly accessed in our view by just doing something like this so I can put a span like this you can put whatever you need so in this I would like to go with the spam and now I can say at the rate view data selector country that's it so which means what I'm trying to do here is from the action I would like to send some information to the viewer and the simplest way to achieve that is using the view data you can put whatever the rubbish you wanted to use inside the view by using view data all you need to do is get that particular value you would like to have to be passed to the view push that value into the view data using a key using the same key go back to your view and return that value out so let us see if this is working fine so just for Sapphire so let me open the developer tools so now I submit something and now you can see I got USA so if you go back to my request here you can see this is the farm data I'm sending TTL countries so the value USA is being retrieved using this key and where I am using this key and directly using that key as part of this one so requests of that particular key gives the value whatever you have posted or the user has posted from the respective browser then that value I am pushing into the view data so that I can use the data in view later on so once I go to the view which is nothing but this I am saying that please get that particular data out so let us see again so let me clear the traffic whatever I have so let me do this and now let us quickly go to our inspect element and now you can see I have span which is empty why because I don't have anything in View data our get request here this is the get request it did not specify anything inside the view data if you would like to have you can also specify something like the something like I can say no country selected at the moment so you can specify whatever the message you would like to do dynamically even this should work so in this case during the get request I would like to specify this particular message to be made available through the view data and the same key with the same view data is being used to here and the moment I execute this you can see I already have that particular message so if you go to inspect elements you can see this pan is having that particular value so if I do a pose to say Canada in this case now you can see and doing a particular request and that request is of type post and we are actually sending the form data which is DDL countries and I'm sending Canada here and in return this particular response if you can see the response from the server is actually sending the whole page from the HTML till to the bottom most HTML tag which is the closed diagram and as part of this you can see I have form which is a new form with all the options and the span with Canada this is important so the response from the server include the span with Canada however if I clear everything and just refresh this and if you see this this is the request which is of type get and if you see the response from the server you can see how the span is going to look like but the moment you select something like the USA you can see I have a new request and if you see the headers it is after I post I posted something using detail countries and in the response you can also see the span whatever I'm getting here so this seems reasonable as of now but there is one particular problem in my application that is I'm not having the country selected to be persisted across post backs so which means if I so imagine this is the first thing if I select Canada let us consider okay so it shows that I have selected Canada but that particular selection is currently not being persisted after the post back so I need to have that particular value to be automatically made elected after post so right now it is not maintaining it right because this whole page gets refreshed so which means new drop-down list will be created with all the new elements and the whole response if you see this the whole response is actually new response from the server this entire select along with the form everything is recreated from the server that is the reason I don't have whatever the value I have selected earlier to be made available so we need to ensure that that particular value whatever I have sent or posted to the server is persisted in the same fashion once it has been retrieved back in order to do that I am going to do a couple of modifications to my particular view model so view model essentially means it maintains the view on how all the values and how the data needs to be represented as part of the view so in this case I would like to say something like public string selected country so I would like to say something like this I'm just adding a particular string nothing were selected country this is this the property which contains whatever the value the user has selected during the post so if the user selects USA that needs to be made available as part of selected country and while getting the list of countries to be retrieved and assigned to it drop-down there is a particular property what we can make use of that is selected so I can have this particular property to be set to true if that particular country needs to be selected so imagine this text shows USA and if I want that item to be selected I can just say true which means that is the default selected value so if this particular selector is always true for everything then the latest value only will be the selected so I cannot have this selected for everything so I need to have this selected value only for value for which the selector country has been fostered by the user so for that purpose I can say like if the current ID is equal to selector control then only it has to be selector so which means I can say something like this so if this condition is returning true that true will be assigned to selector if this condition returns false this particular selected will be false so right now imagine this is the first time I landed onto the page it will be trying to retrieve all those particular countries and it is going to check every particular country ID with the selected country by default if nothing is selected and if it is for the first time the selected country is going to be empty so which means it checks every country ID whether it is equal to Mt so it is never equal so the selector will always be false but imagine I have already selected a country and this value is made available with the country ID whatever I have selected then you are whenever the countries is going to be populated is it is going to check whether the current country ID is equal to the selected country ID during forced infinity so that value will be selected otherwise it will not be but we made everything available we did not place or we did not assign the value for the selected country so why do I assign that the good place will be this so now I can say m dot selected country equal to I can just say a request of radial countries in this case so what I am saying is whatever the value will get from the DDL countries which is nothing but the selected value that will be assigned to selected country and once that is in the model whenever the view is going to be refreshed which is going to execute our model here and whenever it tries to bind our drop-down for this it is already having a value to selected country and while getting each and every country populated to the drop-down it is going to test this condition for the respective country currently it is but getting bound and if that country it matches our selected country it is automatically selected if not it is not going to be so let me build this solution and I just executed okay so let me throw it sample zero and index okay so right now you can see nothing is selected but the moment I select the USA you can see it has not only listed USA but it has also made that particular value selected so if I see the network traffic so let me select Canada now and see how it is refreshing so I selected Canada so this is the post request right this is the post request and now during the post you can see I'm actually sending Canada and let us observe the response so inside the response you can see I still have the form but you can see hold on this is a different post I think I'm missing something let us go to USA for a second so I'm selecting USA now and now a selected USA which is fine so let us observe the response so as part of the response now you can see it has selected USA so this is important selected equal to selected if this is missing you will not be able to have that one to be selected at all so this is important and also you can see the span is USA and now you can see after the posting back to Canada you can see that Canada has been selected similarly if I select India let me click here and that is observe that as far as you can see India has been selected so this selected option will be made available if and only if you maintain the selected criteria right there so this is one way of actually having the posted input directly to the controller but you can see I can further optimize this by saying something like I don't really need to use view data as because now I have the selected country right inside the model so I don't need to use this anymore so I can just remove the s altogether and I can also say I don't need this anymore however I can directly use selected country inside my span so I don't need to use the view data anymore and I can say from the model please get the selected country and this is further refactored in such a way by excluding my view date available whatever I did earlier so now I select USA and now you can see it still works on whatever the way I realist it to do so but if I select select a country no value has been selected and does the selected country is empty and it does not really show anybody

Channel: Tech CBT

Views: 14,058

Keywords: Tutorial, Training, CBT, ASP.NET MVC Framework (Software), Model–view–controller, Postback, POST, ASP.NET (Programming Language)

Id: spUuW5FNWcg

Length: 45min 45sec (2745 seconds)

Published: Tue Jul 14 2015