ASP.NET CORE MVC CRUD using AJAX with Entity Framework ( DB First approach + bootstrap modal popup )

hello everyone welcome to nera techies in this video i am going to explain dot net core mvc credit operations using the ajax call with entity framework database first approach and also i'm going to explain how we can use the bootstrap model popup in the dot net core at the end i am going to explain how we can execute any stored procedure in dotnet core entity framework so part of this video i split it into three parts first one is dotnet core sharp section and the second one is html and bootstrap design the final one is jquery validations and functions making at the end we can have the final demo that's what my plan so let me create the application first so this is the visual studio 2019 new here i'm choosing asp.net core model view controller and the target framework is dotnet core 3.1 so let me create the application so it will take some time to create the project so look like our project generated so let me rebuild the application okay rebuild all succeeded next i'm going to add the entity framework for handling the database repository i am going to create the new project it's a class library project so the new project so template is class library and the name is repository layer so this one also target framework.net core 3.1 so look like our opacity application is created okay in the startup project it's added now i am going to add the entity framework before adding the entity framework i need to install some packages so right click and manage new get packages in the browse side just to search entity framework if you search here the first package microsoft entity framework core and this sql server and design the final one is tools these four packages we need to install so let me install one by one so first let me take this uh entity framework so the latest version is 6.02 but our application is 3.1 so let me take this 3.1 that's enough so one package installed let me install this sql server so we have completed the second package next i'm going to install this design okay the final one is tools so the package installation gets completed so one package actually we need to install in our startup project also the design package now we have added all required packages now let me generate the model so for that i'm coming to the tools you get package manager console okay so defaultly the startup project is loaded but we have the separate project for the database related things so i am choosing this repository layer here i am going to execute the scaffold command so if you see here here i'm passing the connection string after that the provider sql server finally i'm mentioning the model folder and the data annotation all the things i have mentioned this f is not required so this is the initial stage okay if you see here the model is generated in the repository layer project okay this is our db context so if you see here the connection string whatever the connection string we have provided in the scaffold command it gets added here but this is not the correct way already i mentioned in my previous videos we need to move everything in the app settings.json file so now this is the separate project here we don't have any app settings but in the start of project we have the app settings we can add in the startup project after that so after that we can inject to this project so let me explain everything in the detail first let me complete this robust layer here i'm going to add a new folder this is for the project so i'm going to give the name as master so we are going to generate this credit operation for employee tables so i am going to give the i'm going to create the class with employee name so in this class only we are going to write our initial logics okay default leads master we can change this into a model and make sure it should be a public and here we can create one constructor through the constructor we can inject our db context so now i am going to assign the value for context so this is all about we have done so now we can generate the functions for credit operations the first one is get all method so first one is table employee so so it's not required any parameters so it returning the list of data from the table of table employee so we need to use the tool list so let me include the namespace system.linq okay great now we have completed one function similar way we can complete for another operations so the next one is get by code so it requires one input the input is integer only so here after it will return only single object not any list so instead of list i am going to use faster default okay this get by code also done now let me create for remove here i am going to return one string only if its pass or fail so let me declare the string here so default value is empty after our completing our logic we can assign some values now there is no error here i am checking this imply not equal to null that means we have the record and we need to remove it for removing any record we can use table employee dot remove insert that we can pass the offset at the end we have to include the save changes and we need to assign value for the result parameter result equal to pass okay now we have done for the remove final one is save the save include insert and update just save basically the input is table employee only so this procedure is same first i am going to check whether we already have a value or not if value is there i need to update so let me include the code so the code actually we are not going to update other fields we are going to update so let me include name first the same way we have three more fields so the second one is email and third one is phone the final one is destination so now we have completed for any update operation so in case it's a new record so here also we are not required to mention this code because the code is auto generated one so now i added this name similar way i can include three fields also and fourth one is designation okay now we have the object so based on that we can complete the insert operation so let me use this context once again that table employee here i'm going to use this add keyword inside that i am going to pass this table at the end we need to save and return as fast so if required we can use this try catch also and then the catch part so in the real time in the catch side we can call any exception method we can capture the exception log okay that's it we have completed from our data access layer side so let me come to our startup project in the startup project we have only defaultly created controller the home controller we have the same way i'm going to create my controller so my controller name is employee so the controller gets generated let me create the view also so i'm going to choose this razor view so here this layout is required this is not a partial view so index name is sorry the view name is index that also fine so look like the view is generated now i am going to complete the changes in controller side so we have to complete all uh correct operation related from schwaltz so let me create one by one first one is for getall method let me include the table okay i need to include this namespace here using repository layer dot models okay great so here our object is stable employee list new employee here the method is get all method okay at the end we can return so this is returning the json result so for returning the json result we have the json option so we can pass it like this but still our employee is showing error because yes it's expecting this land dba context so here also i am going to create one constructor and let me declare this land db private read online and then db context so this is the context and here i need to pass it okay great this change is done so let me pass this db context here so the functionality gets completed so the very important thing uh we are not added this land db context in our services and also we not included our connection string in our app settings so we can complete these things first if you go here the upsettings.json first we need to include this connection string here you can create your own connection string after that you have to mention your connection string let me include my connection string here okay the app settings.json side changes are completed so let me close this one and i'm moving to the startup page so if you see in the services as of now there is no changes so i'm going to include my db context add gb context so the land db so the name space is not included as small so let me include first so it's belongs to repository layer dot models okay fine so use sql server so basically it's belongs to from namespace microsoft entity framework dot core okay let me try now yes use sql server here we need to pass the connection string so the connection string available in the configuration dot get connection string and our connection string name is okay actually it's we mentioned uh in our app settings okay constrain so the name whatever we mentioned we just need to include here also so this is done okay uh now in the controller side we have completed for this get all method the same way we can complete for other functionalities also so the next one is get by code so get my code initially the code string only so we can convert it through the ajax car everything comes in the string form it mostly get by code so in the real time we need to verify whether the value is coming or not believing myself i am not going to check any condition i am directly going to add everything ok this is done this get by code so we can move on the remove so the removal also procedure is same here it's returning the string only so method name is remove okay we have done for the remove let me move on the final one save so we have the object table employee so table and black so here our method name is save so whatever value is coming we can just to pass it here there is no additional logics are required so we have done our changes let me create one more file so we created a one view for employee but as i mentioned for the add screen i am going to have the bootstrap model pop up so the for the particular pop-up i am going to have one partial view so let me create in the shad folder i am having one folder name is master so inside the master i am going to create one partial view so it's not required the layout page and i'm choosing this this is a partial view my partial name is employee so i am included this underscore symbol also this is not a mandatory basically if you are creating any partial view we supposed to give this underscore for identifying this is the partial view okay the parts will be also created and so in the layout page only all the menus are coming if you see here so the home and the privacy was there instead of the privacy so we have the employee menu so we can include so an asp controller name also employee our default action method is index okay these all the basic changes as i mentioned so i split it into three parts first one is dot net core with the c sharp so this first part we completed let me run the application after that we can continue with an html and bootstrap design so the page is loaded if you see here this employee menu was there if i'm clicking here so there is no data just index is showing here after we can include our changes so the first page is our index page so whatever content is there we can remove and we can include our own design so in the dot not core application uh if you are using the version 3.1 the default template we have the bootstrap and everything we're not required to include the bootstrap manually it's already installed so we can use the existing thing so first i am going to use this duo if you are good with the designing part you can use your own way so this part i am splitting into two parts the first side i am having my add button so i am just using the anchor tag so the href is hash and i'm going to include the class the basic class is button and button primary this is all about button and this view i am going to have the table so we all know the html basic things in the table we have that t head and t body so this t body section we are going to generate dynamically in the header part we are going to give our static data the first one is code the last one is action action is for delete and edit okay we just added our table so if i'm refreshing okay actually we have done our changes in the html part basically in the mvc application if you are saved and refreshment the changes will be of reflected in our screen but in the dot node core basically it's not happened if required uh we have to do some changes actually we need to uh install this razer runtime compilation so let me do that changes also because otherwise we have to run the application for every time so in the dependency side let me go to the new get package so run time compilation so the first one is microsoft asp.net core dot mvc razer dot runtime compilation so we need to install the version 3.1 so look like our package get installed so we need to include the things in our services side also so in the services side we have to include this address runtime compilation so this is the thing we have to include now let me run the application here after we can make our changes and we can just refresh in the browser we can see see our changes so if you see here the initial page the button was there the next one is our table so i am going to add on break otherwise the screen is not good okay it's fine the next thing is when i clicking this add new button so the model popup should open and in the model pop-up we should have in our all the fields so now i'm going to create the bootstrap model pop-up for that let me search in the bootstrap model so in the first link the model bootstrap link so if you see the bootstrap documentation they have provided a number of controls and the pop-up related things you just come to this live demo and click here on sample mode popup is loaded in the bottom they have provided the complete html you just copy the whole complete html and come to our code so i already created one partial view so in the master okay just add here in our actual index view just to make the reference of our partial view so the parts will be available in the shad master folder uh and our partial name is employee okay so let me run the application once again so i think it's in running mode we can refresh it okay now if you see here the launch demo model was there the new button is coming so if i'm clicking here one new popup also coming so in the particular place if you see the three dots here only i'm going to add my decent related changes and i'm going to change this model into add bar edit in the model body i am going to have the class and another one is lg9 so my first input is for the code code and the class name is form control okay if i clicking here see the code and respected field also there the same way i am going to add all the fields two three and four okay okay the first field is uh text code basically this field is the disabled one because we are generating the code dynamically so the next field is name so i'm going to change the name is text name and that one is email let me mark this text email and fourth on this phone here also i'm going to change this your phone the final one is destination so basically this field is the select field so the class is common so the same form control okay see here so look like this model prop is looks fine so there are five fields and the destination we actually need to load the data okay so this is all about our design path let me move on this jquery validations and function making so this is our final part okay and also the one more thing uh this lands demo model button when i clicking this button only it's showing the popup basically so when i clicking this add new that changes also we can manage through our uh jquery for adding the jquery we already have the jquery uh but maybe it's not a latest version so i am going to include on jquery file so in the jquery.com if you go there so in the download side they have provided the url okay we can use this one so let me come to our application so this is our partial view it's not required we can include in our main view itself so script and the script type is text and javascript so it have more source in the source we can mention this url that's it okay same day so here i am going to write for document.editor function so so this method will call in the initial load if you are if you have some knowledge about jquery it's fine otherwise just to go through the jquery related topics then only will get some better idea let me give one a lit whether this function is calling or not that means our jquery is working or not i need to verify okay the alert is coming so that means our jquery part is working fine so let me implement all the functions one by one first let me start from our add new so here the function is create new okay let me create one function is create new and also more function clear all so the clear all i am going to clear all the fields because this one also required i will explain why so this is the first field the same way i am going to clear for all the fields so the second one is text name and the third one is email and the fourth one is phone so the final one is ddl destination i think i have provided like that only so let me check look in the select i'm not i added the id so let me add ddl destination okay that's fine and the one more thing so in the model pop-up but actually my model pop-up name is example model i am going to change this into employee model if i change in here the data target also i need to change i'm going to give an id button model okay great finally i am going to give display in the now slide on the create new method i am going to trigger this click from schwaltzy let me trigger click so whenever i am trying to create a new record i need to clear all the fields that also the planetary thing now i am refresh the screen uh there is no new button only the add new was there if i'm clicking the add new so our actual popup is loaded okay now we can write the functionality for save changes and also we can include the validations before that i need to load this uh destination it's very important one i think we not done anything for the destination even from the code side we have to do the changes it's not taking much time we can complete shortly get all destination okay this is table destination okay this is done so in the same way the controller also we can include the same method okay this is done the functionality side we have completed let me create the javascript function for loading the data into for loading the data into the select control so here we are going to have this ajax call so the jax call first parameter is type is first and the next one is url this is also very important one so the url is get all destination so it's available in the controller employee okay it's not required any data so in the data i'm going to have the empty data next one is success and the final one is error in the sexes we have the data so once the data is coming we have to verify whether it's null or not so not equal to null means we can take it basically this is the collection of data the initial loading time if there is any record i need to remove it basically in the select control we have the option so i need to remove first okay once it's added i need to add the default value so for adding the default value we can use this upon keyword so option okay here i can use the select and the default value is empty okay now once we have the data we can create the for each using this dot each so it will return key and value pair okay that's it so here we can generate our dynamic options so the value the first one is code here we have the name that's it so okay we can verify now so if i clicking here see the destination the all the records are loaded basically these datas are coming from the database only okay this is fine so now i am going to add the functionality for save and also for the validations so in the save button actually coming from this popup only so instead of having the button i am going to change this into the anchor tag okay fine so in the save i am going to write onclick written false now i am going to write the function for save okay let me write here so already we have the function for clearance so some problem is happening that's what the format is not in the proper way so anyway this is not the main issue so we can continue from shorting so first i am going to get all the values from the fields here i am getting the value for code the same way i can get all the controls so this one for name and the third one is email fourth one is phone the final one is destination now i'm going to add validation for this name i'm going to just try i'm going to check the if the name equal to empty i am going to change the border color of the text box for that i am going to including the css and bar the color is red okay in case if it's valid scenario i need to give the calories okay that's it and also let me declare one variable so this field actually for validation if it's not matched the validation i can make this is false okay after completing the validation if is proceed so here only we need to call the ajax method for the save from surety okay the ajax code already was there the same code we can copy okay here our function name is same this loop and everything is not required basically it's coming as the pass with the pass is positive scenario so then we can give the alert is saved successfully else we can give just failed okay this is we have done and the main thing is we need to pass the data so for this save from solid we are going to pass the data in object format so let me create an object first okay in the outside we can include all the fields first one is code so we can include this code the same way we can include four more fields so next one is name that one is phone next email at last destination okay great so this data we are going to process the input so now we can verify our save method okay the popup is loaded i'm trying to click this save so it's showing this red mark so i am going to give the name is ravi sharma and tested gmail.com phone number and the destination is angular developer if i click so it's saying saved successfully so as of now we not loaded any data in the listing so we already have the table so in the database side we can see the data after that we can load the data in our listing so in the table employee if you see the revision recent record so okay two records was there one is already unloaded so and one more record was there so let me truncate everything now let me try one new record so it's saved successfully okay the record was there so now the add form sort is completed now let me lower the data into the listing for loading this listing i am going to use the external plugin data table so the data table plugins so just search in the google jquery data table that's it the first one is okay so if you see here uh they have provided this css and js so we can include in our coding also so let me come to the documentation here i'm going to copy these two links so we are going to add everything in our index page so in the index face top of that i am going to include the css first and the js i am going to add in the bottom so basically it will create some conflict in our existing uh jquery file so i am going to declare one variable js with no conflict jquery dot no conflict so we can use this one instead of this dollar okay there we already loaded for destination the same way i am going to load for employee also so now load employee so this all the things not required but here we need to require array and here is get all so in the array i am going to push all the values first one is value dot code the next one is value dot name and that one is value dot email and fourth one is value dot phone the final one is value dot destination okay at last we have the action so i am going to add the empty thing okay if you see here now we have the data's in our array now let me complete the logic for the data table so for that i am going to add an id here after getting data in our array so the js thing be declared the same thing we can use dot data table so it has many features if required we can see in some other videos as of now i am trying to load the data that's it and also destroy true okay done let me call this method in our page load so if you see here there is no datas are loaded so but in the table actually we have the records let me come here so the method name is getall so we can queue asynchronous files okay great now the records are loaded but still if you see in the action side there is no buttons are added so we can include that logic also for that i am going to declare one button edit button first so this is all about the anchor tag but we are going to generate in the dynamic manner okay first one is as i mentioned this is for edit so any anchor tag basically have the hedgehog tag okay this is fine after adding the href we have to specify our on click function function edit here i am going to pass this look at the end we have to specify the class so first one is button nice to miss button primary the same way i am going to create one more button is for delete so let me change this one also delete and our class also danger at the end we required one hidden field hidden actually the tag is input only so the whatever key value we have that we can include in our hidden field finally we can use any function that is the end plan hdm code and value equal to so the name is code that's it at the end we can include everything in the action so let me add this hidden then edit button after that i am going to have some space at the end we can have the delete button okay instead of the empty we can include this one okay now see uh there are two buttons are coming at the same time one text box also coming uh because i'm not provided the type is hidden that's why it's coming so it will be removed okay great now we can write the formula for edit once this edit gets completed we can come for delete also so both are look like edit only so let me change song is for delete okay now i am going to create the new function for edit so this this is the element first we need to get actual code then only we can start our edit operation so our code equal to so we have the element the element means we are clicking the button so we have the button so we need to find the closest tr so this is the syntax now we are getting the current tr tag in the tr tag we are finding our id hdn code okay now we have the htm code now we need to get the value from the hidden field that's it okay now i am having this code here after i can call the ajax method that's it okay here our method name is get by code and it gets phone input code so let me pass the code and here after no for reach we need to just send the values so the clear side i just ascend empty value here i am going to assume the actual value that's it that is the end scenario there are five fields so many time be used so it's remembered in my mind name and email and the third one is phone the final one is destination okay creates all are coming so let me verify whether it's working or not okay so i've loaded the data but i need to open the popup also for opening the pop-up i can use this create new function so it will clear the existing records and also it will open the pop-up after that we can load the data that's it it makes our job little bit easy okay so you see here the records are loaded now i am changing into the angular developer okay they saved successfully so if you see here still it's showing the manager okay now it's changed into a developer actually the developer also the code name so exact name is angular developer so we can load that data also a little later so meanwhile i'm going to add one more record so reuben.com and it's the manager okay basically the record should be loaded whenever i am creating or saving any record so i need to call this method for any save operation okay fine now i am trying to edit this manager into technical team reader okay it's updated if you see here so the code is actually tester so that's what it's showing the tester so we can change this thing also so meanwhile i am going to implement this uh delete functionality so the delete also it's similar to our edit so let me copy this edit from survey after that we can do our changes here our method is to remove so i just to pass the data so basically it will come just to pass or not okay so if if so it's clearly deleted i just need to load the table that's it so before performing this operation i need to confirm the user do you want remove that's it if he's saying yes we can proceed continue that's it okay if i'm clicking here do you want to remove if i'm clicking okay it's automatically gets deleted but why it's showing this pop-up okay because i'm included is create new that's what okay this is removed that's fine so now look like we have completed all the functionalities we can have one quick demo so when i'm clicking this add new button the pop-up is loaded there is no data set now if i'm clicking here this bb added validation is for only the name field now i am going to include the fields reshap ratio point and rbrtin.com and the phone number is something we are giving some phone number and slowly is angular developer and i am trying to save the record so we are giving one smart alert message only so automatically the record are populated in our listing if i'm closing this popup and if you see here it's developer is loaded if i'm trying to edit i can change any value so instead of four i'm going to give this file after updating if you see so automatically it's updated here even for any save operation if you want close this pop-up also we can achieve for that we have the class is called close here so here only we completed our save functionality once we completed our save so we can trigger click that's it so so let me verify now okay editor if i'm clicking okay the automatically pop-up also gets closed so this is what we have implemented so as i mentioned in this video i am going to explain how we can call any stored procedure uh in the dotnet core entity framework so uh if you are using the previous version.net framework means whenever we are adding any stored procedure it will so it will generate the model file uh but in the dotnet core we don't have the option so we have to generate our models in the one way after that we can execute our store procedure providing the stored procedure name so let me explain that also i'm already have one what is called the stored procedure is p underscore depends okay fine so this is my store procedure name so yeah so this is nothing but uh basically it will return the data from our table online so instead of returning actual destination code it will return the destination name that is the only thing uh be changed so let me load the listing data from the store procedure okay for that i am coming to the uh our database psi code side so in the github method we are directly loaded the data so instead of that i'm going to use one method first i'm going to include one namespace microsoft entityframework.com okay great so after that list table employee list called context.table employee from sql row here we need to execute our stored procedure at last we need to give to list so this function basically execute the stored procedure so already we mentioned a table employs the model so based on that it will return the data that is what our end offset so let me return this one so we can run our application and verify how actually it's coming okay if you see here uh now the destination is technical team lead and the angular developer name is coming if i'm trying to edit i am trying to change this is the manager okay it's updated into manager now i'm going to change this is the angular developer so the actual name is coming because the data are now coming from our stored procedure that's it so in this way we can run any store procedure or else we have one more option uh if you are not returning any value you want just execute on stored procedure like doing some insert kind of operations means we have the option i am just explaining if record you how to use that's it so context dot database dot execute sql command okay using this query uh you can queue any command also otherwise even the store procedure also you can pass in the string format it will execute and it will return the data so this is all about uh using store procedure in dot net core and entity framework and also we have completed our current operations using this ajax call still if you have any doubts or clarifications please post in our comment box and also please don't forget to subscribe my channel if you like this video like and share to your friends thank you thanks for watching

Channel: Nihira Techiees

Views: 14,549

Keywords: ASP.NET CORE MVC CRUD Operations with Entity Framework, ASP.NET CORE MVC CRUD Operations, How to update entity framework in .NET Core, .NET CORE tutorial, Create MVC application using .NET Core, dot net core mvc curd operations with entity frame work, .NET Core MVC crud using ajax, jquery validations in .net core, how to install jquery plugin in .NET Core MVC

Id: 6gpRM8yS9IE

Length: 65min 32sec (3932 seconds)

Published: Fri Feb 11 2022