Master Detail Crud using ASP.NET 5 EF CORE CodeFirst

hello everyone this is anis with you welcome to my channel in this asp.net core tutorial we will see how to create a master detail cred application using asp.net core mvc we will also look what are the challenges in creating a master detail crud and why it is very difficult to create a master data correct with attractive user friendly user interface let's see the demo of the application which we are going to make in this video this application is called advanced resume manager this is the listing of our resume manager application first we will see the create method let's click the create new button there we go we got the create screen let's first enter the header record in the atex speed okay now header record information is entered let's enter the detailed records in this detailed record i added the client side validations actually it is very difficult to add the client side validations to the detailed records but in this application i will show you the easiest way to add the client-side validations to the detailed records now we have added the second row but without filling the second row we are trying to save the record notice the client-side jquery validation does not allow us to save the record the beauty of this application is we are attaching the client-side validations even to the dynamically added controls in here the second row is added dynamically by the javascript but the dynamic row also obeys the client set validations let's add one more row i mean the third row as soon as i fill the years work column to some number greater than 0 automatically the error message disappears and then we have added one more row so i just wanted to show you that we can add any number of rows and the validations will still work fine for any number of rows let's delete the fourth row and we will save the applicant ok the record is saved and listed successfully let's click the details button for the applicant which we just created wow the detail screen is also loaded properly and looks very nice notice that the three rows which we entered are saved in the experience details then after we will click the delete button notice the first delete confirmation page is loaded with the message are you sure you want to delete this record because delete is a destructive operation we have given an option for the user to cancel the operation since this is a demo we want to delete the record so i pressed delete and the record is deleted successfully that's great so in this application first we are going to create read and delete operations of the master detail card let us see how it is done 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 ok let's continue the video now this is part two of the master detail craft project named resume manager if you have not watched the part one i would recommend you to watch the part one first the video url is in the description okay let us come to the video i have opened the resume manager application and i have entered all the header information of the screen let's add the profile photo as of now our project does not have any validations in the experience detailed grid so if the user enters 0 in the es box column of the grid it accepts and will not show any error see we are able to store applicants with zero ears in their experience details this may leads to erratic data which we do not like so to bring the client side jquery validations for the ex worked column we will add the range validator to the head of the year's work property we will accept experience of applicants between 1 and 25 only at first let's fill the master columns of the form okay now the master columns are filled and even the profile photo is also selected and then we will fill the detailed columns in the experience details grid to check the validations after that we entered the company name then designation details in their respective columns and then we entered 0 in the years worked column that has to be noticed okay let's click add now the imported point comes here let's try to save the applicant by pressing the create button notice that the yes work column validation is not allowing to post the form this is great but would not be nice if the error message appears below the experience column let's write the code to show the error message below the years work column open the create.cs and scroll down to the experience detail grid code in that add the validation error span code as shown in the video code little important so please note down the syntax carefully ok we are done let's save and run the application again we will enter the same applicant details in the 2x speed notice now as soon as we leave the years work column with zero value the error message appears below if we press the add button the next row also comes with the error message because the error message also gets cloned if we try to submit the form the error validators does not allow us to submit this is fine now we entered 2 for the years work column after that the error message got disappeared let's try to save yes it got saved now let's go to the sql server management studio to check the database let's first check the applicant table there is no issue in this table all is good here let's check the experience table notice that two rows are added first row is proper and the second row is null we don't want to save the null rows so before calling the save method we need to delete all the null rows let's add the code to remove all the null rows from the posted model notice the code we are removing all the rows matches the condition in lambda n dot yes worked equals to zero now let's save and run the application we will create one more applicant record by entering all the details i will show this in 2x speed so that you will not get bored now again we have an empty row let's save the record by clicking the create button okay now the applicant record is saved successfully to the database now we will check the record in sql server management studio first we will browse the applicant table yes the records are saved properly in the applicant table let's browse now the experience table this time the null row is not created since we already removed the null records in the create method of the controller then after i want to change all the html editor tags to asp.net tag help us as shown in the video because html helpers are obsolete and i also deleted all the commented lines to make the code neat so far so good now i am going to explain you an important point so please listen carefully let's create a new applicant i have entered all the details of her and also created a first company details now the issue starts i have entered zero in the second company details i mean in the second row and i click the create button it was supposed to show the validation error message but it did not show any errors and it completed the create action sequence this behavior is wrong and can create erotic records but why the validations did not work and what went wrong let me explain the issue and also will tell you how to fix it mbc uses the jquery plugin named jquery.validate.unobtrusive.js for making the client-side validations the problem with the jquery is it adds only the controls which are available at the time of firm load it cannot track the dynamically created controls in our case the second row is created dynamically using the javascript so jquery did not track it so what is the solution let us say it first and foremost we need to provide a id to the firm i have kept applicant form as the id for our form i am going to add a important jquery script which is going to do the magic for us let me explain the script line by line this script is very important so please listen carefully at first we get the reference of the form using the id which we provided the idea for form is applicant form then after we are calling the method form dot unbind this will remove all the controls of the form from the jquery controls collection and then we clear all the validators from the form after that we call this validator dot unobtrusive dot parse of form this line will add the validators to the form again finally we call the form dot validate to rebind the form to the jquery dot jquery.validate.unobtrusive.js plugin then after call this rebindvalidators method in the last line of the add item method this is very very important ok we are done let's save and run the application to check let me enter the details of the new applicant in the 3x speed okay now we will enter the company name in the second row and we'll leave the s worked to zero last time the validation was not working here but this time it should work let's verify it see now the validation error message appears when we leave the years worked text box with zero value let's try to post the form with zero value for years work textbox we are not able to post the form without entering all the mandatory fields now i have entered values for years worked field of the second row and also entered the value for the designation of the second row let's click the create button yes the record is saved successfully now the create action is completed let's do view and delete option next let's add the details method to the resume controller this is the method which is going to provide us the data for the details view please notice the record fetching code from the database it says underscore context dot applicants dot include of e dot experiences this is a very important line it says get me the experiences details record from the details table along with the header table this is called as eager loading efcor supports three types of child entities loading method eager loading lazy loading and explicit loading to know more about the child entities loading methods please watch the video difference between lazy loading and eager loading in entity framework core in this channel i will have the link of the video in the description section and then after we are adding a where class to fetch the selected record after that return the view with the applicant object and then let's create the view file to display the details of the applicant in forex speed the scaffolding task has created the details view page for us let us save and run the application now the listing page is loaded let's click the details link to view the applicant okay now the details page of the applicant is loaded but this does not looks good and you may not like it same here i also did not like the details page i want my details page to look similar to the create page so rename the details.cshtml which was created by the scaffolding task to world details.cshtml copy create.cs html and paste it to the same folder and then rename the create copy.cshtable to details.cshtml now we got a new details.cs html to display the applicant but details.cs html file needs some modifications let's do it first and foremost i want to change the heading to view applicant remove the input asp tag helper for name and also remove the validation span tag we don't want this because details pages are read-only page so no need validations instead of that i have added the asp for tag helper with read-only attribute then after i have added the bootstrap class form dash control dash blind text let's run and check the application notice the screen the name input element looks like a label but we are able to click it and the beauty is when we click we get a square outline box over it this gives a good look to our user interface now of the recording i have done the same change to all the elements you can notice the output and then we don't need this file upload control here so we need to remove the file upload control code from the form scroll down to file upload control code section and delete the div of the profile photo we do not need a file upload component in the details page we only need a image tag to show the respective photo from the file system and now we have added the image tag to show the photo let's save and run the application hoops error it says the null error this error comes because we had stored only the file name in the table we did not store the complete path of the file in the table so the image tag was not able to find the requested photo image from the table we know the file path of the photos and the file path is same for all the applicants photo only file name is different so we include the file path before the photo url to display the photo let's save and run the application again let's click the details link this time the applicant photo is displayed along with the other applicant details fine we are done with the header fields display let's go to the detail grid display let's add the form control plane text bootstrap class and read only attribute to all the columns of our detailed grid we will also remove the validation spans from the detailed grid remove all the buttons from the detailed grid i mean add and delete buttons we don't need it here and then come to the script section we don't need any scripts here because the detail spaces just to show the details and nothing can be modified here so it does not make any sense to have scripts to add or delete rows here then after we also need to remove the submit button so we will delete the submit button and will keep only the back button let's save and run the application and see the applicants one by one wow the details page is looking very good now next let's do the delete action now before going to delete action i would like to request you guys to subscribe to my channel and also please share and like this video to create the delete method in the resume controller.cs first open the resume controller.cs then after copy the details method of the controller and paste it below delete method is going to be more or less same like the details method and then rename the pasted method to delete delete action always have two methods first one to read the record from the database and then the second one is to delete the record from the database since it is going to have two methods we need to add the web attribute to both the methods head first method will be called by the http get so we will add the http get attribute to the method head and then let us go to the views folder and we will make a copy of the details.cs html and paste it to the same folder then after rename the pasted file to the delete.cshtml let's open the delete.gs.html and add the confirmation message in the top of the page then after change the heading view applicant to delete applicant after that change the asp action taggle per value to delete then an important line is going to come so please listen carefully had a hidden input control to hold the id of the applicant this is very important because if we pass the model without the id then our delete method in the controller will not be able to delete the requested record then after scroll down to the bottom i mean to the button section and then delete the button controls due because the div currently has only the back button but we also want the delete button so we will copy it from the create dot cs html now open the create.cs html and copy the button section div then paste it to the delete.cshtml after that rename the value of the submit button to delete and then change the css class to button danger then after save and run the application let's try to delete the applicant by clicking the delete link wow the delete confirmation page is loaded with all the details we can cross check and delete the application now let's click the delete button oops we are getting error but this is an expected error as i told you delete action has two methods we have only completed coding for the first method we haven't implemented the second method yet so let's code now open the resume controller again let me paste the code for the second delete method this method will have a http post attribute and it can be called only by the post web by passing an applicant model with it let me explain the delete method code this is actually very simple code first we receive the applicant model from the delete form then we attach that applicant model to the controller's db context and then we change the state of the applicant to entity state dot deleted in the context entries finally we save the changes back to the database that's it let's see this in action let's click the delete link for the applicant santosh mathew we can see the delete form loaded with the confirmation message now let's click the delete button notice the applicant santosh mathews record has been deleted now we are able to see only the three records let's check the database table using sql server management studio first we will check the applicants table notice that the santosh math record does not exist so it is deleted properly what about the experience table let's browse the experience table great here also the records of santosh mathew is deleted properly so our delete action code is working fine so far we have completed create read delete actions of the master detail cred only the edit action is pending before going to the edit action i must speak about two small issues in the create action so i don't think i can include edit action in this video because there is a complexity involved in the edit action let's see what is the issue in create action first let's create a applicant named jennifer in 16x speed now i have mistakenly added the second row but i don't have the details to enter for the second row so i am not able to post the form due to the validation error so now i am locked i have to lose my work and must re-enter all the details this is a bad approach to fix this issue let's go to the button section of create.cs html first increase the size of the dummy button so that we can accommodate two buttons in that space then after change the left value to 94 percent for the add button after that change the lift value of the delete button to 88 percent and change the bootstrap class invisible to visible for the delete button now save and run the application i have filled all the details of the applicant and also created an empty row of the recording notice that the delete button also visible in the last before add button now we have the option to delete the last row in case if we have changed the mind let's delete the last row then after click the create button that's great the record is created successfully so the first issue is solved then now come to the second issue the second issue is very important and very difficult to fix this issue okay now again i have entered all the details for the applicant maria notice that i have entered two experience row first one is cts trini and the second one is ibm programmer now i am going to delete the cts experience and after that i am going to click the create button to save the record let's see what happens the record is saved let's click the details link notice that the experience details of the applicant did not save but we entered ibm company in in her experience rows we only deleted first row at the time of submission we are sure that we entered ibm as the company name and programmer as the designation and one year as a experience in the second row but still it did not save why why why in the applicant jennifer record we had deleted the second row on that time the first row got saved but for applicant maria we have deleted the first row due to that the second row also did not save to prove this issue i am going to create applicant with three experience rows now we are ready to save the applicant with three experience detailed records now i am going to delete the second row that is the microsoft experience row from the list any guesses what will happen let's click the create button the header record saved successfully remember we have saved two detailed records ibm and polaris my worry is about the detailed records only let's see click the details link notice that only the ibm detail record got saved and the polaris record did not save this is a serious issue we cannot send this project to the client without fixing this issue but i am very tired now i will fix this issue only in the part 3 of this video if anyone has any idea to fix this issue kindly put in the comments command guys think definitely you can do it or otherwise wait for my solution and then i want to beautify the listing page i have added a css class named avatar this class i will be using for the profile photo then i commented the default create links which was created by the mvc scaffolding task instead i have added a stylish and good looking create links new then scroll down a bit over here i have added a table column to display the profile photo notice that i have set the css style to avatar for the profile photo then scroll down to the bottom here i have decorated the button links with bootstrap classes now let's save and run the application to see the look and feel wow now the index page is looking very good and nice but this project is not yet completed but don't worry we will complete this project in the part 3 after adding the edit and search options 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'd like and subscribe to this channel so that you will be notified for all of the new videos that i'll be posting thank you and bye for now

Channel: CodeS

Views: 25,049

Keywords: entity framework core crud, master detail mvc, master detail asp.net core, master detail form, how to create master detail entry form in asp.net mvc 5, learn programming web applications using asp.net core, asp.net core basics, asp.net core 5 mvc beginner, asp.net core mvc tutorial, asp.net core tutorials for beginners, asp.net core entity framework tutorial, asp.net core identity tutorial, asp.net core mvc entity framework, asp.net core bootstrap, asp.net mvc, master detail c#

Id: HKqGQ0rhe-c

Length: 30min 38sec (1838 seconds)

Published: Sat Mar 27 2021