Complete React JS Master Detail CRUD with Asp.Net Core API

quick demo of this video series here we are going to implement the complete master detail cred operations with react js and sb.net core web api using a restaurant app here we have the final project now let me show you how to create a new order first of all here we have the order number which is automatically created by the system now select the customer now from this table here we can search and add food items into the order so here we have the first food item let's double the quantity here and then let's add drinks same quantity now the total amount for the selected food item is computed and displayed within this grand total text box here now select the payment method from this drop down now submit the form that's it we have created a new order now if you click on this orders button here it will open up a pop-up dialog while listing all of the existing orders to update an existing order you can select the order from this table and then corresponding order details will be populated inside the form here you can delete accessing food item you can add additional food items after making required changes the order costs around 9 now let's submit the form you could see the same updated order here now finally with this trash icon you can delete an order now confirm the operation that's it in this video and the next video we will build this complete project from scratch we'll be discussing following points how to design the database in entity framework or for master detail tables with required foreign keys creating an api controller with web methods to implement all the credit operations how to design master detail form with validation and a pop-up dialog to list existing orders how to consume the api web methods from react.js application and much more so i strongly recommend this whole tutorial and this video is sponsored by kite the ai powered coding assistant which is a free plugin that uses advanced machine learning for suggesting code completions currently it supports many programming languages including python java javascript you could easily integrate guide with text editors like visual studio code adam pyjam sublime etc it has a few cool promising features for faster coding the key feature of this plugin is ranked completion suggestions are sorted or ranked by the relevance of the context rather than popularity or the alphabetic order completion from kite are longer and relevant so that you could easily write full lines of code with less key strokes thanks to the machine learning algorithm and last but not the least if you are coding in python the copilot feature offers documentation lookup right within the editor so you could avoid frequent google search outside the editor we developers always come up with faster solutions for others why don't we try plugging like kite to simplify our job so i definitely think you should download this and give it a try from the link given below in video description hi all welcome to coda fiction in this video and the next video we will discuss the complete master detail correct operations with react.js and asp.net core web api before getting into this topic i would like to thank free paypal donations for my previous works in order to make more helpful and quality tutorials like this you can also support me through paypal donation i have given the link in video description and inside the first comment of this video along with that i have given some links for beginners to advance premium courses for languages or frameworks like react.js javascript sp.net core etc without further ado let's get started with this topic first of all i will be creating the web api in asp.net core and then after that we will build the front end in react.js so here is my visual studio 2019 now let's create the web api in asp.net go first of all we have to create a project and then select asp.net core web application click on next in order to implement the topic of discussion which is the implementation of master detail correct operations we are going to create a restore and app so i will name this project as restore and api then select the location where you want to save this project click on create from this new window here select asp.net core web api and make sure from these top two drop downs here you have selected.net core and the latest version of asp.net core then i will uncheck this option for https which is not required for development environment and make sure to enable this option for open api support which is really helpful to test the api once it is created without the help of an external application like postman okay we will discuss that once we create the api so here is the brand new asp.net core web api now let's create the db model and then through migration we can create the actual physical db for that first of all we have to install corresponding in nuget packages so right click on this project here then click on manage and you get packages from this browse tab search for entity framework core now let's install this code package here entity framework core click on install now let's install this package here entity framework called tools since we are using microsoft sql server we have to install this package also any framework called sql server so finally here we have installed three and you get packages for entity framework core now back to the project now let's define db model classes for various entities for that first of all we have to create a new folder here i will name it as models to demonstrate the master detail create operations we are creating an order page inside this restaurant app for that we have to create these four tables here first of all we have customers and then we have food items table inside that we will insert food items served in the restaurant and then here we have two tables related to order here we have the master table order masters inside that we will have summary of the order and here we have the final table order details inside that we will have the food items selected in the order so there will be a row for each food item selected in the order now let's look how to create db model entities for these tables here so back to the project first of all let's create the model clause for customer so right click on this folder here then add class i will name it as customer from this db diagram you could clearly say that i have only included the necessary columns for explaining the topic of this video obviously in a practical project there will be more columns in these entities here to keep this discussion short and simple we are only adding required columns here so first of all we have the primary key customer id and then we have the customer name with data annotation i will set this property as the primary key so we have to use this uh attribute key now let's import or use the corresponding namespace for that you can use this shortcut hold ctrl then press period or dot simple now select this using statement here now here is the problem after migration string properties will be converted into n work max in sql server which is more than what we need in order to avoid that we can explicitly set the data type with this column attribute here let's add the corresponding using statement hold ctrl then press pd.simple inside that we can pass this type name is equal to n work 100 so that's all about customer table here now let's create food items model first of all we have the primary key i will add the corresponding key attribute here then we have the column to save the name of the food item and then we have one more column for the price so which is of the type decimal so once we convert this into the physical table column it will have decimal 18 too so we can have two decimal point price now let's set the data type here and work 100 now let's create these two tables for order after all we can establish the foreign keyboard wins up so first of all i will create the master table order master first of all we have the primary key so let's add the corresponding attribute here for these order tables we are expecting a lot of transaction so instead of going for this integer data type here we can go for the long data type and here we have the corresponding column or the master id and then we have order number which is of the type string or the number its logic will be different to different client it may include branch code company code date etc in this application for simplicity i will be providing a random number with this unique number employees at the restaurant can uniquely identify an order and then here we have the property for customer id inside this column we will be saving the customer id assuming that the customer is already saved into this customer table here and then after that we have the payment method in short i will name it as p method and then we have the grand total which is of the type decimal so abbreviated as g total now let me specify the column data type for string properties here now let's create the final table order details order detail you might have already noticed i am using the singular noun for these model definition here we will be using the plural version for the actual physical db click on add first therefore we have the primary key and then we have the master id so i will just copy that from this master model here now we need a column for the selected food item so which is food item id so here it is and then we have um the price of the item so food item price you may ask the price of the food item is already inside this food items table why do we want to save that inside this details table actually the price of the food items may vary time to time so we can't depend on the price inside this food item table here we have to separately save that inside this order details table and finally here we have the quantity call so far we have created entity framework for model classes for the db here now you might have this doubt regarding the model class name and that of these tables name inside this diagram here the name of these tables is determined from db context class before creating db context class let's look how to establish these foreign keys here in entity framework there are two ways to create foreign key constraints either you could use navigational property or you can create the constraint with entity framework api methods in this project we will be using navigational property first of all let's create this foreign key between these tables customers and order masters with the column customer id for that inside this order masters table we can add a new property like this which is offset type customer model class so customer and i will name this property customer itself unlike other properties inside this class this property is offset type another class or another model so the entity framework core can easily identify this property is a navigational property so there won't be a corresponding column to this property like other properties inside this model this navigational property will establish a foreign key constraint with these tables here customers and order masters and this foreign key will be created for these columns customer id from both of these tables here apart from creating a foreign key between these model classes here this navigation property customer can be used to fetch a particular customer for a given order master we can discuss that later now let's create rest of these foreign keys here first of all let's create this foreign key between these tables food items and order details here so let's open order details and let's add a navigation property here we can define this navigation property anymore inside this model class here i'm defining this navigation property along with the corresponding id property so that we can easily uh identify there is a foreign keyboard window this property is of the type food item and i will name this property with the same name food item so this will create a foreign key between these tables with this column food item id from these tables here and here we have the final foreign key between order masters and with its details table for that inside this details model here i will add another navigational property order master with the same name order master i hope you already know the basics of foreign key since we have this foreign key between these tables here when we insert a new record into this auto masters table the corresponding customer id inside that draw must be there inside this customers table here so the table with the foreign key constraint will be called as dependent table or child table and the other table which has the principal key customer id will be called as parent table and remember that this phone key between these customer is created with a navigational property inside this model clause here and these columns customer id from both of these tables is selected with a predefined convention and you can see inside this msdnr documentation here i have given the link in video description you could see this section under this subheading conventions so for the first following key here between customer and order masters is created with this convention here navigation property name which is customer and then followed by id so the customer id property is used for the foreign key from both of these model clauses here so that's all about foreign keys in entity framework i explained everything in depth regarding foreign key because some of you may have some difficulties in understanding foreign key in entity framework like i had when i was a beginner in ndd framework so that's all about foreign key now let's move on now let's do the migration which is the process of creating the actual physical db using these model clauses that we have created for that we have to define db context class here so let's add a new class restore and db context we have to inherit this class from entity framework clause db context let's add the corresponding namespace with the shortcut now constructor is a must thing for these db context classes so i will use this snippet ctor then hit tab so here we have the constructor for this class now let's add the corresponding uh constructor parameter here db context options of the type restoring db context as options and we have to pass the same parameter to the base class which is here db context so we can do this base then pass the save now this db context class decides what should be created in actual physical db through migration that means in order to create tables corresponding to these model clauses here we have to have a corresponding property inside this db context here then only corresponding table will be created through migration so we will create a property of the type db set for all of the modal classes so first of all we have customer now we'll name this property as customers and the name of the corresponding table will be same as that of this db set property here and that's how this table is named as customers now let's add tv set properties for rest of the model classes so in total there will be four tables corresponding to these db sets here now back to this constructor parameter here db context options this parameter requires two informations the type of db provider that we are going to use whether it is sql server mysql postgresql etc along with that we have to pass the corresponding db connection string as you know the value of a constructor parameter will be passed when an instance of corresponding class is created we will be creating an instance of db context class through dependency injection don't freak out if you don't know how dependency injection work in asp.net core we will explain that in a bit for now let's do the dependency injection inside this startup clause here we'll do that inside this function configure services first of all from this i services collection property services we have to call the function add db context for this context class restore and db context let's add the corresponding namespace and now inside this function call here we can pass the value for this constructor parameter here options so that let me uh close this uh solution explorer here and we will pass the values with this arrow function here options from that we can call this function use sql server let's add the corresponding namespace into this function we have to pass the connection string so by calling this function use sql server we are saying we are going to use sql server as adb provider now to pass the db connection string inside this function i will save that inside this app settings.json here so let's add a new object for connection string here as always i will name this connection as dev connection now let me paste the connection string here so here we have the sql server instance installed on my system and here we have to set the database name i will set it as restore and db trusted connection is set as true since we are using local authentication and we have set this property multiple active cell sets as true for executing multiple query batches simultaneously now let's pass this connection string inside this function called use sql server here we can access this db connection string through this property configuration of the type i configuration so we just need to do this configuration from that let's call this function get connection string and into this function we have to pass the name of the connection string which is dev connection now we can do the migration before that i want to make some correction to make a foreign key between these master and details table here we have added navigation property inside this order details model instead of that it would be a better idea to add the navigation property inside this masters table here as i mentioned before when we create foreign keys through navigation property we can use the same navigation property to fetch the corresponding uh data what i meant by that we have created this uh navigation property inside this order detail here through this navigation property order master so when we fetch a specific order detail record with a given id we can easily fetch corresponding auto master record into this navigation property using this order masters id here we will discuss that in a bit but it would be helpful to create a navigational property inside this masters table instead of this details table here because in this context of master or details table most of the time we will be accessing mass test record along with that with the given master's id here we can access corresponding order details through navigation property so it is better to do the reverse navigation so i will just remove this navigational property from here and then i will add a new navigational property here like this which is offset type list i will explain everything in a bit order detail and i will name this property as order details independent of where you add the navigation property the foreign key between these tables will be created at the same time with this navigational property of the tab list we can access all of the order details record for a given master's id that will be more helpful than creating a navigation property inside this order details table here so when we fetch a given order master record it is easy to fetch corresponding it's a list of details to code through this navigational property here i will explain how we can do that once we create the corresponding controller for now that's enough let me save all of these modification here we are going for the migration before that build this project to make sure there is no error right click on this project then build once you build this project successfully open package manager console in my ide it's already opened in this bottom navigation here make sure that from this top second drop down here the appropriate project with the db model is selected if you can't see package manager console here open solution explorer then select the project then go to tools and you get package manager then package manager console now to do the migration first of all we have to execute this command add dash migration the name of the migration i will name it as initial create hit enter [Music] as a result of the command execution here we have a new folder migrations with corresponding c sharp files this add migration command will not create a physical db for that we have to execute the second command update database in my system i can see this error a network related or instance specific or awkward this error is most commonly seen when we work with the sql server databases and it indicates there is a difficulty in connecting with the sql server instance that we have specified within this db connection string here local sql server express along with this error you could see some warning messages regarding specifying type of this decimal by default sql server decimal will allocate 80 numbers with two decimal precision we can have two numbers after decimal point the default sql server data type is fine so ignore that a warning message here now let's solve this connection problem here so first of all we have to check whether we are running this sql server instance uh sql express in my system to check whether we are running this sql server instance or not you could do this open your start menu then search for run click on it then execute this command services.msc click on ok it will open a window listing all of the services installed on my machine now let's search for sql server so here we have the service corresponding to sql server and here we have the instance name you could see the same inside this connection string also currently this service or instance is not running otherwise you could see running along with this instance here so let's start that uh service here now let me open my management studio let's try to connect with the sql server instance that we have specified in our connection stream correct so here we have successfully connected to the sql server instance so when you see an error like this make sure the instance or the service is already running if you are not using local authentication you must be passing both username and password in that case make sure you have provided correct credentials otherwise you will see the same error like i had here now hopefully there is no other error let's execute the same update database command again hopefully we have done everything successfully let's check whether we have created the database or not let's refresh this databases node here expand the database node so here we have the new or strand db let's expand this expand tables boom so here we have the tables corresponding to the model that we have in our project let's check the design here you can see all of these tables are created with respect to the model classes that we have defined here now let's check whether these three foreign keys are created or not in order to see this foreign key here expand auto masters then expand keys here boom so here we have the foreign key between these tables customers and order masters to see in great detail right click on it then click on modify and i want to show you one more thing here expand this insert and update specification and inside this delete rule you could see cascade that means in this foreign key relation here this customers table is the parent table and this is the dependent table when we delete a customer with a given id corresponding order masters with the id will also be deleted we don't have to manually delete that after deleting corresponding customer from this table it will be automatically done by the sql server engine that's what meant by this uh delete root case kit now in this same window you could see one more following key which is the foreign key for the same table order masters with this details table here okay now there is one more foreign key between our order details table and food items you could see the same inside these keys not here so here it is so this is the foreign key with masters table here and this is the following key with food items table here all of these foreign keys follows case scale rule so when we delete a master record from this table corresponding details rows will also be deleted automatically we can actually see that later for now that's enough for the db part here back to this project here now it's time to create another controller for that right click on this controllers folder add controller from this left panel here select api then select api controller with actions using entity framework click on add there are two tables or model classes corresponding to order but for this order here we will select the master model and for this data context we will select the restore and db context here and i will name this controller as order controller click on add this time here we have another problem saying there was another running we selected code generator we have to install this package web code generation design don't freak out or don't lose your motivation these types of errors or bugs will be shown from time to time while developing an application and i think resolving these types of arrests or bugs makes a programmer a developer we just need to install this package here web code generation design click on ok cancel this window here now let's install the particular in new get package for that right click on this project then click on manage in nuget packages from this browse tab here search for code generation dot design so here we have the package as you can see here it's already installed by default in this project if it is properly installed in this project you should see the same under dependencies packages here but i couldn't see the same here also you could check the same inside the project configuration file to open the configuration file double click on this project here so here we have the project file with the extension cs proj and under this item group here you should see the dependent packages for this project so here we have the package webconfiguration.design and which is not listed under this packages here that means this package is not installed properly so i will just do this just uninstall this package and then install it again click on accept now you will see the new package shown here now you see this is how we handle an error i think these kinds of skills or knowledge is learned from experience than the official documentation of the framework or the language in my tutorials or text articles i gave solutions for these kinds of errors or bugs that you may come across when you do the same project on your system let me know the errors or difficulties that you came across while developing this application please write it down in comment section below now remember we were not able to create the other controller now with this package reinstalled hope we can do it successfully so i'm gonna try the same steps again finally here we have created the order controller with the help of scaffolding mechanism the nice thing about creating controllers using scaffolding mechanism is that within this controller we have all the web methods for the query operations we will discuss each of the web methods in great detail in a bit before that let's talk about this controller constructor and how dependency injection works for any controller that you create in this project there will be a constructor like this and for those constructor there will be a parameter of the type restaurant db context so the value for this constructor parameter will be passed whenever an instance of this class or the controller is created and you should know this usually we developers never create controllers inside an asp.net core project it will be done by asp.net core framework itself when there is a request into the controller so when we make a request into this other controller and instead of this controller class will be created and at that time value for this constructor parameter must be passed and that will be passed through the dependency injection that we have defined here so this will create an instance of restrained db context for every new controller created and that context instance will be saved into this private context here and rest of the web methods inside this controller will make use of that to interact with the db hope you understood how dependency injection works in asp.net code now let's run this application so this is how the swagger api interface looks like because we have enabled open api support in the last window while creating this project now this interface helps us to check whether the api works properly or not if this project works as expected we can start creating react application for order controller we have these much web methods for now i will just insert a record with the post web method here then we will fetch the same with these get verb methods here the first get method will return all of the order and this will return a specific order with a given order master id we will be discussing rest of the put and delete web methods after creating the react application so first of all let me try to insert a new order with this post web method here along with the base url we have to add this url pattern for slash api for slash order you could see the same here api for slash then controller name the controller name is order here so here we have the post web method now let's try it out we have to pass a json object to the web method as you can see here and if you check the post web method here it expect an object of order master so here we have the order master model so we have to pass these values here along with that we have to pass a list of order details inside that will be passing the list of food selected in the order remember i have shown the interface or the form for this order creation already in initial demo so while making the post request here we also have to pass an array like this with list of food items selected with the name order details but in this default json object here it shows navigational property like customer we don't need that and here food item okay so to create an order we will be passing a json object like this so these are the properties from order masters and also we have an array with selected food items i don't know whether you notice the different casing for these properties that of these are model properties here for these model class properties we have used pascal casing meaning each of the force for first letter will be uppercased and that of this camel casing here all of the words first letter will be uppercased except the fourth word here so instead of this uppercased o we have lowercased or here you could see the same change for rest of the properties inside this json here as you know the server side c sharp is uppercased even though we are passing a different case property here don't worry asp.net core will convert these camel case properties into corresponding uppercase or pascal case properties to bind with these properties here and don't be confused with this naming convention when a project front end follows camel casing and the corresponding server side follows pascal casing these are the conventions followed in different languages in javascript we have followed camel casing for naming properties or variables and that of this c sharp here we have used a pascal casing for class property naming so don't worry these properties will be binded to corresponding properties in this model because of the default formatting in asp.net core when it receive edges on object it will convert the properties into pascal casing and the reverse will be happened while sending the response of the web method the camel case properties will be converted into camel casing properties here so be aware of these conversions and while naming properties in react application we must follow camel case property naming corresponding to these properties here otherwise corresponding property won't be binded to corresponding our model property here and thereby that data won't be saved in our db so be aware of the conversion behind the scene now let's pass a json object for a proper order we don't have to pass values for these primary key values for insert operation in any of the tables that we have created here because the primary key columns already set the identity specification you could check that here for example here we have the order masters design with this primary key column selected go to column properties here then expand identity specification here by default identity specification is set for primary key columns that means we don't have to pass values for these columns during inserting a new record so it will start with one and increment by one upon new record insertion now after the primary key we have order number as i mentioned before this unique sequence number or the number will be different to different restaurant based on their logic of generating the sequence number for now i will just pass some random numbers like this and then here we have the customer id for customer there will be a drop down to select from existing customers and corresponding customer id will be though in this property here so first of all we have to uh insert some customers into our customer table here in this project we are not going to discuss how to insert the course into this customers table here it will be a simple credit operation for that i have already made a cred operation with react and asp.net core web api and same goes for this table also food items and inside this table also we need to have a list of food items which is served in the restaurant so before inserting a specific customer id or food item we have to have the idea of course in these uh principle tables customers and food items so i will uh insert that directly through sql script so just right click on this db here then click on new query then i will paste this script for inserting few records into those tables customers and food items i have given this a db script for inserting some sample data into these tables you could download that from the github link given below in second video description before executing this db script here make sure you have selected the restaurant db from this drop down here after that click on execute so that's it we have some sample data in these two tables customers and food items now suppose this order is made by this customer here so i will provide the corresponding customer id 3 here then after that we have payment method it will be either cash or card this property grand total is computed from list of food items selected so here we have the order details array or collection inside that we can have as much as food items selected for the order as i have mentioned here this detail id is the primary key so we don't have to pass values for this column and then we have the order masteries id for that also we don't have to pass value while inserting this order with the web method here first the for entity framework core will insert a record in this master table here and that master id will be used to insert corresponding details record in this table order details so we will ignore that for insert operation and then after that we have food item id for adding food items into an order we have a separate table in left side so for each food item selected there will be an object in this order details array now for this order let's select some food items we have chicken tender so corresponding id 2 will be the inside this property and then quantity will be 2 and then price per single item 4 dollar and 99 cents will be the inside this property here now let me add one more food item into this order so i will just copy this object from here and i will paste that here so totally in this array we have two item one item for each food so this time uh i will select canned drinks so corresponding id will be 40 same quantity price per item is one dollar so here we have a json object for an order with two food items selected i know this is difficult to create a nested object but it will help you to make a post request from our react application and this grand total will be calculated as per the equation for now we'll just use the calculator so that's it so here we have a proper json object to insert a new order click on execute here thank god it went successful as a result of the request here we have the success response 201 meaning the uh record is created and here we have the response let's check the same in our order tables here first of all here we have the merced table so summary of the order is here now let's check the details table so here we have those two food items and this master id is same as that of the summary in our masters table you could see the same in this response here just ignore this navigational property value for customer and food item we can discuss that later and what else yes here we have the post web method which is responsible for this insert operation so first of all the received objects will be added to the corresponding db set and then just need to call this function save changes rest of these operations both insert operation in this master and details table will be done in the back end and then finally uh we created our object is returned as a response now with this forced get request here we can retrieve or fetch all of the records from our master table so click on try it out click on execute boom so here we have the uh inserted odd master record along with this summary we could also fetch corresponding details record with this navigational property i will explain that once we create our react project so this get request will retrieve all of the existing requests and then with this um get request we can access a given specific order for example if we want to retrieve this specific order we can provide one here click on execute so here is the corresponding order object now finally let's delete the order that we have and it will be handled inside this web method here delete okay we will discuss each of them in great detail once we create our react project now we are going to delete this order which we have created with lot of effort with this delete web method we can delete an order click on try it out then provide the corresponding master id here and click on execute just click on this execute button here that's also done the request when successful and if you check those tables here the previous order is deleted now if you execute the select statement again within this details table boom wait a minute what happened i already told you that because of this foreign key here there is a rule cascade rule that i have shown with the designer window here a master record is deleted corresponding master id records within this detail straw will also be deleted that's a common logic we don't have to do that separately the entity framework code will do that for us so that's all about testing this web api with swagger api here and we have one more web method put web method to be tested and we will do that after creating the react project now as you can tell we are able to implement these tested credit operations without any changes in these methods here while developing our react application will be updating these methods as per our requirement so that's all for this first part in next video with the same confidence and interest will build the front end in react.js application if you found this video helpful please thumbs up this video and for more awesome videos like this please be subscribed to this channel called affection and also please share this video with your friends and colleagues so that they can also benefit from this see you in next part

Channel: CodAffection

Views: 27,920

Rating: 4.8979592 out of 5

Keywords: react js master detail crud with .Net Core API, EF core master detail, EF Core with Foreign Key, Restaurant App with React js and Asp.net core, Asp.net api crud operations for master detail, CodAffection

Id: i8LymADs_U4

Length: 49min 54sec (2994 seconds)

Published: Mon Feb 08 2021