How to post data inside javascript variable using AJAX

Question

Hello everyone I'm trying to post the data inside a JavaScript variable using AJAX, can anyone help me with the syntax?

<div class="container-fluid">
    <div class="card shadow mb-4">
        <div class="card-header py-3">



    <table class="table table-bordered" width="100%" cellspacing="0" id="myTableData">
        <thead>
            <tr>
                <th>A</th>
                <th>B</th>
                <th>C</th>
                <th>D</th>
                <th>E</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>val1</td>
                <td>val2</td>
                <td>val3</td>
                <td>500</td>
                <td>val5</td>
            </tr>
            <tr>
                <td>val1</td>
                <td>val2</td>
                <td>val3</td>
                <td>1500</td>
                <td>val5</td>
            </tr>
        </tbody>
    </table>
<script>
    init();
    function init(){

        addRowHandlers('myTableData');

    }

    function addRowHandlers(tableId) {
        if(document.getElementById(tableId)!=null){
            var table = document.getElementById(tableId);
            var rows = table.getElementsByTagName('tr');
            var A = "";
            var B = "";
            var C = "";
            var D = "";
            function Registro(A, B, C, D, E) {
                            this.A = A;
                            this.B = B; 
                            this.C = C; 
                            this.D = D;
                            this.E = E;
                        };
            var total_registros = [];

            // Use let instead of var to avoid a closure arount the looping variable
            for ( let i = 1; i < rows.length; i++) {

                rows[i].i = i;
                rows[i].onclick = function() {
                    A = table.rows[this.i].cells[0].innerHTML;                
                    B = table.rows[this.i].cells[1].innerHTML;
                    C = table.rows[this.i].cells[2].innerHTML;
                    D = table.rows[this.i].cells[3].innerHTML;
                    E = table.rows[this.i].cells[4].innerHTML;
                    var newRegistro = new Registro(A, B, C, D, E);
                    total_registros.push(newRegistro);
                    console.log("-Log- New data", total_registros);
                    // Now remove the handler because the job is done
                    rows[i].onclick = null;
                };
            }
        }
    }
</script>

Currently, this grabs data and saves it inside total_registros[], how am I able to post this using AJAX?

<script>

    function seleccionar() {
        $.ajax({
            url: 'myURL',
            type: 'post',
            dataType: 'SYNTAX',
            contentType: 'application/SYNTAX',
            data: JSON.stringify(total_registros),
            success: function (response) {
                $('#').html(response);
            },
            error: function (error) {
                console.log(error);
            }
        });
    }
</script>

On success I just expect it to return a html response inside a the #div I declare

This data will be retrieved inside a [HttpPost] Controller in MVC

[HttpPost]
public ActionResult View()
{
    return View();
}

How can I do this?

Answer 1

There are a few issues to point out. Your sample data generated is an array of objects like the following:

[
   { A: "val1", B: "val2", C: "val3", D: 1500, E: "val5" }, 
   { A: "val1", B: "val2", C: "val3", D: 1500, E: "val5" }
]

This is a great format for JSON to be posted to the MVC API routes.

MVC API:

Create a public class that represents the data above:

public class MyModel {
    public string A { get; set; }

    public string B { get; set; }

    public string C { get; set; }

    public int D { get; set; }

    public string E { get; set; }
}

Create routes to accept your post. I have shown two examples here - one to add a single object and one for an array of objects:

    [HttpPost]
    public JsonResult AddModel ([FromBody] MyModel model) {
        // process the model
        ... 

        return Json (model);
    }

    [HttpPost]
    public JsonResult AddModels ([FromBody] IList<MyModel> models) {
        // process the list of models
        ...

        return Json (models);
    }

The parameter of type MyModel specified will use binding to convert the JSON into an instance of MyModel for you.

Finally, update the JavaScript:

Change the options to post JSON by updating the content type to application/json then and stringify'ing the data:

// posting a single model
let data = JSON.stringify({ A: "val1", B: "val2", C: "val3", D: 1500, E: "val5" });
$.ajax({
    url: '/AddModel',
    type: 'post',
    contentType: 'application/json',
    data: data,
    success: function (response) {
        console.info(response);
    },
    error: function (error) {
        console.error(error);
    }
});

// posting a multiple models
data = JSON.stringify([{ A: "val1", B: "val2", C: "val3", D: 1500, E: "val5" }, { A: "val1", B: "val2", C: "val3", D: 1500, E: "val5" }]);
$.ajax({
    url: '/AddModels',
    type: 'post',
    contentType: 'application/json',
    data: data,
    success: function (response) {
        console.info(response);
    },
    error: function (error) {
        console.error(error);
    }
});