(#53) Dropdown in asp.net core | Create drop down using option tag | Asp.Net Core tutorial

hi there in this tutorial we are working on a book stored web application and we have created a form to add a new book into the database now today in this video we will learn how can we add a drop down into this form so that we can get the values from dropdown and we can save those values into the database there are couple of ways to add a dropdown in asp.net code we will try to cover all those concepts in couple of videos and at the first video we will learn how can we add a down by using some hard coded values let's start we will create a drop down using hard-coded values we will pass this data from view to the controller and finally we will save this data to the database default selected values select optional text html5 validation server side validation and several other concepts you will learn in this video but remember we will be using only hard-coded values in this video here we are back to our bookstore web application and to run this application i can simply press ctrl f5 to add a new book into the database we have to click on this add new book link and this is the form that we are using to add a new book into the database so we will work on this form and we will add a drop down to this form we have created this form inside this book controller we have an accent method with name add new book this is the get method and this is the post method if i talk about the views then let's right click on this action method and choose go to view here you can see that we have created this form onto this add new book cs html view so we will be working on this form let's have a look on this book model class inside this bookmodel class you can see that we have an property language it means we can add a language to the book suppose user is adding a book into the database and we can give user an option to choose what type of language is used into this book so we will be implementing this feature over here okay first we need to verify whether we are saving this value into the database or not let's focus on that so this is the post method and inside this post method we are using this add new book method let's right click on this method and choose go to go to definition okay so here you can see that we are not assigning the language property let's do that so we can use language model dot language we already have this language property into a database so there is no need to make any change in the database let's verify the details in the database as well here i am using this server explorer you can use sql server management studio as well let's focus on the tables so we have only one table and the name is books if i right click on this table and choose so table data right now there is no data into the database why because i have created a new instance of the database that is why the entire data is blank if you focus on the column that we have and column with name language and we will be using this column to add the book language now let's go back to the add new book view page over here this is the form and this is the first build suppose i want to add a new field over here so let's copy this code and let's paste it again over here so we will make some changes into this html code and we will make it compatible with the language first of all we need a label for language and then we do not need this input instead of this input we can use select because we have to work on the drop down so we will be using this select tag over here okay in this select tag let's add esp4 let's add a bootstrap class form control perfect and for the validation we can use this esp validation 4 and here as well we can write language let's build the solution again go back to the browser and just refresh this page this time you can see that we have and drop down over here language and here is the drop down right now we do not have any values in this drop down let's add the values we can add these values to this select by using some option suppose first language is hindi english dutch suppose i am using these three languages over here let's save all the changes go back to the browser and again refresh the page this time you can see that our down has some values first hindi english and dutch let's focus on the html as well right click on this drop down and choose inspect okay so here is the select drop down and here in the options we have three values and all three values are working fine let's run this application into the debug mode now click on the add new book and let's put a breakpoint onto the post method perfect go back to the view okay suppose i'm using english and i'm not adding any further details let's click on the add book button here we are in the controller and let's focus on the values so inside this language property we are getting english value and that is what we are looking for okay because we have not entered other details that is why we are getting these validations error but the main focus of this video is to work on the drop down now suppose i want to add an optional text to this dropdown that please choose your language over here let's learn how to do that inside this select tag we have to add one more option and in this option let's add the text we choose book language now to make it optional we have to use the value attribute over here and inside the value we do not have to pass anything let's save all the changes go back to the browser again and just refresh this page perfect so by default you can see that we are getting a message please choose a book language so suppose i am not choosing any book and simply i am clicking on this add book button now let's see what we got into the language property as expected we do not have anything it means if the optional text is there we will not get any value let's continue let's choose a language suppose i am using dutch and click on the add book this time you can see that we are getting languages over here using this approach you can add the optional text to your drop down okay now suppose i want to make this english language selected by default let's learn how to do that we simply have to use selected over here if you want to make this dutch selected then you can use this selected in this dutch based on your requirement you can use this selected in any one of the option let's save all the changes go back to the browser and just refresh this page this time you can notice that this english value is selected by default perfect now let's learn how can we make this selected value dynamic let's remove this selected from here and if you have noticed that we are using this esp4 binding for this language property it means if we will pass any value into this language property from the get method then by default we will see the selected value over here in this drop down let's see how to do that let's stop this application go to the controller and inside this controller go to the get method to add a new book we are using this book model class let's create a new instance of this book model perfect and let's add some values over here suppose for the language i want to add by default english and let's pass the smaller in this view method let's focus again what all changes we have made we have removed this selected from here and we are passing the value to this language from the get method of this add new book let's run this application click on the add new book this time you can notice that by default the selected language is english because we are passing this language from controller if you will update this value to some other language then by default the return language will be selected into the dropdown value now let's learn how can we add some html5 validations to this dropdown to add the html validations we simply have to use required over here let's use the required and make sure you are not using no validate into your form okay let us go back to the browser and just refresh this page let's use the default value and let's click on the add book this time you can notice that we are getting an html5 validation error perfect if you want to add some server side validations as well then you can go to the book model class and on this language property we can add the required validation okay so we have added the required validations if you want to add few more validations to it then you can add all of them over here let's go back to the view and let's remove this required perfect let's run this application again click on the add new book let's choose the default value and click on the add book button as expected we do not have anything into the language property let's click on the continue button and this time you can see that we are getting server validation error over here for this drop down if i choose a language and again click on the add book click on the continue you can notice that we are getting all other validations but not for the language now let's add a new book total pages click on the add book button click on the continue and you will see that we have added a new book into the database let's verify the details of the book go to the view and choose this server explorer right click on this books and choose so table data and here you can see that we have added the details of the first book and here is the language the language is hindi in this video we were using only the text property in next video we will learn how can we add text and value both properties to our drop down don't forget to like this video and subscribe to the channel thank you for watching have a great day

Channel: WebGentle

Views: 13,523

Keywords: asp.net core, asp.net core tutorial, asp.net core 3.0, asp.net core 3.0 tutorial, asp.net core mvc 3.1, asp.net core mvc 3.1 tutorial, asp net mvc, asp net mvc tutorial, dotnet core, dotnet core mvc, asp.net mvc core 3, asp.net mvc core tutorial, asp.net mvc core course, dot net core tutorial, dot net core mvc tutorial, asp.net core 3.1, .net core, Dropdown in asp.net core

Id: l6JhPyUZhHk

Length: 11min 21sec (681 seconds)

Published: Tue May 19 2020