Select List or Dropdown List In ASP.NET Core MVC (.NET 6)

hi there in this video we will see how we can bind data to a select list or a drop down list in asp.net core and we are using.net 6 which is the latest at the time of this recording then we will also submit this form to get the value of the selected item in the drop down list if you like this video please hit the like button and subscribe to the channel to see more content like this one in future I have an asp.net 6 MVC website in which I want to display a select list and also capture the values of the selected items back into the code where the form is submitted for this example I will populate in the drop down with the list of countries for that I have created a domain model called country and it has two properties one is the ID that's of type string and the other one is the name also of type string I've also got some data from the internet so I have this helper class called countries.cs and it's a static class and it has a method called get all which gives me all the countries and their codes related to the each country so I will use the static method to get my data but in case of real application you should be relying on your database to be passing these values back to you now let's use this data to get the countries into the home controller so we will populate the drop down list inside the home page in the index page so let's first use the static class over here to get countries so I will write where countries data is equal to and that's a static class so I can say countries and I will say dot get all is the method and this is getting me all the countries and as a static list but in your case this would be uh changed with the you know call from a database or something after we get the countries we want to use a view model so that we can give the list of these countries to the to the home view so I will create a view model and I have a folder structure for that inside models so I can say add a new class and I will give it a name of Home view model apart from all the other properties that you might have in your code I would give a two properties one would be a display only so I will say this is a comment display property and this will be a list which will carry all the data to the view so I will have a list and the type of list here would be a select list item press Ctrl dot to import the missing references and the select list item from object is coming from microsoft.asp.net core dot mvc.rendering so I will import that using statement and I will give it a name so let's say this is countries select list so this will carry all the data with the code and the name and we would need another property which will get populated when the country is selected so that's a property and we want the code to be selected not the name so that's of type string and the name of the property will be selected country with that in place we can now use this view model inside the index get method so I will initialize this view model so where model is equal to new home view model and I will import the missing references and this is coming from The View models folder now I can also say model dot country select list and I will just new it up so new list of selected list item and I can copy this and put it up so I can say using the same package that we have which is giving us the selected the select list item over here and I will uh remove that dot from there so now we want to for each on you know Loop the data coming inside the country's data which can be your database or in my case it's a static list so I will loop on this list so for each and the collection is country's data and individual item can be country now I want to populate this model uh country select list so I can say countries like list dot add and I can say new select list item and it has two properties that we want to give it to it so the text property is the name which gets displayed on the drop down list so we have that from country dot name and the other property is the value which is the unique identifier for that drop down item and that's coming from country dot ID so using this value we are able to populate that drop down list now it's time to pass this model into the view and also work on The View so that we can see that drop down list so let's go to that view so I will right click go to view and we have this empty view over here for the home page so here I will use some bootstrap classes and HTML elements so I will first create a div with the class of margin bottom of three that's just a margin I will give it a label and the label will have a bootstrap class of form hyphen label just to make it pretty the label will say select country and after the label we will have a select list so a select and list HTML I can get rid of the option for now this will have a class A bootstrap class of form hyphen select after that we want to give it some items so we will use ASP helper method so ASP hyphen items is equal to and now this wants to come from the model that we have the home view model but we have to first give the reference so we'll say add model and that's coming from the select list demo dot models folder dot viewmodels dot home viewmodel so that's our model and now we can say the items are coming from model Dot country countries select list so that's the select list the list that we have populated in the controller so that will populate our select list over here so it's now took time to test it so let's run our application the application is running and as you can see our drop down list now has the list of countries populated in it and these are just in order because the data that I have uh in the country's class is just ordered like that if this was the other way for example let's say some country like Australia on the top of the list it would show in that order so there's no sorting done by me so I'm just not reloading the application now and if I show you by refreshing the page Australia now comes on the top and Afghanistan on second so the Sorting is just defined as how it was initially if you want to sort your list you can do that in the controller itself once you are populating the view model and that way you can have a custom sorting of that select list so now we can see we have populated the select list but what about the selection and form submission so now let's work on that I'll come back to my code and in the index.html which is the home uh home view I will create a form element and I will bring the end tag of the form element so that I enclose this select list within that form now I will change this action to say this is ASP controller and that's the home controller and then the ASP action would be the index method and the method type would be post so we are yet to create that method but we will do that in just a moment along with the select list we would also need a button to submit this form so I will create a div with the class of margin bottom three and then inside this div I will create a button and the type of this button is submit so type is equal to submit and class is BTN BTN hyphen primary just some bootstrap classes now the value of this button would say submit that's the text on that button so now we have to create this action method index on the home controller so let's come back to the home controller and stop the application I would create another action method so public I action result index because that's the name we gave to the form but this time this will be an HTTP post method and the attribute coming inside this post model would be the model itself so the home view model so I will have that as an argument to this method and I can just call it model so now we are just Keen to know if the model Dot selected country is populated with the code of the country that we selected in the UI and we will just store it in a variable so let's say uh selected country and just return it back to the index page if we you know so redirect to action index so we are just Keen in this value over here so I'll put a breakpoint so that we can see what value is coming on the selection and once there is a value you can do anything with it as per your liking so with that I also have to give one additional Thing by which the select list would passes the value back inside the property select country so on the select list like we have ASP hyphen items we have to give the ASP for attribute as well so ASP hyphen 4 and this will be for the selected country so I can say selected country so whatever value of the option so is selected from this drop down list gets populated inside this model property selected country and with that we are now ready to test this so we have our application running and this time you can also see the submit button so let's say I select uh New Zealand and let's try to submit this form it comes to the index post method in the home controller and I have this selected country in the model which comes as NZ which is the country code for New Zealand as defined in our countries Dot a CS file in the static file so if I scroll down to New Zealand I can just search for it but here it is it's NZ so the code for the selected country is coming back in the post method so you know what the user selected and now you can perform perform different actions on the selected country [Music] along with this if if you want to add you know the uh another item in the top of this list saying please select a country you can also do that I'll just press continue from here and come back to the index.cs HTML inside this select list I can add and create an option so I'll create an option tag and the text of the app of this option would say please select a country maybe some hyphens like that or it's totally up to you how you define it and you can define a value as empty or some negative number or let's say no selected value something like that so you can check it later in the code behind if this was a unselected value or a default value and this will appear at the top of the selection so if I hot reload my application let's come back and refresh this so now please select a country option comes as at the top and we can see that you know now the user will be prompted to select a country you can have different kind of validations for this one but you know that's totally up to you but there is an option out there so that you can give a default option just before you populate the select list so I hope you liked this video and if you did please hit the like button and also subscribe to the channel so that you get more videos like this one I hope you have a nice day and I'll see you all in the next one

Channel: Sameer Saini

Views: 33,240

Keywords: select list, dropdown list in asp.net mvc, dropdownlist in mvc, dropdown asp.net mvc, select list asp.net core, selectlistitem example, mvc dropdownlist selected value, mvc dropdownlist from database, asp.net core

Id: A1yJVmtIDXA

Length: 14min 8sec (848 seconds)

Published: Thu Sep 15 2022