AJAX CRUD Operation With jQuery DataTables In ASP.NET MVC 5 For Beginners

Introduction

I frequently come across questions on StackOverflow in which the questioners are able to create CRUD operations for their entity which is a normal form post, but they struggle implementing the CRUD via AJAX so that page does not reload completely for better User Experience.

In this post, I will be addressing this problem and we will learn how we can implement CRUD using jQuery DataTables in one page without any full page reloads.The end result will look something like:

Background

I have been writing last few posts about the usage of jQuery DataTables and it can be leveraged to build a Grid View like functionality in ASP.NET MVC. We saw how we can install it using NuGet Package Manager and implement a simple Grid using the plugin which provides us the essential features like Sorting, Searching and Paginations, then we saw how we can implement the paging, filtering and ordering; then we proceeded to see how advanced search can be added for more better user experience.

If someone wants to have refresher or is interested to read the previous posts, they can refer here.

• Beginners Guide for Creating GridView in ASP.NET MVC 5
• Grid View with Server Side Filtering, Sorting and Paging in ASP.NET MVC 5
• Grid View With Server Side Advanced Search Using jQuery DataTables In ASP.NET MVC 5

In this post, we will learn how we can add create, update and delete operations support in the Grid that we already implemented using jQuery DataTables.The end result will look something like:

Database Creation Script

First of all, we will run the script for database and tables creation that would be essential for this post. Following is the script for that.

You can find the script in attached source code in file name dbScript.sql which also contains sample data to get started quickly. Running it will create the DB and will add some sample data in the tables as well.

Create/Insert Operation

For the insertion part, first of all, we need to create a Partial View in Views >> Asset by right clicking the Asset folder and navigate to Add >> MVC 5 Partial Page (Razor) like the below screenshot.



Open the Container View in which asset rows are being rendered which _AssetsPartial.cshtml located in Views >> Asset directory and add the HTML for the Add Asset button which will open up a popup for inserting a new asset row in database,

Now, open the Index View of Asset which is Views >> Asset >> index.csthtml and in scripts section add the following jQuery code for the button click event which we just created above, it will call the create get action and will display the partial view in bootstrap modal to user, the code for which is,

We also need to add bootstrap modal with container div in which we will be loading create partial view of Asset, so we will add the following html at the end of Index.cshtml view,

Defining Add GET Action

Add action method for Asset Creation get request in the Asset controller file located at Controllers >> AssetController.cs which would be called by the above jQuery code, inside the action method we are populating the ViewModel and passing the instance back to PartialView as normally we do in mvc based application,

Add Partial View Creation

Add a new Partial view in project in Asset Views for Create form, for that right click the Asset folder under Views in the Solution Explorer



Enter the name of partial view to be _CreatePartial in textbox or whatever name you think would be better in your case.


Writing Add Partial View Code

Now we will write the partial view that we created in previous step _CreatePatial, add the following code in that View,

Writing Add/Create POST Action

The important thing to note in the view code is the Ajax.BeginForm helper portion as the class Ajax should be enough to understand that it will post the model back to controller action via Ajax, which means that whole will not refresh i.e. no full postback will happen in terms on asp.net web forms.

The post action is simply mapping ViewModel object to the Model and then saving it in the repository,

We are trying to save the newly entered asset in the database and tracking if it is saved successfully or not and if it saves successfully we are returning a string message “success” back to client side and in the success call back of Ajax Form we will be checking if operation was successful or not to do UI changes according to that.

Implementing Ajax Callback Function

We can see that in BeginForm helper method parameters we are specifying JavaScript function to be called when the Ajax Form successfully returns back from server i.e. OnSuccess = "CreateAssetSuccess"

Now let’s go to the index.cshtml view of Asset and define the success callback implementation,

What we are doing here is if the operation is not successful we are updating the client side html to notify the user about the failure of creation and if the insert goes successful we are closing the modal popup and refreshing the Grid to display the up to date information.

Edit/Update Operation

Until now we should be able to run the application and successfully add new assets in the database via Ajax using the bootstrap modal which we created above, now let’s move to the update part of the Asset.

We will be adding another column in the datatable columns collection which will contain hyper link that will navigate to Edit View, but as we are using Ajax and bootstrap modal, we will be doing updates as well same way, so no redirect will be involved. Let’s get started.

Open the Index.csthml file and add a new column in the columns collection in jQuery datatable initialization, after updating the columns array our code would look like,

We are setting the header of new column to display Actions as title and we would need to disable the searching and sorting for this column, as it is for edit operation and it does not makes sense to enable sorting and searching on this column. Next we are defining the render method of the column and we are generating anchor link html which could call the Edit action of Asset controller and will pass the current asset id to pull the information of it and display in the Edit View.

Defining Edit/Update GET Action

After doing the datatable js changes, now we need to create a get action method which will pull the asset record from the database and will display it for editing to the user in a popup.

Let’s implement the Edit get action of it,

The action simply retrieves the row from the database and after converting it to ViewModel passes it to back to partial view to rendered or returned back to the client side for processing, as no post backs would happen it will generate the html and will send the html back in response of ajax call which client side will handle and decide where to put that html.

Handling Action Links Events on Client Side using JQuery

From the column render function you can see that there is class applied on anchor link called EditAsset, it is defined because jQuery event handler will be applied to the anchor link and Ajax call will be sent to server, let’s define the event handler for that in Index View:

Addition of Bootstrap Modal

Now add the bootstrap modal html in the Index View which will be placeholder for loading the Edit View, define it just after create bootstrap modal html,

Edit/Update Partial View Creation

Create another new partial view following the same steps which we did for adding _CreatePartial.cshtml which was for Create Asset, So add a new Partial View in the Asset folder in Views with name _EditPartial.cshtml and add the following code in it,