CRUD Operation using datatable.js in asp.net mvc

Below is the description about CRUD Operation using datatable.js in asp.net mvc. below is the step by step code for that. 

View Changes

Add below style sheet and javascript in view.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/> // bootstrap

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css"/> // dataTables

<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.1.2/css/buttons.dataTables.min.css"/> // dataTables.buttons

<link rel="stylesheet" href="https://cdn.datatables.net/select/1.1.2/css/select.dataTables.min.css"/> // dataTables.select

<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.0.2/css/responsive.dataTables.min.css"/> // dataTables.responsive

<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script> // jQuery

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> // bootstrap

<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script> // dataTables

<script src="https://cdn.datatables.net/buttons/1.1.2/js/dataTables.buttons.min.js"></script> // dataTables.buttons

<script src="https://cdn.datatables.net/select/1.1.2/js/dataTables.select.min.js"></script> // dataTables.select

<script src="https://cdn.datatables.net/responsive/2.0.2/js/dataTables.responsive.min.js"></script>

<script src="js/altEditor/dataTables.altEditor.free.js"></script> // dataTables.altEditor

script to call datatable

<script type="text/javascript">

$(document).ready(function () {

$('#tblCompanylist').dataTable({

"sPaginationType": "full_numbers",

"bPaginate": true,

"iDisplayLength": 25,

"scrollX": true,

responsive: true,

altEditor: true,

dom: 'Bfrtip', // Needs button container

select: 'single',

responsive: true,

altEditor: true, // Enable altEditor

buttons: [{

text: 'Add',

name: 'add' // do not change name

},

{

extend: 'selected', // Bind to Selected row

text: 'Edit',

name: 'edit' // do not change name

}]

});

});

</script>

Html changes

<div id="divCompanylist" style="padding-top: 60px;">

<table id="tblCompanylist" class="display dataTable" cellspacing="0" width="100%">

<thead>

<tr>

<th>Id</th>

<th>Customer Number</th>

<th>Website Url</th>

<th>Logo File Name</th>

<th>Company Name</th>

<th>Street</th>

<th>City</th>

<th>State</th>

<th>Zip Code</th>

</tr>

</thead>

<tbody>

@foreach (var item in Model)

{

<tr id="@item.CompanyId">

<td>@item.CompanyId</td>

<td>@item.CustomerNumber</td>

<td>@item.WebsiteUrl</td>

<td>@item.LogoFileName</td>

<td>@item.CompanyName</td>

<td>@item.Street</td>

<td>@item.City</td>

<td>@item.State</td>

<td>@item.ZipCode</td>

</tr>

}

</tbody>

</table>

</div>

Controller changes 

Add below methods in controller

public void UpdateData(int id, int CustomerNumber, string WebsiteUrl, string LogoFileName, string CompanyName, string Street, string City, string State,

string ZipCode

)

{

CompanyDAO _companyInfo = new CompanyDAO();

var companies = _companyInfo.GetAllCompanyInformation();

CompanyInformation companyRow = new CompanyInformation();

companyRow.CompanyId = id;

companyRow.CustomerNumber = CustomerNumber.ToString();

companyRow.WebsiteUrl = WebsiteUrl;

companyRow.LogoFileName = LogoFileName;

companyRow.CompanyName = CompanyName;

companyRow.Street = Street;

companyRow.City = City;

companyRow.State = State;

companyRow.ZipCode = ZipCode;

companyRow.CompanyPhone = CompanyPhone;

companyRow.IsActive = true;

_companyInfo.SaveCompany(companyRow, 1);

}

public void AddData(int id, int CustomerNumber, string WebsiteUrl, string LogoFileName, string CompanyName, string Street, string City, string State,

string ZipCode, string CompanyPhone)

{

CompanyDAO _companyInfo = new CompanyDAO();

var companies = _companyInfo.GetAllCompanyInformation();

CompanyInformation companyRow = new CompanyInformation();

companyRow.CustomerNumber = CustomerNumber.ToString();

companyRow.WebsiteUrl = WebsiteUrl;

companyRow.LogoFileName = LogoFileName;

companyRow.CompanyName = CompanyName;

companyRow.Street = Street;

companyRow.City = City;

companyRow.State = State;

companyRow.ZipCode = ZipCode;

companyRow.CompanyPhone = CompanyPhone;

_companyInfo.SaveCompany(companyRow, 0);

}

download dataTables.altEditor.free.js from internet if do not find send me email. 

The main changes are in dataTables.altEditor.free.js to make ajax call for add and update.

On click of add button _addRowData function is called so create ajax call or any other extra operation you want to do you can change here. In this function I have added code of validation and save into database code.

if (data[1] == "") {

alert("Please enter customer number");

return false;

}

if (data[2] == "") {

alert("Please enter website url");

return false;

}

if (data[4] == "") {

alert("Please enter company name");

return false;

}

$.ajax({

url: "/company/AddData",

type: "GET",

data: {

id: data[0], CustomerNumber: data[1], WebsiteUrl: data[2], LogoFileName: data[3], CompanyName: data[4],

Street: data[5], City: data[6], State: data[7], ZipCode: data[8], CompanyPhone: data[9]

},

success: function (response) {

$('#altEditor-modal .modal-body .alert').remove();

var message = '<div class="alert alert-success" role="alert">\

<strong>Success!</strong> This record has been added.\

</div>';

$('#altEditor-modal .modal-body').append(message);

}

});

same thing I did for edit. For edit _editRowData function is called.

if (data[1] == "")

{

alert("Please enter customer number");

return false;

}

if (data[2] == "")

{

alert("Please enter website url");

return false;

}

if (data[4] == "") {

alert("Please enter company name");

return false;

}

$.ajax({

url: "/company/UpdateData",

type: "GET",

data: { id: data[0], CustomerNumber: data[1], WebsiteUrl: data[2], LogoFileName: data[3], CompanyName: data[4],

Street: data[5], City: data[6], State: data[7],ZipCode: data[8], CompanyPhone: data[9] },

success: function (response) {

$('#altEditor-modal .modal-body .alert').remove();

var message = '<div class="alert alert-success" role="alert">\

<strong>Success!</strong> This record has been updated.\

</div>';

$('#altEditor-modal .modal-body').append(message);

}

});