Web API CRUD Operations Using Asp Net MVC and Entity Framework

keep the bow of this video tutorial in this video we will implement curve operations using the API and SP coordinate MVC application this is the final output of this video tutorial application name will be M going register all of the employees at a krembo a table will be listed like this if you want to add new embro you can click on this create new button here [Music] click on submit so here we have added new record for jason smith success message can be seen here if you want to modify the existing record you can click on this edit button here I will change it as Jason John's click on submit so here we have updated your code success message can be seen here updated circle spirit if you want to delete an excimer code you can click on the delete button here now we have to confirm this operation click on OK so here we have deleted record circles message can be seen here ligature successfully I am sure we will find this tutorial helpful for your upcoming project so peace watch till the end of this video tutorial what's up YouTube welcome to dotnet mode in this video we will discuss how to implement coke operations in asp.net web api using entity framework with an help of MVC projects so we are going to create espied or net web API code sample project from scratch before sudden this video tutorial I would like to ask you a favor if you found this video helpful please thumbs up this video and for more awesome videos like this please please subscribe to this channel dotnet move without further adieu let's get started first of all we have to create a Web API project for that click on new project here and select web under issue C sharp then select asp.net web application I will name this solution as Web API in MVC then I will name this project as work API and select the location where you want to save this application then click on OK first of all we will create web api power so select the web api template then keep other options as it is click on okay so here we have a brand new asp.net web api project apart from this we have to create one more project for MVC application for that why click on solution then add new project select SP door network application then I will name this project as MVC click on OK select MVC template keep other options as it is click on OK so under this solution with API in MVC we have two projects Web API and MVC project in a real application Web API can be consumed from MVC project SP web form application desktop application mobile application angularjs applications etc without getting into the further development of these two applications we have to create the database for this application this is my management studio first of all we have to create a database right click on databases then new database I will name this database as code DB click on OK so here you can see the newly created database code DB inside that we have to create a tab I click on tables the new tab so in this application we are going to deal with employee details first column will be employee ID it's of the type integer then we have name as worker 50 then we have position as worker 50 age as individual finally we have salary salary as integer I want to set this employee ID as the primary key for this table right click on it and set primary key I want the same column employee ID as the identity column for this table so expand column properties then set identity specification to yes so we don't want to insert values into this column SQL Server will take care of that now we want to save this table for that press ctrl s or you can click on the Save button here I will name this table as employee click on OK newly created doubles can be seen under this tablet's load as employee now back to the application inside this API project we will add entity model for this tab you'll employee for that right click on models then add new item select data from the left panel then select radio dotnet entity data model I will name this model as DB models click on add select generate from database click on next click on new collection here we need to provide the server name and database name for me it is local backward slash SQL D 2012 from this problem we will select the database code dB click on OK after creating this entity model there will be a class with this name code DB entities we will be creating an object of this class in order to interact with the database so I want to edit this class name as DB model click on next click on next in this step we have to select the database objects that we need to include in our entity model so I will select the employee table then click on finish so here we created the energy model DB models use the diagrammatic representation of employee table inside the DB models then you can see DB model dot tiki and said that as you can see F file employee gorgeous inside that we have a class-m GUI you will be using this class as a model for this application now we can add Web API controller into this project for that let me build this solution build is successful now we can add a controller right click on controllers folder then add controller I will select Web API to controller with actions you see entity framework click on and I will end this controller as employee then I will select the model class assembly then that a context class will be DB model class so this will create embroider and roll off with work actions get post put and delete using model class employee and VB context class DB model click on add so here we created employ controller inside that you can see VOC action methods first of all we have get employees method it will retain all of the records from employee table then get employee it will retrieve the details of a particular employee with given ID after that we have put employee it can be used for update operation after that we have post employee it can be used for adding new a course into employee tab finally we have delete method it can be used to delete error code from the employee tab reducing a given ID in case of put and post work action method we don't need to do this model validation that can be done in MVC project so let me get rid of this model state validation here and from post employee also now we have to win this application in order to test the working of this move methods for that let me make this verb API project as startup project click on set as startup project before testing the working of these group methods we have to add some test data into employ table let me switch to management studio here we have the sequel query to insert few records into the table employee click on execute so here we added three records into my table now let me run this application for then hold control then press f5 so this is how the application looks like now we need to show results from these methods inside the browser before that if you are new to web api projects you have to understand the URL such but for that expand app start then web api conflict OCS here you can see the default route config did you start with API then controller then optional parameter ID so if we want to call this method get em voice we can pass it you are like this forward slash API forward slash employee it will rotate all of the records from the employee table then we have debt employee so it will retrieve the details of given ID now let me check that here forward slash API /m boy so we have video because of all employees inside employee table if you want to rotate details of the Embree with ID 1 you can pass the ID here forward slash 1 so here we have details of employ given employee ID one remaining verb methods can be tested using this MVC project so it's time to expand the MVC project here let me expand a mythic project and I am going to add a new controller for that right click on controllers then add controller I will select MVC 5 controller empty then click on add I will name this controller as my controller click on add so here we have the employ controller inside that you can see the default index action that we can choose things we have added to employ controllers one is in MVC posit another one is in Web API project now we need to create the embroidery model some of you may think why do we need to create the embroidery mode of us in this MVC project since we have created the am going model fast in this Web API we can add a reference inside this MVC for this project and we can access model as M going but it won't work in real applications most of the case these two a points will be in different locations so you have to create separate model for the MVC project so I am going to add a new model class here quietly 1 models then add class I will name this class as MVP employee model click on add and I will copy properties from this Umbreon class inside web api copying and pasting here here we have the index action method using this we will embrace from the embroidery tab I can still move this HTTP method inside web api project get employee first of all I will add a new service in this section with it quietly till then a view keep the view name as it is index then select M blade as list and I will select the model class as MVC Embree model we do not want to select data core next class and I am going to use the default layout page click on add certainly have the index view created by the MVC scaffolding mechanism we have to end some of these HTML elements here that we can do after consuming HTTP method get employees inside with PPA project in order to consume HTTP method from Web API projects we have to install the VPN client inside this MVC project for that I click on deposit then click on manage and you get packages search for with the API client so I am going to install this first I jump Microsoft edge people Network API to point to climb libraries click on install installation is successfully let me close this package manager in order to consume in order to call Web API message inside Burnette for that we have to create an object of HTTP client class but it is recommended to instantiate one and we use the object throughout the life of an application if you are going to create HTTP client object for each call request will access the number of sockets available in heavy loads so this will result in socket accept errors so I am going to create a public static clause inside that will create a static httpclient object right click on project then add class I will name this class as global variables I will set this class as static los chatted class and then I am going to create an object of HTTP client public static HTTP client for that we have to import the namespace system dot net dot HTTP I will name the object as Web API client API client is equal to new HTTP client so I am going to instantiate the HTTP client object inside the constructor of this class global variables first of all I will set the base address for that you can do this dot base naturally people too so here we have to pass the base URL for the baby I posit for that we can to this new URI in aerial application URL will be something like this HTTP example.com four slash ABI whole / but in this case we have to pass the base address for this application in order to find the base UI for this application right click then properties go to web section then copy this project URL for IES and we basing this example domain here that's it after that we have to set the default liquid settlers first of all I will clear the Pico Sabathia so baby i dot default request service dot clear now I will set media type as this and so that we can do this to be a P I client dot default Prakash at the store except dot at new media type with quality cutter value for that we have to import this namespace which I'm got net dot HTTP headers inside that we will pass behavior application for slash data now we can use this HTTP client object inside the MVC controller so here we have the MVC controller employee first of all I will create a universe collection of NBC employee model I am numerable of MVC term relief model for that we have to import this namespace MPC dot model I will name this object as EMP list now we have to call this get employees method inside web api project for that we can do this HTTP response method for that we have to impose this place based system dotnet dot HTTP I will name this object as response now we need to call this method get' MgO is using this global variable Web API client subdivision to this global variables dot Web API client taught here we have a get HTTP method so we have to call this function get at least inside that we have to pass the remaining URL from baseball so in this case it will be M doing dot twisted inside this response object we have to result from this the babyís core and we have to convert that users into ienumerable collection for that we can do this EMP list equal to response dot convent breed and I think now we need to ask the ienumerable type here I a numeral tox MVC temporary model MVC employee model and Chris such now we can pass this employ distinctive index view here so now we need to run this application then we run this application both of these projects MVC project and Web API project should be in running status so I am going to change the default startup configuration for this solution for that right local solution then go to property and I visited multiple startup projects then I will set start as direction for these two products click on apply click on OK in order to run this application hold control the press f5 here we have my small errors static classes cannot have instance constructed so I am going to set this constructor as static we run this application again for conversion process file as you can see here two products are running one is MVC project another one is way behind now we need to check which one is MVC boarded for that what will be solution them right click on the MVP for test then go to properties then go to web section here you can see URL for the IES URL ending with 29 is for MVC positive so this one is for MVC project and this one is for Web API I may close this one and we have to navigate into my controller so here we have the Employee List from convertible now we need to modify this index view as the last layout page and we'll add some people type into these views first of all I will edit the layout page with only this navigation menu here so I will remove that here [Music] now I want to change this application name as employer register that we can do here inside the action link I will set it as my register action name is index then controller name will be M glowy I want to change this photo I'll set it as broke API co-operation in MVS deposit I want to set default controller as employee for that expand head start then go to the old config file here and replace this home with my employee build the solution reload this page so the output is fine now we need to modify the index view for that I have some predefined cases so I will paste that here inside this side dot CSS file here selecting all of them and pasted here so this includes all of the CSS for this application first of all I will remove this edge to header from here instead of that I will add a line break here next we will style discrete new hyperlink using bootstrap pieces and phone also my turn so we have to replace this fashion link with a hyperlink okay h EF is equal to h u RI dot action we have to create a view for create action it will be add or edit inside employee control of employee hyperlink text will be create new and I will say this here this class from bootstrap class is equal to VTN then VT then default in order to work with for our some icons we have to add reference for this phone or some stat sheet so I will add the - each reference incited layout page here and we have to select a icon for this create new button let me type create Museo so I will select this one purpose in order to add the icon I will add a tag here class is equal to 4 space bar plus let me close this I tagged here now let me add one more class from your shop into this double double strip tavern - strip and I will engross this TR element inside at t head task T head class will be Sabol - heading I will put this t hat cost and after the 3 our element here in this table we don't want this employee ID column so I am going to remove the column from t hat and body for now I want to set last column heading as actions so we can do that here actions let me save this and reload this page so this is how the index you look like next we are going to do in plate operation these three was our added photos purpose we will Tran gauge the my table and we can add new records from MVC project itself so we can do this truncate table then tab name setting papaji's from here and paste in here selecting the line click on execute so right now the table is empty if I reload this page tab will be empty now back to wishes to do so here we are in M break and color now I am going to add an action method add or edit for insert and update operations public action results add 480 we will return a view from this action with the return with you let me copy the action master and pasting below that this is of the type HTTP GET and this will be multi type HTTP POST this HTTP GET method has a parameter int ID with default value 0 now we will pass an object of this employee mana cost into this view new MVP embroil model now we need to add a V for this add or edit action method right click here then add view keep the view name as it is add already we will design to you from scratch so I will select empty template then select the layout page click on add so so far we have to declare the model glass add model and will copy the name space from here MVC broad models paste in here models dot MVP embroil model so suppose I will start with a deep elementary of class will be form body form body inside that we can define this for me of using statement HTML tour region form first of all I will add edit unfilled HTML dot hidden for you can see from my Eddie model attached model talk my ID for remaining properties we will add lab a textbox pair inside a div element div class will be form group Sosa for level HTML dot level 4 level 4 model such that model dot name in order to add a text box we can do this type HTML dot 82 for model such that model dot needs finally we have to add a validation control for this property name for that add HTML dot validation message for modal model dot unique like this we have to add the more label textbox pairs four remain three properties so let me copy this from here and pacing below that three times changing name to position then age finally salary one node this element for submit button this class will be formed through input type will be submerged we don't need this name property here where they will be submit and we have to add the cost VG n then button one more button so we set operation type will be research valuing it be research now we can run this application before that let me pick distribution after that click on this create new button here so this is how the add or edit view looks like so these ties are added inside side birthday this file now I am going to set this name property at the mandatory for this form then I will add the required attribute here liquid for that we have to import this namespace system dot component model dot that annotations and we can set the error message here error message is equal to this field is pretty weird now we need to add their great validation script files inside its add or edit view for that I am going to use the script section inside layout page here scripts that we copied this section may view and we can reuse here a detection scripts inside this we have to pause the bundle for jQuery validation that you can see here inside app start folder you can see bundle config dot yes so here we have the bundle for jQuery validation files let me copy this bundle name from here and we can we use here at scripts dot print them inside that we have to pass the bundle name let me build this solution we load this page now I am going to submit this form with our end remanded excuse me click on submit so here you can see the validation error this field it's required these types are included in the side-door CSS file that us from this form will be submitted to this HTTP first action method add already so inside this action method we need to do the insert operation first of all I will add an object of this model MVC employee model here at EMP in order to implement this insert operation will be calling HTTP method from Web API project so here we have the embroiderer inside that we have post HTTP method post employee right here so we will be calling this HTTP method from this post action to insert new reports so that we can do this HTTP response message as response is equal to global variables dot Web API client dot o as this is nothing inside that we have to pass the after based orders it will be M Dewey and we have to pass the model object EMP here dot reset so this Web API call will insert a new record into my table and we will store the core results inside this response object after insert operation we will redirect to index action methods redirect to actions index tree let me build this solution now I am going to end a new employee to employee register click on submit so here we are redirected to index action method so here you can see the last into the record 42 when user do some operations that I can click update NDB we have to show some notification messages night things that is really just as easily updated successfully for that I am going to add a new plug-in into this application electrified space so that white click on this MVC project right here then click on manage and you get packages search for alert is why this alert is why this this is the plug-in identify there I am going to install this one click on accept installation is successful we need to add the reference for this plug-in inside the layout page for then let me open the layout page here and we have to add you see a preference for this plug-in that you can see here Electrify dot min door CSS now we need to select one team stash it from this team photo I will select the default one apart from that you can see bootstrap and semantic UI so I'm going to add this default binned or CSS here and we need to add the script reference here so that you can find inside split photo I like to Phi dot min DOJ's let me track here from the employ controller we will pass with the success rate inside term data term data which skis the Christmas with success with it is equal to save successfully in order to show these substances I will add some script file inside the index view here I've sectioned quick I will use the ready function in order to wait MVC term data he's quick you can do this such a message is equal to at M data and inside that we have to pass the key in this case it is sepsis method if success message is not empty we will show the notification for there we can do this identified dot success inside that we have to pass this purpose with success message now let me pick this solution and I'm going to add one more employee so then click on this create new button here a consummate so here you can see this occurrence a safe sleep between box next we will do the update operation using these actions column so we have to edit action being inside the index you we don't need this details hyperlink that we will move that from here instead of action link I will loot lead CMS hyper link href sequel to Hur a dot action action name will be air for baby then control name will be M doing and finally we have to pass the items mean I need to pull two I turn dot employee ID K you can see that we are hydrating to the am blowing collection so you can watch DP employee ID using these for each variable item Pia then I will start the class from bootstrap we DN space BTW in default let me close this beside that we have to set the text as edit now I am going to take the great phone also my current into this button for that into this I tag then plant so edit I will use the power pentalpha space for fences let me save this and reload this page if you settle it on this edit button it will reach up to this app already action asset and we have passed employee ID inside this parameter i and user click on this edit button we have to return a form like this by filling duties of selected employee for that we can do this if ID is equal to 0 then we will return an empty form and we will return air form by filling details of selected employee so that I am going to call the TTT method inside this Web API project get employee using this ice so this will be the HTTP method that we are going to call from the controller but then let me copy this call from here and pasting here instead of this court both as station nothing we will call get Asik and we need to pass this QR and outer beta test so we have to pass the ID here for slash then ID constraint so inside this response we have the result from this Court you have to convert that into MVC my model so we can do this return view and we have to convert this response into MVC every model that I'm to this response book and then read as I think we have to pass type in your MVP employee model and cause the function store Quizlet let me build this solution now inside this application I am going to click on this edit button here so here we have before filled with digits of selected employ people with when user click on the submit button this thatís will be posted to the same action I've already of the type HTTP POST inside this we have to update the code inside this form we have a hidden cute for Embree ID that you can see inside this air or a DQ hidden seed for employee ID for insect or patient is hidden field value will be zero or uptake abortion this pin has a value for the selected employee ID inside this post action we will do the insert or update operation based on the employee ID gives us MP dot e MP dot employee ID e is equal to see you then weave into this create operation and they have to be update operations so update operation BBD calling this HTTP method employee September II so then let me copy these two lines from here we can edit that here hoping and even here instead of this function we have two for put as Jason nothing here we need to pass the employee ID /and concatenating the employee ID here dot employee ID and we have to set the settle hostage as updated successfully that will be the solution now I'm going to change this Jason Smith as Jason Jones click on submit that secure you can see the surfaces updated successfully Jason Smith these are better - Jason Jones next we will do the delete operation for that I am going to get hyperlink for delete back to the index view I am going to complete this hyperlink for edit and pasting here for delete instead of edit we have to delete then far I can be far space for trash then you don't need this HR of Patrick here instead of that I am going to add all peculiar only people to delete we will for add our could function delete inside that I will pass the employee ID item dot employee ID now we have to define this JavaScript function here function which I named will do the meet and we have a parameter ID when you say bleep on this delete button we can from by asking our usual dignity support because it is so cata for that I am going to use identifying plugging that we have added into this MPC pocket for more information about elective ideas you can go to this website electrified acecomm so here we have the documentation for the electric yjs please go to that for more information about this plugin now back to the project I am going to show control models from the alerta footage that we can do this identify dot conform first parameter will be the title of confirm model pop-up so I will give it as 1280 i/o operations second parameter will be dependent of the control box so we can do this are you sure to delete this truck oh sorry record third parameter will be a function this function will be called when user confirm this operation so inside this function will be called a delete action method that we have to create inside this employee controller we can do this window dot location dot itself is equal to at URL tour action we will do this vivid operation with an action we need to eat in control of name will be employee after that we have to forget this ideal zo then fourth parameter fourth parameter will be a function it will be called when you saw cancel this operation in the case we don't have to do anything so I will keep it as not sorry window dot location now back to the my controller if we need to implement the DD action method public action result section result action name will be deduced and we have a parameter inch ice inside that we will call this Web API method delete last method till it employee in order to cause the delete work method from MVC pot that we can call the delete method so I will copy this line from here and pasting here I'm going to replace this function with delete I think you know need to pass this PNP object here instead of that we have to own gadget employee ID leading to this URL I do to string finally I will set the term that as a Christmas is to deleted successfully deleted successfully after all way back to the action redirect to index session you don't want to type it here again it will copy this and paste here let me build the solution reload this page so you can simply update delete button I'm going to delete this second record for dedicated on the delete button here so here we have the conform box from elyda phytase click on ok so it is deleted deleted successfully message can be seen here and we have refreshed this tempo in this year that's it guys in the tutorial we have discussed how to integrate with ABI and SD donut MVC process for core operations if you found this helpful please thumbs up this video and for more hours of videos like this please subscribe to this channel god admob you can download this project source code from the link given below in video description please like and share this video with your friends and colleagues so that they can benefit from instil a nice day bye

Channel: CodAffection

Views: 262,116

Keywords: CRUD Operations Usin Web API and Asp.Net MVC, Asp.Net Web API CRUD Operations, Asp.Net Web API Beginners Tutorial, web api - insert update delete, web api crud using entity framework, web api in asp.net mvc, consume web api from asp.net mvc project, web api - get post put and delete example, crud operation using web api and mvc5, integrate asp.net mvc and web api, using SQL Server Database, Using Sample Project, CodAffection

Id: iublAXAm8HQ

Length: 45min 54sec (2754 seconds)

Published: Thu Aug 17 2017