Reload table without updating whole page? Mvc Applications

Question

I have an application that insert some information through an Ajax call, so far all right, the data enter normally however, I can only view the changes after I do a refresh on the page, I wanted then, when entering the data through Ajax, my table was dynamically altered, without having to reload the page. If anyone can give me some example of how to do that, I would be most grateful for your help.

Ajax to insert data...

 <script type="text/javascript">
            $('#Salvar').click(function () {
                var url = "/Candidato/insert";
                var curso = $("#curso").val();
                var instituicao = $("#instituicao").val();
                $.post(url, { curso: curso, instituicao: instituicao }, function (data) {
                    $("index").html(data);
                });
            })
</script>

Answer 1

You will need to manipulate the DOM dynamically via Javascript, imagine that you have a table, just delete it and rebuild it with the new data when the server returns a response. The example you showed does not have the data structure returned nor the table, but let’s say you have the following structure:

<table id="table1">
    <thead>
        <tr>
            <th>Nome</th>
            <th>Idade</th>
        </tr> 
    </thead>
    <tbody id="table1Body">
        <tr>
            <td>João</td>
            <td>19</td>
        </tr>
    </tbody>
</table>

And that the server returns the following data structure that will be passed to the variable response:

{
    "data": [
        0: {
            "name": "Júlio",
            "age": 23
        },
        1: {
            "name": "Ricardo",
            "age": 18
        }
    ]
}

This data comes from the following ajax call:

<script type="text/javascript">
        $('#Salvar').click(function () {
            var url = "/Candidato/insert";
            var curso = $("#curso").val();
            var instituicao = $("#instituicao").val();
            $.ajax({
                url: url,
                data: { curso: curso, instituicao: instituicao },
                method: 'POST',
                success: (response) => {
                    // Limpa a tabela
                    $("#table1Body").empty();

                    for (let i = 0; i < response.data.length; i++) {
                        // Adiciona no corpo da tabela com id #table1Body
                        $("#table1Body").append(
                            '<tr>' +
                            `    <td>${response.data[i].name}</td>` + 
                            `    <td>${response.data[i].age}</td>` +
                            '</tr>'
                        )
                    }
                },
            });
        })
</script>

With jQuery, everything that is dynamic comes down to cleaning an element and rebuilding it with new data, from there you can treat exceptions and customize the customer response.