Bind Checkbox ASP.NET Core MVC - Create Single and Multiple Checkbox Dynamically ASP.NET Core MVC

hi there in this video we will see how we can bind a value to a check box and also get the value of the check box on form submission and we will also play around with single and multiple check boxes if you like this video please hit the like button and subscribe to the channel to see more content like this one in future let's start with the simple scenario first i want to display a checkbox on the page in an asp.net mvc website i am on the home controller and the action method is index and the view for the index method is empty so first of all we will create a view model for this action method so i will come to models right click add a new class and i will call it home view model in this view model i can have a simple boolean property called let's say is active so i will create a property which is of type boolean and i can call this is active and let's say we are checking if our blog is active or inactive using a checkbox so i can call this active or i can call it is blog active now what i can do here is using this property i can now come back to the home controller uh create the our new up the home view model so let's say where model is equal to new home view model [Music] i can get the missing references from the models folder and then in here the is blog active property can be set to true or false so let's say i have it to false first and i can pass this model back to the view now in the view i can use this property to show and display the checkbox so because i have bootstrap installed in the website by default so i will just paste the code for the checkbox from bootstrap so you can go to the bootstrap website and get this code it's a simple class called form check which has an input element and a label now the label for our check box can be let's say is blog active so you can see we are hard coding it and the the way to bind a check box from the controller into the view is by using the asp4 property so i will get a get rid of the id and value first and i will say asp hyphen 4 and to use that we have to use the model inside the view so let's use the model so let's say at model and reference the home view model over here so i will give the application name so asp net mvc check box demo dot models dot home view model and now using the asp hyphen 4 property i can mention the is blog active attribute and also for the label i can say this is also for the input element so asp hyphen 4 is blog active and using these two things i can now run my application and see if the checkbox is getting binded on the view or not so you can see the application is running and i have the bootstrap checkbox and if i click on it you can see now i can actively check check it and check it out as well and i can also do that using the label because we have the asp4 attribute defined as the is block active field and what that does is it also basically when you click on the label it will click or check or uncheck this element over here so we have that defined but the is blog active name is hard coded what if we don't want to hard code it let's come back and create another property over here and let's say this is a property of type string and the name of this property will be let's say is blog active check box description or you can say checkbox description or something like that something smaller than that as well but what we can do now is in the home controller we can also define the text for that label so let's say this is is log active so that you don't have to hard code it in the ui um and this will be handy when you have multiple uh check boxes coming in dynamically so you can now instead of using the hard coded value you can say model dot is blog active checkbox description and i will save this and hot reload my application [Music] so if i come back and refresh this page now you can see by default it's false and you can still you know work on it and you can change the description and it will get changed on the view automatically now it's time to submit this form and see if you are able to get the value of the of the checkbox back inside the controller post method so i'll stop the application for that and i will wrap this inside a form so i'll create a new form i will remove the action method and will say asp hyphen controller which is the home controller and asp hyphen action is the index action and the method is post so i will take the form end element and i will paste it after the div tag over here we'll also give it a class of margin bottom hyphen 3 and to submit the form i will have a button so div with a class of margin bottom hyphen 3 and then a button which is of type submit and class of btn btn hyphen primary these are all bootstrap classes the text of this button would say submit now we want to create a post method so i will come to the controller and say public i action result index i will annotate this with the http post attribute and as the parameter we will receive the home view model and i will call this model so we can read the value of the check box the selected value of the check box so we can say where is blog active value is equal to model dot is blog active and i will just return this back to the index page so redirect to action index uh and i'll put a breakpoint over here so that we can read the value of this uh checkbox so i will start the application again the application is running and the current value is false let's just make it true and submit the form we have the breakpoint over here so i'll hover over this and it's coming out as true so i'll let it continue and this time after changing the value a few times i'm making it false again so i'll submit the value and this time it's coming as false so the correct selected value of the check box is coming to us in the http post method now this was an easy task because we had the check box as a you know a defined check box and we weren't creating it dynamically but what if we want to create the check box dynamically or maybe multiple check boxes and get the value the selected value of those check boxes back inside the post method how would we do that let's see for this example i have cleared out the home view model and there's nothing there's no property inside the home view model i've also cleared out the index.cs html page so there's just a form and a button to submit this form so there's no checkbox at the moment and in the controller there's just empty and there's a post method but again there's nothing checking about it so now we will create a model which will try to represent one option so one check box so in the models folder i will create a new class and i will call this checkbox option and in this checkbox option we will have three properties so the first property would say is this checkbox selected or not so let's say this is of type boolean and we'll say is checked that's a more appropriate word i guess and after that we will add another property so this one would be the description of this checkbox so the text of this one so string description and the final one would be the value so again it can be a string or in an integer or a good based on you know what your requirement is so i can say this is a string and this will be the value so now we can use this check box option inside the home view model and we will create it as a list so can so that we can present multiple check boxes dynamically so you can say property list of check box option and we can call this check boxes now we will use this check boxes property inside the home view controller so i have initialized the model so inside here i can say check boxes is equal to a new list of check box option and inside that i can create multiple check box option based on whatever your requirement is so let's say the first check box is selected so let's say this is true the description of this one would say option one this is text so this will just represent the text of the check box you can have it whatever and finally we have the value so let's say this is the unique value of the checkbox so could be anything again so i've i'm keeping it as option 1 to be unique and i will copy this two more times [Music] so we will give this the second option option two and finally the third option option three and let's say the other two options are set to false so by default only the first option is selected and other ones are not checked so now that we have the check boxes defined it's now time to show them on the screen uh in the index.cs html like we'll have a loop so let's create a for each loop and we will loop through model dot check boxes because that's the list of check boxes the single item let's call it check box and inside here we will again use the bootstrap checkbox html so this is just a copied version of the html of a single checkbox now we will modify it as per our liking let's bring this to the second line so that it's more visible now the classes are fine because these are bootstrap classes the type is checkbox the value of this check box is whatever we have given inside the option so i will use the check box and say at check box dot value after that we will define a name as well and this is very important so the name property for all these check boxes would be the same because we want to capture the values of the selected check boxes on the onpost method so you can give a unique name to all these check boxes combined so i am giving it actually a unique name and you can give a name that you know satisfies the domain or the application that you're building but to be different from anything else that i'm using and to show you that this will be captured inside the on post method i'm using it a unique name after the value and name we will also change the id because the id is unique we should give a different id to each check box so i can give it check box underscore and give the value because that's unique check box dot value and finally if this checkbox is selected or checked by default or not so we have the checked attribute and that will be equal to add check box dot is checked property and we can also change the description because we have the description for this unique checkbox so we can say at check box dot description and this will be the for property and you have to use the id so i can directly copy this and paste it inside the for attribute so this label is for this id and hence the id should be unique per check box so now we are ready to display this check box i just have to add the dot in here uh and i'll run my application [Music] the application is running and by default option one is selected because that's the way we defined our model we can also select option two and also three and we can unselect any option as well now using the submit button we want to capture the selected values of these options so we will come back to our uh code and in the home view model we want to create another property which will be a list because it want to capture multiple check boxes and the list would be of type string because the value for the check box is of type string and we are capturing the value over here so list of type string now the name of this property is very important because the name of this property has to be the same name as you have given to the name attribute for all these check boxes so the name is unique name so i will put unique name as the property name and that's how it will bind together from the ui to the code behind so if you have given a different name over here it has to match the property name that we are giving to the home view model over here so i will hot reload my application and now refresh this again and select option one and option three as well and submit this form it's coming back to the http method the post method and if i see model and see what value it is coming so i'll expand on model and in the unique name attribute order property we are getting two counts which is option one and option three so this is how we can see which values were selected for the list of check boxes that we have on the screen and this is how you can see which one was selected and which one was not selected so i hope you have a good idea of how we can implement the multiple check boxes dynamically on our asp.net mvc website and also you know a very simple uh use case of a single checkbox as well and that was it for this video if you like the video please hit the like button and subscribe to the channel it really helps a lot and i'll see you all in the next one you take care and you know until next time

Channel: Sameer Saini

Views: 14,829

Keywords: checkbox in asp.net mvc, dynamic checkbox, checkbox asp.net core mvc, checkbox, multiple checkbox, asp.net core mvc, asp.net core mvc checkbox, asp.net core mvc checkbox model binding, asp.net core mvc checkbox list, asp.net core mvc checkbox checked

Id: KZcdlcF5mYA

Length: 16min 12sec (972 seconds)

Published: Sat Sep 17 2022