Hi AliYilmaz,
Check this example. Now please take its reference and correct your code.
Database
For this example I have used of Northwind database that you can download using the link given below.
Download Northwind Database
Controller
public class HomeController : Controller
{
// GET: /Home/
public ActionResult Index()
{
return View();
}
public JsonResult GetData()
{
EmployeeEntities entities = new EmployeeEntities();
IEnumerable<Customer> query = entities
.Employees
.Select(x => new Customer()
{
Id = x.EmployeeID,
Name = x.FirstName,
City = x.City,
Country = x.Country
});
DataTable dt = LINQResultToDataTable(query);
List<object[]> dataArray = new List<object[]>();
// For Heading Row.
List<object> columns = new List<object>();
for (int i = 0; i < dt.Columns.Count; i++)
{
columns.Add(dt.Columns[i].ColumnName);
}
dataArray.Add(columns.ToArray());
// For Data Row.
for (int i = 0; i < dt.Rows.Count; i++)
{
dataArray.Add(dt.Rows[i].ItemArray);
}
return Json(dataArray, JsonRequestBehavior.AllowGet);
}
public DataTable LINQResultToDataTable<T>(IEnumerable<T> Linqlist)
{
DataTable dt = new DataTable();
PropertyInfo[] columns = null;
if (Linqlist == null) return dt;
foreach (T Record in Linqlist)
{
if (columns == null)
{
columns = ((Type)Record.GetType()).GetProperties();
foreach (PropertyInfo GetProperty in columns)
{
Type colType = GetProperty.PropertyType;
if ((colType.IsGenericType) && (colType.GetGenericTypeDefinition() == typeof(Nullable<>)))
{
colType = colType.GetGenericArguments()[0];
}
dt.Columns.Add(new DataColumn(GetProperty.Name, colType));
}
}
DataRow dr = dt.NewRow();
foreach (PropertyInfo pinfo in columns)
{
dr[pinfo.Name] = pinfo.GetValue(Record, null) == null ? DBNull.Value : pinfo.GetValue
(Record, null);
}
dt.Rows.Add(dr);
}
return dt;
}
public ActionResult AddData(List<string[]> dataListFromTable)
{
var dataListTable = dataListFromTable;
return Json("Response, Data Received Successfully");
}
public class Customer
{
public int Id { get; set; }
public string Name { get; set; }
public string City { get; set; }
public string Country { get; set; }
}
}
View
<body>
<pre class="console" id="example1console">Click <b>Load</b> to load data from server</pre>
<div id="example1">
</div>
<div class="controls">
<button class="intext-btn btn btn-primary center-block" id="load" name="load">
Load</button>
<button class="intext-btn btn btn-primary center-block" id="save" name="save">
Save</button>
<input type="checkbox" autocomplete="off" checked="checked" id="autosave" name="autosave">Autosave</input>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js"></script>
<script type="text/javascript">
$(function () {
$('#hot-display-license-info').attr('style', 'display:none');
});
var $$ = function (id) { return document.getElementById(id); },
container = $$('example1'),
exampleConsole = $$('example1console'),
autosave = $$('autosave'),
save = $$('save'),
load = $$('load'),
autosaveNotification,
hot;
hot = new Handsontable(container, {
startRows: 8,
startCols: 6,
rowHeaders: true,
colHeaders: true,
afterChange: function (change, source) {
if (source === 'loadData') { return; }
if (!autosave.checked) { return; }
clearTimeout(autosaveNotification);
jQuery.ajax({
url: 'Home/AddData',
type: "POST",
dataType: "json",
contentType: 'application/json; charset=utf-8',
data: JSON.stringify(hot.getData()),
async: true,
processData: false,
cache: false,
success: function (data) {
exampleConsole.innerHTML = 'Changes will be autosaved';
autosaveNotification = setTimeout(function () {
exampleConsole.innerHTML = 'Autosaved (' + change.length + ' ' + 'cell' + (change.length > 1 ? 's' : '') + ')';
}, 1000);
},
error: function (xhr) {
exampleConsole.innerHTML = 'Autosave: No Response from Controller';
}
});
}
});
// GET method gets data from the Controller
Handsontable.dom.addEvent(load, 'click', function () {
jQuery.ajax({
url: '/Home/GetData',
type: "GET",
dataType: "json",
contentType: 'application/json;charset=utf-8',
async: true,
processData: false,
cache: false,
success: function (data) {
hot.loadData(data);
exampleConsole.innerHTML = 'Data loaded';
},
error: function (xhr) {
alert('error');
}
});
// POST method gets data to the Controller
Handsontable.dom.addEvent(save, 'click', function () {
jQuery.ajax({
url: '/Home/AddData',
type: "POST",
dataType: "json",
contentType: 'application/json; charset=utf-8',
data: JSON.stringify(hot.getSourceData()),
async: true,
processData: false,
cache: false,
success: function (data) {
exampleConsole.innerHTML = 'Data saved';
},
error: function (xhr) {
exampleConsole.innerHTML = 'Save error';
}
});
});
Handsontable.dom.addEvent(autosave, 'click', function () {
if (autosave.checked) {
exampleConsole.innerHTML = 'Changes will be autosaved';
} else {
exampleConsole.innerHTML = 'Changes will not be autosaved';
}
});
});
</script>
</body>
Screenshot
