How to assign value from data table to c# model?

afaizal07

I have 2d array in javascript call as "networkItems" which contain all the data that i display in data table. I can read the database and display the data into my data table. (manually add)

But i dont know how to use the array/data table to map the value of each row to my c# model. i need the data to be map to model so i can save them to database.

For now, i use two different table, one for display the database and another one for user to insert (can edit and delete).

This is how I do to get value from database (for display) :

@foreach (var childItem in items)
{
if (childItem.Id != 0)
{
<tr>
<td>@Html.DisplayFor(p => p.ItemsPaper[indexForItem].Items[indexForChildItem].Id)</td>
<td>@Html.DisplayFor(p => p.ItemsPaper[indexForItem].Items[indexForChildItem].Hostname)</td>
<td>@Html.DisplayFor(p => p.ItemsPaper[indexForItem].Items[indexForChildItem].Model)</td>
<td>@Html.DisplayFor(p => p.ItemsPaper[indexForItem].Items[indexForChildItem].IPAddress)</td>
<td>@Html.DisplayFor(p => p.ItemsPaper[indexForItem].Items[indexForChildItem].Location)</td>
<td>@Html.DisplayFor(p => p.ItemsPaper[indexForItem].Items[indexForChildItem].Remarks)</td>
<td></td>
</tr>
}
index++;
indexForChildItem++;
}

This is the table i use to load the data table for user to insert the value to "networkItems" variable. :

This is my insert code:

$("#addValueNetwork").click(function () {
//create object
var networkdeviceItem = {};

    //get val from popup input
    networkdeviceItem.Number = index;
    networkdeviceItem.Hostname_network = document.getElementById("inputhostname_network").value;
    networkdeviceItem.Model_network = document.getElementById("inputmodel_network").value;
    networkdeviceItem.Ipaddress_network = document.getElementById("inputipaddress_network").value;
    networkdeviceItem.Location_network = document.getElementById("inputlocation_network").value;
    networkdeviceItem.Remarks_network = document.getElementById("inputremarks_network").value;
    //networkdeviceItem.EditDelete_network = "";
    //console.log(networkdeviceItem);                         

    //convert obj to array - get value
    var networkdeviceItemArr = Object.values(networkdeviceItem);

    //insert obj
    networkdeviceItems.push(networkdeviceItem);
    console.log(networkdeviceItems);

    // insert array
    networkdeviceItemsArr.push(networkdeviceItemArr);
    console.log(networkdeviceItemsArr);

    if (index == 1) {

        //set input to table data
        $('#example').dataTable({
            "destroy": true,
            data: networkdeviceItems,
            columns: [
                {
                    title: "No",
                    render: function (data, type, row, meta) {
                        return meta.row + 1; // This contains the row index
                    }
                },
                { title: "Hostname", data: "Hostname_network" },
                { title: "Model", data: "Model_network" },
                { title: "IP Address", data: "Ipaddress_network" },
                { title: "Location", data: "Location_network" },
                { title: "Remarks", data: "Remarks_network" },
                {
                    title: "",
                    render: function (data, type, row, meta) {
                        var a = '<button type="button" class="editButton"> Edit </button>';
                        var b = '<button type="button" class="deleteButton"> Delete </button>';
                        return a + " " + b;
                    }
                }
            ]
        });
    }

    if (index > 1) {

        //remove extra info,paginate,length,filter - datatable defect
        $('#example_info').remove();
        $('#example_paginate').remove();
        $('#example_length').remove();
        $('#example_filter').remove();


        //set input to table data
        $('#example').dataTable({
            "destroy": true,
            data: networkdeviceItems,
            columns: [
                {
                    title: "No",
                    render: function (data, type, row, meta) {
                        return meta.row + 1; // This contains the row index
                    }
                },
                { title: "Hostname", data: "Hostname_network" },
                { title: "Model", data: "Model_network" },
                { title: "IP Address", data: "Ipaddress_network" },
                { title: "Location", data: "Location_network" },
                { title: "Remarks", data: "Remarks_network" },
                {
                    title: "",
                    render: function (data, type, row, meta) {
                        var a = '<button type="button" class="editButton"> Edit </button>';
                        var b = '<button type="button" class="deleteButton"> Delete </button>';
                        return a + " " + b;
                    }
                }
            ],
        });
    }

Appreciate your help on this. Thanks