jQuery Ajax In Asp.Net MVC - CRUD Operations Using JSON

cube demo of this video tutorial this is a step-by-step tutorial to discuss all you need to know about daiquiri Ajax in high speed or net MVC with SQL Server this is the final output of this tutorial and espied on an MVC application inside that we have implemented operations like insert update and delete this application deals with the employee informations you can add new employee like this click on submit so here we can see the notifications submitted successfully Julie had a record can be seen here promo - if you want to edit this record click on this pencil icon here then it will show the selected employee details in this tab now I'm going to update this name updated click on submit so here you can see the updated name if you want to delete this record click on delete icon here and confirm the operation so the quote is deleted so all of these operations are implemented using jQuery AJAX apart from that we have discussed how to use bootstrap tap controller then check on it at a table you'll begin notify J as plug-in how to show loading spinner or loading email during jaggery attacks post operation I am sure you will find this tutorial helpful for your upcoming projects so please watch till the end of this video tutorial what's up YouTube welcome to dotnet mob in this video we will discuss how to use the Ocoee attacks in asp.net MVC application using an example with operations before sad in 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 be subscribed to this channel dotnet mob without further adieu let's get started first of all we have to create a nice pedo on an MVC application for then here we have my Visual Studio 2013 for so for click on new project here then select whoop and of issue C sharp then select asp.net application the name your application here I will name it as jQuery AJAX in asp.net MVC application then select the location where you want to save this application then click on OK select MVC template keep other options as it is click on OK so here we have a brand new asp.net MVC application first of all I am going to remove unwanted and related views and model classes so I will select these two controllers account controller and home controller then right click then click on delete click on OK do the same for model and view folder before continuing with this project we have to create database for this application so next we are going to create a database for this application for that I will be using my management studio here so here we have connected to SQL Server instance first of all we have to create a database for that you can right click on this database here then click on new database here we can name our database I will name it as daiquiri Ajax DB click on OK you will create the database can be seen here inside the database I am going to create a new tablet for that right-click on tables the new table here we need to list our columns first column will be employee ID so inside this table we are going to store duties of an employee employee ID will be of the type in detail after then we have named column it will be of the type Walker 50 then we have position as worker 50 and we have office has worker 50 salary it's off the type in the job now we have the last column image path it's of the type Walker 500 now I want to set this employee ID as the primary key for the table then I am going to set the same column employee ID as the identity column for the table so select the column then go to column properties then expand this identity specification here and then set is identity as yes so we don't want to insert values into employee ID SQL Server will take care of that we start from 1 and increment it by 1 upon new recording session in order to save this tab where you can use the shortcut control s or you can click on the Save button here I will name this table as employee click on OK newly created table can be seen under these tabs note here next we are going to add entity model for the database that we have just created so back to wish you studio here then right click on models photo then add new item then select data from the left panel then select a B or dotnet entity data model I will name this entity model as DB models click on add select delete from database and click on next click on new connection in this window we have to provide this give server connection and database for me it is local backward slash SQL e 2000 pooled then from this prop down I will select the database jQuery AJAX PB click on OK after creating this entity model there will be a class with this name and we have to create an object of this class not in that database so I am going to change this class name as DB model click on next in this step we have to select the database objects that we need to include in entity model so I will sell this table employee table then click on finish so here we have created the entity model for the database this is the diagrammatic representation of Apple employee here inside the entity model there you can see a DB model got titi inside that you can see a file my God's ears inside that we have a class employee we will be using this class as a model for this MVC application next we will add an MVC controller into this project and an Amissah controller for that you can right click on controllers folder here then add controller the numbers select this item a missive fat controller empty click on add I will name this controller as employee click on add so here we have the embryo and trolla inside that you can see the default index action now we want to make this my control as the default country inside this application for that expand abstract then open route config courses file then you have to replace this home with employee now back to employ controller now we are going to add a view for this index action for that right click here then add view keep the view name as it is index then empty template check layout page click on add so here we have created the index view for this view we'll be using a default layout page in MVC applications inside this shared folder you can see the layout page here underscore layout dot CSS HTML now let me run this application for the end hold ctrl and press f5 so this is how the index view looks like only this h2 tag is from the index few here this one and remaining part of this page is from the default layout page here now I want to remove this navigation menu from this application I want to check this application name as embroil register for that you can do inside this layout page here I am going to remove these navigation menu from here and changing application name as employee register my register and I want to change this link here actually name will be indexed and controller name will be employee employee let me say this I am rewrote this page here so here we have remove all of the default navigation menu and here we have changed the application name as embroil register and i want to change this photo as jQuery AJAX MVC code operations so that we can do here they're clearly at Zach's SB dotnet MVC who operations let me save this and reload the spaceship all set now again start with index view now we will add bootstrap top controller into this application for that I will remove this edge to header from here and I will add UL element here class is equal to now then now space nav - tabs inside this we have to add Ally element for each tab so in total we have two tabs so I will add two Li element here be copied is and pasting below that and first up will be the active tab so I will said this is class active for the first Ally element inside this we have to add anger tag and I will set the data - toggle is equal to now inside this header tag we can specify the tab titled so I will set it as few odd and let me copy this anchor tag from here and pasting inside the second element now let me change the tab title as pad new let me save this and reload this page here so here we have two tabs view or and add you now we need to add can then for these two tabs for that I will add an extra live element here do class is equal to - content inside this we can add two deep element for these two tabs so for still the class is equal to tab pane then we will add the class faith then space in so this will add afraid in effect when we select a tap then we have to add cos active since this is the content of active tab inside this bib we can specify the content that we want to display inside this tab so let me type tab 1 content and let me copy this and placing below that let me remove this active tab from here and I will set this as tab to kundan now let me save this and reload this page now if I change the tab you can see that content of tab is not changing in order to change the content based on the selected tab we can do this first of all we will add an ID element for the tab content div ID is equal to first tab first tab then I will set the ID for second tab as second tab and now we can add the HR of element for this anchor tag right here so I will said this kundan as deacon done for this tab and I will set the arm each hour of element for the second tab has second the second tab let me save this and reload this page here now if I select the add new tab you can see that the content is changing tab to content now if we go back to the old tab you can see that tab content is changing now we will add few CSS rules for this tab for that say we have is tied sheet inside content folder we have a stylesheet side-door CSS this stylesheet is reference inside the layout page here you can see the arm content bundle forward slash hisses if you go to this bundle configured says here you can see the bundle content or CSS here we have specified these - each side of CSS inside this side dot CSS file we have some defaults it's a soos and now we can add few CSS for this tab also first of all we have to add some margin for this tab control so we can do this you l dot nav dot now - tabs and we can specify V margin here now we can specify the margin here margin is equal to 10 px for top and bottom and 0px for left-hand right let me save this and we know this page here now we have added 10px before this tab control and 10px after this top canto now we will start this tab title here for there let me paste few CSS or Co so this will add background color and text color for cap which is not selected and this will add top border for the selected tab title let me save this and reload this page now you can see that selected tab got a top border and for non selected tab we have added a background and X column now if I change the active tab to add new you can see these - they're also now first of all we will implement the operation view or so inside this view or tab we will show all of the employees that we have added into employee tab so back to wishes to you here now Ambro a contour here we are going to add a action method public action result action to self do you all so from this view we will return all of the employees so I am going to add one more function here so I am going to add one more function here it will retain ienumerable collection of employee employee we have to use this namespace here then I will name this function as get all employees get all employees inside that we can add using statement as a resource we will use the DB models object DB model as DB is equal to new DB model and here we return all of the employees with their DB dot employees to list and it will convert a list in to employ list now inside this view or action we will return a view and we will pass that us from this function and we can call the function here get all and voice now we need to create a view for this view all action method right click here then add view keep the view name as it is then select list embed from this drop-down and I will set the model class as employee click on add so here we have the view we don't need a layout page for this view so I was said layout is equal to null here now we will show this view inside this first tab as tab won't condemn for that back to index view and I want to change this tap one condom has at HTML dot action so this will render the action the world view or now let me build this solution and reload this page let's see here we have rented view all action myself now I'm going to remove this h2 header from here and I want to remove this hyperlink for create new and we will add few more classes from bootstrap table - stripped then tab will condensed let me save this and reload this page right here so here we have added embroil is we don't want to show this image path column here so I will remove that image path from here and from here let me say this and reload this page for now we don't have any employee inside employ devil now we have to add new employees into employ double using this add new tab right here so let's implement insert operation in this application for that I am going to add two action method here update action result or headed let me copy this and paste it below that I will mark the second one as HTTP POST and first one will be HTTP GET by default and we have a parameter for this action method in ID is equal to zero and from this we will return a view view let me copy this line and pasting inside the post action method in order to design this add or edit view we'll be using these motor class-m go here inside the model for us you can see that if we have employee ID name position of his salary and image path I got a lot of requests asking how to upload file using jQuery AJAX in the asp.net MVC application so that's why I have added image into this application here in order to work with files in SP road and MVC application we will use the property HTTP POST at file base so let me add a property of the type HTTP POST file base in order to use this time we have to use the namespace system dot map so I will add the special using system dot 12 and I want to name this property as image upload now we need to add north map and property here because this property is not the inside our tablet employ so we need to add the attribute dot map for that we have to use the namespace system load component model dot add a notations dot schema in order to save uploaded images into this application we need to add a folder inside this project so right click on project then add new folder I will name this folder as AB files inside the folder I will add a folder images I click on it add new folder images now inside this folder I am going to add a default image for that by click on it then add existing item then I will select an image from my desktop here default dot PNG click on add so here we have added the image default dot PNG now inside this model class employee we will add a constructor to set the milady path of this default image here so we can add the constructor like this public employee image path is equal to tiles symbol then app files then images then default dot PNG so inside this add or edit action Marcel I will declare an object of my model employee as EMP is equal to new employee and we will pass this object into the view now we need to create a view for this add or edit action method so right click here then add view keep the view name as it is add or edit and we will select the tumbly Eddie and we have to set the model class as employee click on add you don't need a layout for this view so I said layout is equal to not now we can render this ad already action method inside the tap controller so I can do this let me remove this content at HTML dot action and or ad now let me build this solution we load this page now let me check the add new tab so here we can see the ad already that is created by this CAF folding mechanism now we can customize this add or edit view during that time I will set this second tab as active so we can remove this active tab from here and we'll add the active tab here and we will remove this CSS class from here and we will add the active class here let me save this and reload this page so by default second tab will be selected now I am going to remove these headers from here so go to the add or edit view and we can remove this h2 tag from your hand I will remove this as for and it's our element here now we can remove this back to least hyperlink so I will remove this from here saving and reloading this page now I am going to split this form into two equal parts using bootstrap first of all I will add a div for row so we can do this div class is equal to row and I will cross this div after form horizontal div so we can place the give cross here and in order to split this form into two equal parts I will use the class called md6 so we can do this do class is equal to call - MD - 6 and I will close the deal after salary text boxes and in the next in the second half we will keep the image upload controls so do class is equal to call em d6 and I'm going to move this therefore submit buttons into the force house so let me cut this day from here and pissing inside the first half let me save this and reload this page here now I am going to replace this image path text box with image uploader and an EMG control to show the selected image preview so we can do this first of all I will add an IMG control IMG then SRC is equal to at URL dot content then we will pass the image path here model dot image path now we need to add a margin of 10px from all sides so I will add the attribute style here is equal to margin is equal to 10px then we can set the height and width of the control height is equal to 200 pixel and width is equal to 200 pixel finally I will give an ID here is equal to image preview and we can close the element here next we need to add a file uploader so we can add the input element here of the type file then we have name attribute name attribute should be same as the property name that we have in our model class it should be binded during the post operation so we will bind this file uploader with this property image uploader of the type HTTP POST at firebase let me copy this image upload from here and we can paste the name here you don't have any value here so I will remove this then we can set the accept a table so using this attribute we can rustic the image extensions for now we will allow only JPEG and PNG measure so we can do this image /j pack then comma image /p ng let me save this reload this page so here we have the IMG ctrl and then we have the file uploader next we are going to select an image for upload so click on this choose file button and I will select this one so when we select an image for upload we need to show this selected image preview inside this IMG control for that we will be adding on change even inside this file uploader so next we will add a script file for jQuery AJAX code operation apart from there we will keep the functions or general functions for the application like showing preview of selected image for that I am going to add a script file inside the folder scripts I click on the folder scripts then add JavaScript file I will name this file as scripts click on OK and I will add this script file reference inside the layout page your layout and I'm going to drag reference for this script file here let me drag the script file here so here we have added the your friends for this script file that we have just created so inside this file will be yd JavaScript functions for jQuery AJAX code operation and general JavaScript functions in this case I am going to copy/paste the function for showing preview of selected image here this is the function show image preview in this case we have to pass the file upload or as the image uploader parameter and we have to pass the IMG control as preview image here so I'm going to add the on change even here on change is equal to let me copy the function name show image preview first parameter will be the file upload or itself so I will pass the this parameter here then we need to pass this object IMG control here for that we can do this document dot get element by ID and we need to pass the ID here image preview first of all we will check whether we have an image for upload or not if we have an image we will read the uploaded image and we will set the IMG attribute SRC as the uploaded image let me save this project reload this page now I am going to select an image click on choose file now I will select this phone so here is the preview of selected image now we need to change this labelled text as image instead of image path so we can do this inside the model class here so we will add the attribute display name here display name for that we have to import this namespace some dot component model inside that we can pass the name here so I will set it as image now build this project reload this page so label text is changed now I want to change the submit button text as submit but then we can do this change this value has submit next we are going to implement client-side validation in this application don't worry we will do the exact spot operations after this client-side validation so I am going to make these name textbox as a mandatory field for this form for that go to the model class M go here and I am going to add the required attribute here required for that we have to use the namespace system dot component model dot data annotations inside then we can pass the error message error message is equal to this field is required in order to work this print side validation we have to use the bundle for jQuery validation script files that you can see inside the bundled conflict or CS file that we have a bundle for jQuery validations so I'm going to add this bundle inside the index view here for that I will use these scripts section scripts inside the layout page here so we can start like this i section scripts inside this we can use this bundle so I've scraped dot renzo inside that we have to pass the bundle name so I will copy this bundle name from here and paste in here now let me build this solution for you note this page now I am going to submit this form without entering magnetic field me click on submit so here you can see the client-side validation error this field is required currently we have no mel HTML text boxes i want to add the bootstrap class form control into these text boxes for that we can do this go to the add or edit view then we have to pass one more parameter for this editor for method so we can do this new HTML attributes is equal to mu I plus is equal to form - control so I am going to copy this from here and pacing for remaining editor for methods in order to work this way of passing CSS class into editor for method we have to update our asp.net MVC to MVC 5.1 or latest version in my case it is MVC 5.0 so I have to update this application into MVC 5.1 if you don't know how to check the MVC version go to references then look for system dot web dot MVC then I click on it then click on properties there you can see the ocean so I am going to update this project into MVC 5.1 for that select the project then tools then library package manager then package manager console then use this n you get command have given this command in video description now click on end off so here we have updated to MVC 5.1 if you check the MV solution here we can see that it is updated to MVC 5.1 now I am going to build this solution reload this page so here we have applied the bootstrap class form control into these text boxes now we are going to implement this jQuery AJAX operation using TS and in asp.net MVC with this script file that we have just created inside the add or edit view you can see the form that we are going to submit using jQuery AJAX so here we have the begin form method inside then we have to pass the post action method so it will be add or edit inside my controller M Grohe after there we have to set the form method as post inside the employ can troll you can see the action method add already so this form will be submitted to this add or edit action method of the type HTTP POST after that we have to set few attributes here so we can pass this new first of all I am going to set encryption type as multi-part form data because we have a file upload in this form so we have to set the encryption type here e & c type is equal to multi-part 4/4 - data after that I am going to set the on submit events of this form on sub image is equal to return jQuery AJAX post into this function we have to pass the object of this form so we can pass that using this parameter here so this function jquery ajax pose should return false in order to avoid the default pose of this form now i am going to define this function jquery ajax post inside the script file here so we can start to be a function function and we have a parameter for this function form first of all we will make sure that client side violation is applied to this form for that we came to this dollar dot validator dot and beatrice a dot pass inside then we have to pass the form object here for form myelination is successful so we can do this for dot valid if it is valid we will do the rest of the operations here finally we will return false in order to avoid the default form submit now we can submit this form using jQuery AJAX for that toerner dot attacks inside this attacks function we have to pass an object to configure this post operation first of all we have type is equal to post so this will be a post operation after there we have to set the URL so URL can be retrieved from this parameter here for door action then we need to pass the data for the fall so we can do this new form data inside that we have to pass this form object finally we have this success function success is equal to function and we have a parameter response so we will be posting this form using this a Jack's operation right here this post operation will be reached up to this HTTP POST add or edit method from this form after insert or update operation we will retain an updated list of employees and we can use that list in order to update this view alt-tab right here so let's look how we can do that here we have the index view inside that you can see the content if for the first tab that means this view alter so let me copy the ID of this fifth element and we can do this dot HTML and we can set this response inside this div since we have a file uploader in this form we have to add two more attributes inside these attacks function can then type is equal to false after that we have to set process data is equal to false so I want to generalize this function for all of the functions with and without file upload for that I am going to take this object out of this Ajax function and I will declare a property here at Jack's conf it is equal to then I will paste the object here so here is the trait if form door attribute e & Z type so here we will check the attribute encryption type of defaults if it is multi-part form that we can say that it contains a file upload if it is not even a multi-part phone data we can say that there is no file upload so we can check that here if it is equal to multi-part phone data we can add these two attributes inside this object for that I will do this conflict inside there we can pass this attribute name is equal to false let me copy this and paste him below that and I will copy this process data and placing here we can remove these attributes from here so instead of comma we have to use the semicolon so here we have a general function jquery ajax post it can be used for any type of form with and without file upload now it is time to implement this HTTP POST action method and already for that i will add a parameter of the type employee as EMP first of all we will check whether a file is selected for upload or not for that we can check this property image upload of the type HTTP POST file base is null or not for that we can do this if EMP dot image upload North equal to null then we can do this first of all we will retrieve the uploaded file name string file name is equal to but for that we have to import this namespaces from door IO door get file name without extensions inside that we can pass the file name EMP dot image upload dot file name now let me copy this line and that now we need to retrieve the extension extension is equal to instead of get filename without extension method we will call the function get extension now we will create a custom file name in order to avoid the reputation file name in the folder first of all we will concat this original file name with with date part date time dot now to string now we will format this string date to YY mm yes yes FFF finally we will contact the extension here now we will update this image path property with relative path of this image in this application for there we can do this EMP broad image path is equal to so we will be saving this image into this folder images inside app files folder so relative path will be like this tight symbol then /ab files forward slash images forward slash then I will concat this custom file name here so we can do this purse file name now we need to save this image into this images folder for that we can do this EMP dot image upload dot save as inside this function we have to pass the exact path of image so we can do this path dot campaign so we'll combine like this server dot map path map path inside this function we will pass the relative path of this images folder so I will copy this from here and paste in here as a second parameter we will pass the file name here finally so if there is any image selected for upload it will be uploaded into images folder here using this if close and we will save the relative path of image into image path column of employee table if there is no image selector for upload we will use the previous image path for that we have to add a hidden field inside this add or edit view so I will add a hidden field for image path after this embro I D so let me copy this and pasting below that instead of employee ID we need image path now back to add or edit action method now we just save this record into employee table for that we will use the using statement here as a resource I will use the object of DB model FFA's DB model as DB is equal to Nu DB model in order to save the record we can do this DB dot employees dot add we will add this object EMP into this employee this here i finally call the function Save Changes DB dot Save Changes and we will be using this updated embryologist in order to update this view all tab right here so here we are going to redirect to the all action method for them we can do this return redirect to action view all you all now build this solution reload this page here you can see that embroil is is empty now I am going to add a new record here now I'm going to submit this form for that you can click on the submit button here form is submitted now let me check the view all tab here you can see the newly added record photo so it is working so here we have implemented attacks post operation in the asp.net MVC application so here we have submitted this form into HD DB post action method add or edit after the successful insert operation we have returned the updated embroil is using that at least we have updated the view all tab here now let me check the SQL Server database for that right click on this tab well employee then click on select open rows so here you can see we newly added a code photo inside the image path column you can see the relative path of uploaded image now let me check the folder images here right click on images folder then click on open folder in File Explorer so here you can see the uploaded image after successful insert or update operation we have to refresh or reset this form here after that we want to show this view or tab here for these two requirements I am going to define a function inside the script file here function function name will be refresh add new tab for this function we have two parameters preset URL and then show you tap show view tab this is a general function using this function we can refresh this add new form here and we can decide whether we want to show this view or tab or not in some case we don't want to show this view all tab after theory fresh operation in that case we can pass fast for this parameter show buta so here we are going to reset or refresh this add new form with jQuery AJAX and we set URL for that we can do this dollar dot Ajax inside that we can pass the configuration type is equal to get after that we have to set the URL URL is equal to do we set URL then finally we have the success function success is equal to function and we have a parameter response here response so inside this parameter we will have the HTML of the fresh form we can assign that HTML into the second tab do for that let me copy this second tab do ID and we will do this dot HTML inside then we will pass the fresh form HTML response now I want to set this tab title as add new it will be changed during update operation so I want to make sure that this tab title will be add new after resetting this form for that we can do this you l dot nav dot now - tabs inside this UL we have to select the second anchor pack right here so we can do this space a colon EQ index will be index will be 1 and we will set the tab title like this thought HTML inside that we will pass the text add new if show View tab is equal to true then we will show this view or tab after we set in this form for that we can do this let me copy this from here and pasting here changing index to 0 for view all tab and finally call the function tab inside then we will pass the parameter show so this will show the view or tab after resetting before now we need to call this function inside jaggary attack success function in order to call this function we have to pass that URL from the success function so first of all I have to store this reset URL inside this foam as a data attribute so I will pass the reset URL as a data attribute like this data - reset URL in order to pass this attribute inside this begin for method we can do this data underscore research URL so we have to use underscore instead of - after rendering this view it will be converted into - is equal to URL dot action and ad then controller name will be employee so this is the action ad already of the type HTTP GET and we have a parameter ID so you want to pause the ID here new ID is equal to zero now we can call this function refresh add new tab and we can pass the URL like this form dot attribute and we can retrieve this data attribute that we have passed here instead of underscore we have to use - so in this case we want to show the View tab so I will pass as a second parameter now let me save this project and we load this page here now I am going to add one more record in order to test whether this resetting of form is working or not now I'm going to submit this form click on submit so here we have inserted the record for Fiona green and we have shown view or tab after insert operation so here we have a fresh form to add new employees so inside this jQuery AJAX access function we have retrieved the response as the HTML of view all tab with updated employees along with this message we may need to pass the informations like whether this operation is success or not apart from that we may need to pass the message something like saved successfully updated successfully if there is any error we want to show the error message or you may need to show the message something went wrong please contact administrator for that we will return a JSON data from this ad already to action method Jason knew first of all we will pass the data success is equal to truth then we will pass the HTML for now I will pass the empty string then we want to pass the message message is equal to submitted successfully finally we have to set these days and request behavior has allocated I lock it so this will return a JSON data to the jQuery AJAX access function here now we need to pass the HTML or few old tab right here for that I am going to add a class into this application I click on this project here then add class I will name this cross as drawable class click on add I am going to make this class as static inside the class I am going to paste a function in order to convert trace of views into HTML strings so this is the function render raiser view to stream for this controller we have to use the namespace system web dot MVC and for this stringbuilder we have to use this namespace system dot IO now back to the employee controller now call the function that we have just created global class dot render reserved view to string first of all we have to pass the controller object for that we can pass this parameter here then we have to pass the view name so in this case it is vu all after that we have to pass the model data here you can see the action method of peor into the V we have passed the Employee List using this function get all employees so we will pass the data here to get all employees now you want to change this generalized JavaScript function jquery ajax pose here first of all i will check whether this operation is success or not for that we can do this response dot success if it is equal to services we will do the success operations here instead of response now we need to pass response dot HTML now back to the action method add or edit now i am going to add try catch here for that select all of these whole inside this action method i am going to engross these codes inside a try-catch block for that right click on here then click on surround vids and I will type try click end off so this will be enclosed inside a try catch block like this if there is any error we can pass the error message like this so let me copy this from here and pasting here in case of exception we will pass success as force success as force you don't want to pause this HTML here now will pass the message as the error message here e x dot message if operation is success we can do this else we show the error message here our message here and success message will be here success so NS we are going to show this success message and our message using the plug-in notify J's so unless we are going to download and installed notify jeaious for that we can go to this website notify Jes comm notify J is calm and then download this file notify dot min gorgeous so here is the downloaded JavaScript file for the plug-in now I am going to add this file into the application inside the folder scripts for that right click on this folder then add existing item then I will select the downloaded file from my desktop select the file then click on add so here we have added the JavaScript file for the plug-in notified god MnDOT J's now we need to add the reference for this plug-in inside the layout page here so I will drag this file into this layout page so that we can add the reference of this script file here now in order to show the success message we can do this dollar dot notify notify first parameter will be the success message itself so here we have passed the message so I will pass the message here response dot message as the second parameter we will pass the parameter to identify the type of notification that we want to show so in this case we want to show the success message in order to see the complete documentation about the plugin you can visit this website notifies a s.com here you can see that we have to pass the second parameter success in order to show the notification like this other than that we have info warning ever like this so I want to show the error message like this so I will pass the error as the second parameter so let me copy and pacing here inside this controller we have passed the error message as message so you want to change this success as error so next we are going to deal with the embroil is here I am going to replace this hyperlink with phone our some icons for edit and delete actions for that we can do this inside the V or CSS HTML we will do this I will remove these hyperlink from here instead of that I will add normal HTML hyperlink class is equal to VTN these are the classes from bootstrap BTN - default and you want to set the final class BTN yes M inside this hyperlink I will add phone over some icons so first of all we have to add the CSS reference for the phone our some stylesheet so inside this layout page I will paste the CSS reference for phone towers in stylesheet now back to view all view in order to add the phone our sum icon we can do this I tag then class now you want to select an icon for 82 operation so I will search for edit here so I will select this one pencil so we have to pass the class like this face - pencil now I want to add one more class to make the icon more larger for - LG now let me copy this and paste in below that so this hyperlink is for delete operation so instead of default I will use the danger class here and we have to select F 100 some icon for this operation so I will search for delete here so I will select this one fast pace for - trash so I will change this for - pension - fire - trash sorry instead of this default cross I've used BTN - primary now let me save this project reload Paige now let me switch to the old tab here so here you can see the phone over some icon for edit and delete operation so next we are going to implement update operation using jQuery AJAX in a speedo at MVC application if you so want to edit the other cone he will click on this pencil icon here then we will make the second tab as the active tab and we will change the title as edit then we want to show these selected employee details inside these text boxes and we will show the selected employee image inside this image control so let's look how we can do that for that I am going to add on click even for this icon on click is equal to edit function inside that we will pass an URL to return form for update operation so we can do this ad you are l dot action first parameter will be the action name itself add all ready as a second parameter we'll pass the controller named employee then we will pass the ID News ID is equal to at item dot employee ID so when you sir click on this edit pencil we will call this action method add or edit inside embroiderer of the type HTTP GET right here so now we need to define this javascript function edit inside the script file here for that we can do this function function name will be edit and we have a parameter URL now we need to make a jQuery AJAX get operation for that let me copy these lines from here and pasting here instead of this I will pass URL parameter so here we have this access function with parameter response so from this add or edit action method we will return a form to update selected employee and we said that view HTML into the second tab like this and we will change the second tab title as edit edit and we want to make the second tab as active for that we can use this line here and you want to edit this tab index as 1 instead of 0 now we need to edit this ad already action method for update operation for that I will do this if ID is not equal to 0 we can say that this is an update operation so inside this if close I will do this using statement DB model object as DB is equal to new DB models employee object EMP is equal to DB dot employees were X such that X dot employee ID is equal to ID then call the function force or default and we will convert that into my e object now let me build this solution and reload this page go to view tab now click on edit pencil for thogh wat on the code so here we can see the details of to--it on the code now using this form you can change the information about the employee after that we can submit this form so when we submit this form it will reach up to this action method add or edit of the type HTTP POST so inside this action method we have written code for insert in your course now we want to edit this action method for update operation also so I will do this if e MP dot employee ID is equal to 0 then we will do the insert operation in the else part we will do the update operation for that I will do this DB dot angry EMP dot state is equal to nd T stay for that we want to import this namespace system dot that or entity dot modified finally called the function DB dot save changes now let me build this solution again reload this page go to view all tab and I'm going to change the information about the employee to click on pencil now I am going to change the position of so into junior developer junior developer if you want to change employee image you can use this input file control here otherwise we will use the previously added image relative part from the hidden field that we have added inside this add or edit view after employee ID right here so now I am going to submit this form click on submit here you can see the success message from the notify j/s plugin and you can see the position of though he's changed from developer to junior developer so here we have updated the am loyalist next we are going to implement delete operation using jQuery attacks for that I am going to add on click even for this delete icon here for that let me copy this on click event from edit icon and pasting here and changing the function to delete now we need to change this action name only instead of add or edit we use the delete action name so there should be an actual method delete inside this employ controller and we need to define this javascript function inside the script file function name will be delete and we have a parameter URL as you know delete operation is a loss of beta so we want to confirm the delete operation confirm confirm inside that we will pass the question are you sure to delete this record if you sir confirmed this operation it will return a true value to inside this if close we will do the delito operation for that let me copy this daiquiri Ajax operation from here and pasting here it is a best practice to do delete operation using post action method rather than get actual methods so I will save this type as post and then we will pass the URL here then we have the success function here so now we are going to implement delete action method inside employee controller so that we can do this public action result action result delete and we have a parameter int ID first of all I will use the try catch here in order to delete an employee with given ID we can do this first of all I will declare the using statement here as a resource I will use the DB model object as DB is equal to new DB model first of all I will declare an object of my as EMP is equal to DB dot employees X such that X dot employee ID is equal to give an ID finally we have to call the force or default function and we will convert the result into employee object now in order to delete this employee we can do this ve taught employees dot remove inside this function we will pass this object emp2 I will call the function they B dot Save Changes after all we want to return a JSON data into this jQuery AJAX success function for there let me copy this strength statement host add or edit action method and pasting here so this will retain the updated embroil is back to the cola finally we have to set the message as deleted successfully deleted successfully if there is any exception we can pause the data like this let me copy this and paste in here now we want to make few more changes inside this delete attacks operation first therefore we will check whether this operation is success or not for that we can do this response dot success if it is success they will set the if it is a success operation maybe set the updated embroil East into the first tab our spawns dot HTML now we want to show the notification message for there let me copy this from here and placing here instead of this success notification our we use Devon in the s part we want to deal with the error so we want to show this I will copy this and pasting here type of notification will be error now let me build this solution reload this page go to view all tab now I am going to delete this record for free on a green so pick on this delete button here so it will ask for the confirmation are you sure to delete this record click on ok so here we deleted the record you can see the success message here now when we select error code for update operation using dispensing we will fill the selected embroid details inside this form now suppose if you so want to add new employee instead of editing these employer code then we want to add an extra button besides the submit button here for that I will this inside the add or edit view I will add a new button if model dot employee ID is not equal to zero so I will add new hyperlink here class is equal to BT n BTN - success and I will add on click event I will call this function refresh add new tab so let me copy this function name from here and pasting here as a first parameter we want to pause the URL so I will do this at URL door action action name will be add Oh Eddie then controller name will be employee then I will pass the ID as 0 ID is equal to 0 let me close this hyperlink here as a second parameter I will pass false because we don't want to show the view all tab inside this function so I will pass this parameter as false inside this anchor tag we want to show a phone over some icon so I will add the eye tag here class is equal to 4 for space for - plus and I will add the text add new here let me save this and reload this page now I am going to open this code for edit operation so you can see the button add new if I click on this button it will replace this tab with a form to add new employees click on add new so here we have the final result so when s we are going to implement jQuery data tab inside this SP dot item is the application so this is the official website for the plugin jQuery data tab data tables dotnet first of all we have to use the CSS reference so let me copy this reference from here and I I do fancy on link now we'll paste the link as HR of here after there we have to add JavaScript offenses first of all we have to add this theory library it is already the in this application now we need to add this javascript file let me copy this and we can add this here scrape s RC and I will paste the JavaScript preference here in order to convert this HTML table into jQuery data table I will define a function here the hospital first of all I will add the tag scripty of function function name will be activate activate jquery tab inside that we will activate this HTML table into jquery data table for that I will add an ID G of M bluey tabble let me copy this ID from here and we can do this dot that dot that table inside the jQuery ready function we will call this function activate jQuery data table now we need to add t hat and t body part for this table T head then T body let me save this project we load this page go to view tab so here we have convert that the HTML tablet into jQuery data tab now we need to call this function activate jQuery data table inside this general script file after opera like insert update and delete so how do we call this function inside this general script file because this function won't be needed for remaining control of use so in order to call this function we can do this for now I will copy paste the code here first of all we will check whether there is a function or variable with this name activate jQuery data table then we will check is there any function with this given name if these two conditions is true then we will call this function activate jQuery data table you want to do this same operation inside this delete operation here so I will paste the code here next we are going to add loading spinner or loading image into espied or net MVC applications during jQuery AJAX operations for loading spinner or loading image I will add two div inside this layout page here so using these two divs we will show the spin now using CSS class for that I will add few CSS source inside this file side or CSS let me paste the source here saving and reloading this page so here you can see this pin now we want to show this pin now if there is any delay in server side operations so I am going to hide this pin now inside the jQuery turtle function inside this script file so I will do this first of all I will add the jQuery ready function here and I will use the do ID for this pin now let me copy the ID from here lot of body and we can do this in order to hide the view we will add class height height let me save this I am reload this page here so here you can see the loader when Dom is ready we will hide the spinner here now we want to show this spinner during the Ajax post operation for that I will use this code here during the attack start even we will remove the class hide from the loader so we can show the law dog when exact scope even occurs you will add the class height into the loader so lorda will be hidden now let me save this and reload this page finally I am going to add a new employee note to show the loading spinner during attacks operations now I'm going to submit this form click on submit so you can see the Lord in spin now so here we added new record for Ashton we can see the success message here that's it guys in this video we have discussed how to implement daiquiri exact school operations using asp.net MVC and SQL Server if you found this video helpful please thumbs up this video and for more hours of videos like this please be subscribed to this channel dotnet MO you can download this for the source code and DB script 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 these have a nice day bye

Channel: CodAffection

Views: 244,833

Keywords: jQuery Ajax in Asp.Net MVC, How to use jQuery Ajax in Asp.Net MVC, CRUD Operation With jQuery Ajax, with an example, jQuery Ajax tutorial, How to Upload File Using jQuery Ajax in MVC, Image Upload in jQuery Ajax, jQuery Ajax CRUD Using JSON, jQuery Ajax POST, jQuery Ajax - Insert Update Delete, Loading Image/Spinner in Asp.Net MVC, loading image during jquery ajax, CodAffection

Id: DI_YppvLgJ8

Length: 81min 13sec (4873 seconds)

Published: Thu Sep 07 2017