Full CRUD operation using datatables in ASP.NET MVC

Hello friends welcome toet awesome.com in the previous article of this series implementing jQuery data table in asped MBC application we have seen how we can Implement jQuery data table with server side pagination sorting and custom multicolumn filtering in as. MBC application where we have used data table plugin to basically display data with various features like paging sorting and filtering because a lot of requests from readers to me to write a tutorial for Implement crude operation in data tables today I'm going to show you how we can Implement crude operation in data tables we know that data table is free but its editor which is used for crude operations are paid hence in this article we will Implement crude operation in data table using jQuery model popup okay let's start with implementing crude operation in data tables here in this uh application I'm going to use visual through 2015 so first of all we will add one new project here so just follow the following steps in order to create an empty project uh go to your file menu go to new and then click project it will brings up a new dialogue window where I will select asp.net web application under wave then enter your application name here and then select your project location where you want to save your project select your project location select your project location where you want to save your application and then click on okay button it will brings up one another dialog window where we can select our application template so um I want to select empty template and then I will click MBC for add folders and code references for and then click on okay button our application is created as we are implementing crude operation in our application so we need to have a database first so here in our application I'm going to add one database as this is a tutorial project I will add a database in our application here in AP data folder for add database go to your solution Explorer right click on your AP data folder then add and then add new item from here we will select SQL Server database under data and then we have to add provide a database name here after providing database name just click on ADD button for add the database in our application you can see here one database is added in our application now we will add one database table here in our database so go to your solution Explorer double click on your database name for open the database in server Explorer okay from here we will extend our tables node there is nothing you can see here now for add new table just right click on this table nodes and add new table here we will add one table for Store employee data so here we are going to create a employe table we'll add employ ID and I will add it temp identity colum name for grunch you it's done now we will click on update button for create this table and then again we need to create update database okay so our table is created and also I will add some predefined data here for so this data in our gquery data table so open your table here I already have some data filled up in Excel so I will copy this data or insert here and then I will click paste so our table is ready now we will add one entity data model here in our application so I'm going to add this in data model here inside models folder so right click on your models folder from solution Explorer add new item here I will select ado.net entity data model as I'm going to add the entity data model under data and enter your model name here and then click on ADD button from here I will select e generate from database as we have already created our database and next from here I will select my database we have just created this one my database. MDA and also we need to save this as a connection string name so check this one and then click on next button from here here I will select entity famework 6.x then again click next from here I will select our tables which we have just created and then select click on finish button you can see here our table is added and our model is entity data model is created okay here what we will do is first of all we will show data from database in data tables and then we will add crude functionality in data tables as I have already shown you how we can Implement server side paging sorting filtering functionality in data table here we will only focus on cruit functionality so here we will show data and data tables without implementing server side paging sorting filtering functionality for the sake of Simplicity and for that now we have to add a MBC controller so for adding MBC controller go to your solution Explorer and then in the from solution right click on controllers folder then go add and then click on controllers from here we will select mbc5 controller which is empty and then click on ADD button then we need to add a controller name here and then click on ADD button so you can see here our home controller is ready and there is already one action added here which is index now we will add view for that index action where we will show data in data tables for adding view just right click here inside the index action then add view from here I will select empty without model and also I will not select the layout page as layout page is not added here in our application yet so I will uncheck this one then click on ADD button you can see here one empty page is added here we will Implement our data table here for show data from database and also then we will add grou functionality in this page first of all we need to add jQuery Library so we will add jQuery library in our application from Nate package manager so go to your solution Explorer right click on your project name then go add uh sorry uh manage net packages from here I will search for jQuery and then click on install button it's installed successfully and also we need j. validation as we are going to implement crude operation the where we we need to implement the validation as well so we'll install this one as well so select this one and click on install button this is also install sucess sucessfully and one more thing I need to add here J.I as we are going to implement crude operation using jQuery model popup so we need to install this one as well the same way it's also sucess ful installed let's see J quy validation is added here the query Library added also you can see here jQuery ui. CS also added here we need to add some CSS and JS Library so first of all I will add one boot step cissors for looks or page a little perfect so [Music] link it H should be this one as this is our Bo strap CSS link and now I will add one more CSS which is for data table L let's go to style cheet here should be this one it's added and one more I need to add here is for jQuery UI so I will go to content theme from here I will add jQuery ui. me. CS this one so I have added all the CSS file which we needed here in our page and then I will add JS Library so first of all I will add uh jQuery Library here so go to your script folder from solution Explorer and drag your jQuery Library here one added and now I will add one more thing is jQuery validation validation. mean file also added and then I will add see datail JS file so for this I'll copy this this is for jQuery data table also added and one last one I need to add here is for jQuery UI so here is our jQuery UI this is also added so we have already added all the CSS and JS file required here now we need to add some HTML code and we need to write some js code so here we want to display our datas so here I will write some in line CS now here we need to add zor table first name then I will show last name ID then I'll show City then country later we will add edit and delete button here first of all I just check with this one is everything working fine or not finally we need to add some JavaScript here for get data from database and show here in our data table so we'll write all the record J here inside document. 3 function okay let's get our data table here to this is our table ID we need to pass here then re a table and then here inside this we need to configure our table first of all the ax functionality here we need to provide Ur should be home get get employees this action is not written yet we will add this MVC action in home controller later after completing this page HP G data type and then we will configure columns data should be first name which is our database table column name I'll Define it to can also WR like this if you want so this is first First Column information which is first name then we will add one more first your last name in this way we can do other columns as well then we'll add email ID then City and then country okay so now we have we have five column here that's the reason we have added five columns information here as well what it will do uh it will page data from this locations and generate our data table as I have said we need to write this action get employees in home controller so go back to your home controller here we will write function result get employees here we will write code for phage data from database and rization result my database we need to add this one because we have our model inside this model folder that's the reason so we need to use this using jqu model this is our application name and models is our folder name so it is the name space of our [Music] models employ equals to DC dot employs dot first name to list the data then turn new sorry station L it so this action is done so let's check uh till now what we have done is working file or fine or not so I'm going to run this application yes see showing data from our database can check here now what we will do will add edit and delete option here and also we will add one button here for add new employees information okay close it this is done for doing crude operation we will add some MBC action in our home controller so first of all we need to open our home controller so go to your solution Explorer and double click in your home controller. CS file it's open so here first of all we will add an action for getting in add and Ed delete form for Save employee details in our database so here I will create the that action public actions result should be save in ID you can see here I have added one uh ID parameter this is because of uh we will return add or edit form from here in the same action if uh it's edit form then I will get one ID from here and then I will return the employee details with that form and uh otherwise uh by default we will send zero for add new employe here in the ID so my database entities to new database entities i. where ID just to ID default return view with data okay this is done now we will add one another action for post employee data to the server for Save employee in information to our database okay so here I will write one another action which is for HTTP post request public action result save using sorry if I zero that means here I will addit the for data otherwise we'll save DC do employ add PMP here we need to First fix the data DC dolo dot ID default do first name equal to do first name last name do last name done now finally we'll save the data save changes and after that we will do status true so this is done now finally I'll return oh sorry res okay as you can see here we have added model state do is valid so we need to also implement the validation from server side that's the reason I'm going to add one another class here for metad data uh suppose here I will add one another folder first because we need to create a partial class for with the same name extended here I will add one class where I will write the validation for the employee so for add sorry for add a new class here just right click on your folder add and then go to class here we will write employ as our database model name is employe and we want to create partial view so we need to provide the same name here employ then click add button and also we have to take care of this because the model. extend is now the name space if we want to create partial view of this employee class or extend our existing model so we need to remove this name space okay this is done so here I need to add a partial keyword for apply validation here I will add one more class here metad data here I will apply the validation word The annotation is required for that we need to add this one public string first name get so inside record we need to provide allo this Str should be false because this is mandatory field and massage should be please name the same way we will add one more here because the last name is also last name it should be last name and then apply I will apply this validation here in our class so metadata type type of this class so we have applied this valid in our employee model that's done now we'll go back to our home controller our save action is also completed so here now we will add another MVC action for getting confirm dialog window before delete employee from our database so it should be also HTTP get request complete action result delete and also we need to pass employe ID here for show which employee we going to delete here will right code see sorry employe id id dot default so if not equals to n then return view vse GTP not found okay this is also done and now finally we will add one another action for delete employee from our database this is BAS uh post request after success uh getting the confirmation from the users we will delete this employe from our record okay so it should be HTTP post for delete so here I will write public action result delete ting okay you can see here this two uh definition is same so we need to rename this [Music] one and uh we will add action name attribute for default see not equals to now then see implo remove V and then we will do save changes here and finally we'll change the status to true this is also done so we have completed our home controller coding now we will go back to index view page where we will implement ment crude operation in data tabl so close this one and go to your index. CS HTML file open it here here we will add edit and delete button in our data table first so for add add this two column first of all what we will do we'll add here the H and delete this do I have added here so I need to also modify this uh data table settings here we need to add two more column for ADD and delete okay then for add new one data should be employee [Music] ID as we will use this ID for or generate edit and delete link with 50 pixel and then we will use render method okay sorry here in this data I will get this employee ID so and from here I will return one HTML link edit class pop up I will use this class later sure if should be home slash save slash then here I will pass this ID employ ID so here data okay and the same way we will add delete as well delete [Music] link okay then edit and delete link is also added here in in our data table okay so our datable is done now here we will do one more thing in now we will add one function here JavaScript function for open popup page URL which URL we want to open [Music] here here in this function we will get the page URL content and open in jQuery model popup so what we'll do here just first of all we need to get the page content so here page content load the page so and then we will create popup dialog window here so I will create one another dialogal to I will add overflow I'll show scroll without HTML kill St page content should be page content do dialogue this is a jQuery UI uh function for get the model popup and then here we need to provide some settings Che abouts say false true and finally we will write close function yeah will destroy the dialogue this is done now we will open our dialogue here dialog Dot open but before open the dialogue we need to do one more thing here we will submit the form using ax jQuery aex that we will get from the page URL this page URL so here I need to write one more thing so here I will [Music] do this is my selector do on submit here we will keep the form pop form this ID we will assign when we will add uh act view for Save action and delete action that time we will provide this ID inside the form here we will write do prevent default for avoid to execute the actual submit of the form so for execute the form submission we first we need to get the URL action URL of the form over form Z doaction we get the URL then we will write ax method for submit the form we are using this aex method because for submit the form synchronous way without post back so here type should be post URL URL [Music] data so I will get data from this form here do serialize and then finally in the success method if we got the success status then we will destroy the popup and uh we reload the reload our data table so for destroy close and then we will reload our data table do [Music] adx reload so this is done so this function is ready now we need to write one click event for this all popup link so here I will write first of all here I will add one class forget all the popup link [Music] continue on click pop up function can default from here we'll call this method pop up with this. attri HF so this is also done we have completed our index. CS HTML file now we will go back to our home controller where we will add two partial view one for Save AC save action and another for delete action so for adding the partial view uh just right click here inside your action then click on ADD view here we'll select template uh we need to create this one it's no issue if we make it empty uh in the page will will design for the same checked here create a partial view okay and click add button can see here one empty page is added now here we will write some HTML code forget the view for Save employ data so first of all I will add model it should [Music] be data [Music] table then I will add one is to for Save then here I will create one form HTML dot begin from here I need to pull action name your controller name post then here we write some additional here we will add one HTML attribute ID called sorry it should be this one as we have added this uh this ID here for submit the form so I will provide this ID here as well okay now I will add one hidden field for Store employee ID uh this is required if this is uh for edit purpose then we need to get the employee ID so here we will check first if model not equals to null and model do employee ID geter than zero that means this form is off for edit existing employee then here I will add one HTML dot hi for do employe ID okay now we will add our input fields for edit data CL first name then here we will add our input fields do textbox for first name attribute here I will add a class for make it looks good we form control now I will add validation message for first name so one field is added here in the same way we will do add another Fields also for edit so for make it quicker I will just copy and paste here so it's a last name last same thing I will do for email ID as well like validation for email actually till now we not added the uh email format validation but we can also do for make this application simple I have not implemented here but we can see it later this is for City then City and finally I will add one more for Country so we have added all the fields now finally I will add one submit button for submit the form D inside here I will add one input type should be submit save data save okay so this partial view is completed just only one step we are away uh which is we need to add one more peral View for the delete action so same way we can add the partial View for that action as well just right click inside your action then click on ADD view we can also select empty without model instead of uh empty from here we can also select the employe and then uh must care it's selected the create as a partial View and then click on ADD button so it will add this one then here I will delete employ again here I will add one form HTML dot V form delete this is home controller that should be post and again we have to provide ID attribute this one which I have added here in our jQuery script this one okay now I will add one hidden field this is for p the employ ID then here I will add one D name and then I will show the name here and then finally I will add one submit button for delete this employ delete so this is also done all the steps we have done just one small changes I need to add here we need to add one link link here for add new employee because till now we have done for edit and delete so we should add one more link here and the class should be pop up okay and the link should be home save and ID zero as zero we want to add new employee so here add new employ also I will add some style B this style from from bootstrap and also I want to give a margin buttom 20 pixel and merging top also 20 pixel so this is done now we are ready to run this application for test everything is working fine or not before run let me check if everything is fine or not or I have missed something okay okay uh small thing I have missed here I have ADD validation. mean but forgot to add I forgot to add jQuery on op to save so for adding this one this this one is required for validation so I will add from n get packages go to your solution Explorer right click on your reference folder and then manage new good packages from here I will write JY on obtrusive I'll search for this one from here I will select this one Microsoft jQuery on. validation and then I will click install button for install the same this is also recorded for validation Cent side Val valtion I'll click I accept Okay it's successfully installed now I will use this one here I need to add here so go to your script folder here we get this one added as we are opening our form in prop up window and getting content using aex so I need to write some function here for apply validation of our Dynamic generated form so here I will write one function here I will apply validation on this form so what I need to do is under P content first of all I will remove data validation soorry it will be validator validator and also we need to remove on up St sh validation so here I will write um St valuation both we need to remove and finally I'll write this code for apply validation [Music] validator for form so validation is also applied here after got the page content our popup page content and here I have added this one so everything is completed now we will run our application and check if everything is working or not or if reord then we will change according now I'm going to run our application okay you can see here all the data is loaded here is very fine now if I try to add new employe here then click here it's open a new popup window you can see here and also the validation is working fine uh the first time and last time we have applied apped validation record field here that's the reason it's giving me this error so suppose I'm going to add one new information India okay you can see here the record is successfully saved this one and suppose if we want to add it something so it's again click on here edit button the edit form is open here you can also edit the another one edit you can see the edit information is loaded if I change Sten Doc and click save you can see here the record is also updated now let me check delete is working fine or not click here in the delete record it's showing confirmation dialogue first name last name and when I will click delete button you can see the this new added record is removed from here that means it's working fine it's so simple to implement just follow the following steps we have done till now okay thank you thank you for watching don't forget to like comment and subscribe

Channel: sourav mondal

Views: 558,934

Keywords: Datatables, asp.net mvc, crud operation, jquery datatable crud operation, implement CRUD operation in Datatables, create retrive update delete in jquery datatable

Id: 3pEax-5wXG8

Length: 67min 51sec (4071 seconds)

Published: Thu Dec 15 2016