How to take the contents of an HTML Table and convert into a C# List<>?

Question

I have a table html which is created dynamically by the user. I need to take all the data entered by him in the table and generate a List to be able to save later in a database.

Below are project data:

public class Procedimento
{
    string cnes;
    string cbo;
    string profissional;
    string procedimento;
    int idade;
    int quant;
}

Table code:

<table id="tabelaProducao">
    <tbody>
        <tr>
            <th style="text-align:center;">CNES</th>
            <th style="text-align:center;">CBO</th>
            <th style="text-align:center;">Profissional</th>
            <th style="text-align:center;">Procedimento</th>
            <th style="text-align:center;">Idade</th>
            <th style="text-align:center;">Quant</th>
        </tr>
        <tr>
            <td>7559267</td>
            <td>352210</td>
            <td>RENATA CARVALHO DA SILVA</td>
            <td>0101050062</td>
            <td>0</td>
            <td>18</td>
        </tr>
        <tr>
            <td>7559267</td>
            <td>352210</td>
            <td>JOSE SILVANIR DA ROCHA</td>
            <td>0101050062</td>
            <td>0</td>
            <td>18</td>
        </tr>
    </tbody>
</table>

I think using Json should work, but still do not know how to do.

The data will be received via POST and the Controller will read this data and save in the database.

Answer 1

Place classes in each column, call each row and encapsulate by class.

HTML:

<table id="tabelaProducao">
    <thead>
        <tr>
            <th style="text-align:center;">CNES</th>
            <th style="text-align:center;">CBO</th>
            <th style="text-align:center;">Profissional</th>
            <th style="text-align:center;">Procedimento</th>
            <th style="text-align:center;">Idade</th>
            <th style="text-align:center;">Quant</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="cnes">7559267</td>
            <td class="cbo">352210</td>
            <td class="profissional">JOSE SILVANIR DA ROCHA</td>
            <td class="procedimento">0101050062</td>
            <td class="idade">0</td>
            <td class="quant">18</td>
        </tr>
    </tbody>
</table>

JS:

function encapsularDadosTabela() {
    var listaTabela = [];
    $.each($("#tabelaProducao > tbody > tr"), function (index, value) {
        var linhaTabela = $(this);
        var itemTabela = {
            cnes: linhaTabela.find(".cnes").val(),
            cbo: linhaTabela.find(".cbo").val(),
            profissional: linhaTabela.find(".profissional").val(),
            procedimento: linhaTabela.find(".procedimento").val(),
            idade: linhaTabela.find(".idade").val(),
            quant: linhaTabela.find(".quant").val()
        };
        listaTabela.push(itemTabela);
    });
    return listaTabela;
};

function chamadaAjax(){
    $.ajax({
        url: "URLAQUI",
        type: "POST",
        data: { model: encapsularDadosTabela() },
        success: function (data) {
        }
    });
};

CONTROLLER:

[HttpPost]
public ActionResult SuaAction(IEnumerable<Procedimento> model)
{
    return View();
}