Dynamic Cascading Select List CRUD ASP .NET Core 6

welcome to my channel in this asp.net core tutorial we will see how to create Dynamic select list in this video we are creating two select list in the first select list the countries will be loaded and in the second select list the cities of the selected country will be loaded on the change event of the country select list let's see the demo of the application which we are going to create this is the application to maintain the customer database we will create the customer creation screen and customers listing screen in this application let us see this in action I'm going to click the customer menu followed by create new in the screen notice when you select the country India the cities of the India are loaded in the City Select list we will create our first customer as Arun Kumar is my friend and he lives in the Texas USA notice when I select the country USA the cities of the USA are loaded in the City Select list create an other customer his name is Santosh Matthew he lives in India Bangalore notice again when I select the country India the cities of the India are loaded let's enter his email ID and save this let us create this application from the scratch before I start I would appreciate if you would like and subscribe to this channel so that you will be notified for all of the new videos that I will be posting I am taking lot of efforts and spending lot of time to make all these videos in return I request you to subscribe to this channel so please subscribe and share this video thank you okay let's continue the video now start Visual Studio 2022 and click create a new project in here select asp.net core web application in the MVC pattern and click next give the application name as Dynamic select crud and save this application in the C drive slash Dynamic select crud folder then click next in here select.net 6.0 and leave the authentication type To None then click the create button and wait for the scale folding task to complete now the application is created let's build and run it let's click the home menu and privacy menu yes the application is working fine let's add the features first and foremost we will create the country model right-click the model folder and then add new item and name it as country.cs because this model will be referenced by the city and the customer model off the screen I have created two properties in the country model First Property name is ID and it is of type integer and it is the primary key of the table then second property name is country name this property will allow up to 75 characters and it is a required field notice that I have moved the system.componentmodel.data annotations library to the global using section of the program.cs file then disable the nullable warnings from the project properties window notice now the warning indicator line has disappeared from the country name property next we will create the City model right-click the model folder and then add new item and name it as city.cs I have added the properties to the City model off the recording City model has four properties First Property name is ID and it is the primary key of the table the second property is named as city name it can accept up to 75 characters since we set the max length of 75 the third property is country ID notice we have added the foreign key attribute to this property with country as the parent table EF core will create a relationship with the primary key of the country table to this property the next property is the country is a virtual property next we will create the customer model right-click the model folder and then add new item and name it as customer.cs this is our main model of the project off the recording I have added all the properties to the customer model the first property is ID this will be the primary key of the customer model then first name and last name properties can have up to 75 characters each email ID property can have up to 100 characters and it has a data type validation attribute which will throw an error if the user enters invalid email string next property is country ID we have added the foreign key attribute to this property with country as the parent table and we have also added display name attribute to display as country in the UI screen instead of country ID then next property is City ID we have added the foreign key attribute to this property as well and we have also added display name attribute to display as City in the UI screen instead of City ID then we will install the F core to our project now go to the nuget package manager and select nuget package manager for Solutions and in here click the browse tab and then enter F core cql server in the search box and press the enter key then select the first search result which is microsoft.entity framework core.cql server and select the latest version of the 6.0 because we are doing our project for asp.net core 6. in case if you are doing for seven then select 7.0 after that click the install button click OK in the preview changes dialog box click I accept in the license acceptance dialog box now the installation of Entity framework core is completed then now we will create the DB context file first create a new folder and name it as data inside this we will create and save the DB context file for our application create a new class file and name it as appdb context and click add then include the microsoft.entity framework core Library in the global using section of the program.cs file after that inherit the appdb context class from DB context-based class and then add the Constructor method The Constructor method must have DB context options parameter named as options this parameter will be passed to the base class later we will provide the value for this parameter in the program.cs file I have added the DB set property for the models of types customer country and city named as customers countries and cities respectively these DB set properties will became the tables in the database then I also included the models and Dayton namespace in the Global using section of the program.cs file then in here add the builder.services.addb context with the type as appdb context then add the connection string for the SQL Server I am using my local Standalone SQL Server you can put the connection string respective to your environment then go to the nuget package manager and select package manager for Solutions then in here click the browse Tab and after that search for Entity framework core tools this library is very much required to do add and remove migrations select the latest version of the 6.0 because we are doing our project for asp.net core 6. in case if you are doing for seven then select 7.0 after that click the install button click OK in the preview changes dialog box and then click I accept in the license acceptance dialog box now the Entity framework core tools Library installation is done then go to the nuget package manager console window and in here type the add migration space create DB in the quotes and press the enter key to generate the migration Scripts then open the create DB migration script from the migration folder and in here change all the occurrences of the word Cascade to restrict as shown in the video this is a very important step so please do it carefully otherwise the backend tables will not get created properly then go back to the package manager console window and in here call the update database command to create the tables in the backend database and wait for the command execution to complete I have opened the SQL Server management Studio and inserted three countries in the country table India UAE and USA then I have also inserted the cities with their respective country IDs in the city's table now we will create the views for our application views are the user interface screens of the MVC asp.net core application first we will create the list View this view file is to list all the customers of our application right-click the home folder and click add and click View then select razor View and click add then give the view name as list then select the template as list then select the model class as customers and then select the data context class as appdb context and click the add button and then wait for the scaffolding task to complete now our list.cshtml is scaffold at successfully let's see the scaffold head list.cshtml file it is binded with ie numberable of customer model after that open the home controller.cs file cut all the using section codes and move them to the program.cs file then change the scope to Global as shown then go back to the home controller and delete the ilogger variable and then add a private read-only variable named as underscore context of type appdb context then in the Constructor method of the home controller add a parameter named context of type appdb context this parameter will be passed by dependency injection in the runtime after that assigned context parameter value to our private read-only variable named underscore context then I have added a controller action method named list this list action method will retrieve the list of customers from the database and will pass the customers list to the list View open the underscore layouts.cshtml partial view file then an add a list item in the added list item set asp-controller equals to home an asp-action equals to list and the link text to customers on clicking this link r list action of Home controller will be called let's check it so build and run the application and then click the customers link our customer list is loaded but the list is empty because we have not created any customers yet click the create new link oh it gives us an error saying this Local Host page can't be found this is because we have not yet created the create action method in the home controller so let's create the create action method in the home controller before creating the create action method we need to create the get countries method this method is private and the purpose of this method to retrieve all the countries from the database and make it as select list items collection then next we need to create get cities method this method will retrieve all the cities by the selected country after that I have created the create action method one with the HTTP get verb and the other with HTTP post verb next let's scaffold The View file for the create action method to do this right-click the create action method and then click add View and then select razor View and then click add and in here select the template as create after that select the model class as customer then select the data context class as appdb context click add and wait for scaffolding task to complete now the create.cshtml viewfile is successfully created let's have a look at the view file notice the scaffolding task has created two select list items one for the country ID and the other for the city ID the important point to note here is viewbag.country ID and viewbag.city ID these two are the bags which will have the data source for the select lists but so far we have not written any Ajax code to fill these bags dynamically so if we run this application now the select lists will have the default values let's run and check it because I love to do RND I mean researches and developments now let's click the customers menu followed by the create new link see as I told you both the lists are having the default values even if we change the country the cities are not getting changed to the selected country before doing the Ajax part let's give the ID to the country select list and City Select list after that go to the solution Expo Laura and then open the home controller.cs file and in here create a method named get cities by country notice this method Returns the Json result because Ajax is Javascript extension so we should return the value in the data types which JavaScript can understand this method looks very simple it just calls the get cities method and converts the return type to Json format okay that's it with the controller next we need to open the site.js file here we are going to write the Ajax method off the recording I have written the fill cities function this is very important function and it uses the getjson Ajax method to call the get cities by Country Action method from the home controller this function accepts two parameter the first parameter is the country select list control and the second parameter is the ID of the City Select list control first it gets the ID of the currently selected country after that it checks is the ID is null if it is not null then it does the Ajax call using the get Json Ajax method then it fills the result at Json to the City Select list okay we are done with the site.js file now open the create.cshtml file from the home folder which is inside the views folder in here call The Fill cities method in the on change event of the country select list that's it let's run the application to check the output then let's click the create new link then let's select the country UAE notice all the cities of UAE are loaded in the City Select list then let's select the country USA notice all the cities of USA are loaded in the City Select list control so our Ajax codes are working fine let's create our first customer let's enter first name as Anis and last name as Muhammad and then let's enter the email lead as Anis annies.com then we will select the country as India and city as Chennai after that let's press the create button to save the record perfect it got saved successfully let's create one more record let's enter first name as Arun and last name as Kumar he is my friend and he lives in Texas USA then let's press the create button too save the record perfect This Record also got saved successfully so let's do the edit details and delete action methods now to do the edit action method first stop the application open the home controller.cs file in here add a private method named get customer this method will retrieve the requested customer from the database and return to the calling method then create the HTTP get edit action method this method is slightly different from the create action method so please note it down first we are retrieving the customer by calling get customer method after that we call the get countries method and set it to the viewbag.country ID and then we call the get cities method and set it to the viewbag.city ID after that create the HTTP post edit action method this method is very similar to the create action method there we add the customer to the context here we attach the customer to the context and change the state of the entity to entity state.modified then after we save and redirect the program flow to the list action method next we need to create the view file for edit action method so expand the views folder and then expand the home folder then copy the create.cshtml and paste it in the same location then rename the pasted file to edit.cshtml then open the edit.cshtml and then add the hidden input element for the ID property then change the forms asp-action to edit and then change the value property of the submit button also to edit then build and run the application let's click the edit link of One customer the record is opened properly in the edit screen and importantly the country and city is set properly let's try to change the country perfect the cities of the selected country is populated in the City Select list on changing the country's select list value so our Ajax method is working fine in the edit screen also let's select the city as Delhi and we'll press the edit button wow the record is saved properly so all code related to edit module are also working fine next we will do the details module details module is slightly different from the edit module open the home controller.cs in the home controller add two private methods named get country name and get city name then copy the HTTP get edit method and paste it above then change the name of the pasted edit method to details after that change the variable viewbag.countryid to viewbag.country name and set it to get country name of customer.country ID and then change the variable viewbag.city ID to viewbag.cityname and set it to get city name of customer.city ID then now go to the Views folder and expand the home folder and copy the edit.cshtml and paste it below and then rename the pasted file to details.cshtml then open the details.cshtml and delete both the country and city select lists then add a hidden input element for Country ID and set the tag helper asp-4 equals to Country ID and then add a input element of type text and set the value to viewbag.country name and add then add the style class attribute to form Dash control then do the same steps for the city control also after that delete the submit button because details form must not post the data okay we are done let's build and run the application after that click the details link for any customer perfect the customer data is loaded in the detail screen next let's do the delete action open the home controller.cs file copy the details method and paste it below then rename the pasted method name to delete after that copy the HTTP post edit action method and paste it below the HTTP get delete action method then rename the pasted method name to delete after that change the entity state of customer to entity state.deleted in the HTTP post delete action method now go to the Views folder and from there select and expand home folder in here copy the details.cshtml and paste it in the same folder then rename the pasted file name to delete.cshtml after that open the delete.cshtml and change the asp-action to delete then add the submit button to the bottom of the form okay that's it we are done let's build end run the application now click the delete link then in here click the delete button perfect the record got deleted so we have seen all the crud operations using the dynamic select list with this I am completing this video before I sign off I request you to subscribe and share this video I would appreciate if you would like and subscribe to this channel so that you will be notified for all of the new videos that I will be posting thank you and bye for now

Channel: CodeS

Views: 15,341

Keywords:

Id: vvJhflLovEs

Length: 30min 1sec (1801 seconds)

Published: Sat Dec 24 2022