How to dynamically grab data and post it

Question

Hello everyone I'm using ASP.NET C# MVC architecture to do this.

Right now I have a View "Index.cshtml" which has a table.

<table 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 AB = '';
        var BC = '';
        var CD = '';
        var DE = '';
        for ( var i = 1; i < rows.length; i++) {

            rows[i].i = i;
            rows[i].onclick = function() {

                AB = table.rows[this.i].cells[0].innerHTML;                
                BC = table.rows[this.i].cells[1].innerHTML;
                CD = table.rows[this.i].cells[2].innerHTML;
                DE = table.rows[this.i].cells[3].innerHTML;\
            };
        }
    }
}
</script>

Currently I can grab all the information within a row with this script and I'll probably use this ajax to do the post

<script>

    function seleccionar() {
        $.ajax({
            url: '@comercial.Models.Base.DirectorioRaiz()MovimientosCliente/SeleccionarOperacion',
            type: 'post',
            dataType: 'json',
            contentType: 'application/json',
            data: { operacion: operacion, metodo: metodo, monto: monto, fecha: fecha },
            success: function (response) {
                $('#divModalDeFacturas').html(response);
            },
            error: function (error) {
                console.log(error);
            }
        });
    }
</script>

Basically what I need is to grab all the data of a row I select with a buttom and use ajax to post it to another view, can anyone explain this to me?

How can I put both scripts to work together?

I know how to handle FormCollection form data that I post using inputs, most of the times I use hidden inputs inside the td's of the table but I require to do this dynamically and it gets a little difficult that way because I can't put static variables to pull the data, at least the way I tried it, it did not work.

Right now I think the best way would be to put this data in my controller, I've read another stack answer that says that these inputs are grabbed by the controller using paramters inside the ActionResult like this

[HttpPost]
public ActionResult MyView(int val1, int val2, intval3, etc...)
{
return View();
}

I dont know I feel lost browsing the sea of data available on the internet D:

This is answer I said that shows how to retrieve this information by the controller

Link to answer

Answer 1

First of all your action must be decorated with the HttpPostAttribute if you are looking to use POST in your example. The view you must return has to be specified on your return statement:

[HttpPost]
public ActionResult MyView(int val1, int val2, intval3, etc...)
{
return View("The view you want to return");
}

Also looking at your question and javascript code it's not clear what you're aiming for, are you looking to populate an area in your index view with some dynamic content, or are you looking to redirect to another view?

Then your javascript code is quite wrong as well. First of all you are specifying aa json object on your 'data' parameter, but then you're setting the content type to 'application/x-www-form-urlencoded' instead of 'application/json'. Also, If you're trying to post a json, then your 'datatype' should be 'json' not 'text'. Then your url, appears to be wrong. To avoid confusion and error always use the Url.Action method where you can specify the required action an controller.

To be honest, if I was you, I would revisit the MVC docs, since it appears that you are missing a lot of knowledge on MVC, as it provides a lot of examples and walkthroughs which are really helpful. ( https://docs.microsoft.com/en-us/aspnet/mvc/overview/getting-started/ ).

I would also suggest a recap on the Http protocol, which you can google and there's plenty of sources out there.