ASP.NET and jQuery pass an tr row as class

Question

I have here the following HTML:

<tr>
   <td><input type='text' name='ID' value='345924' /></td>
   <td><input type='text' name='carNo' value='1' /></td>
   <td><input type='text' name='BuyerName' value='Steve' /></td>
   <td><input type='text' name='BuyDate' value='3/15/2016' /></td>
   <td><input type='text' name='Description' value='Steve payment went through' /></td>
   <td><input type='text' name='amount' value='' /></td>
   <td><input type='text' name='payedSoFar' value='73501.71' /></td>
   <td><input type='text' name='lastPaid' value='2/19/2016' /></td>
   <td><input type='text' name='notified' value='s' /></td>
   <td><input type='text' name='notifiedDate' value='2/22/2016' /></td>
   <td><input type='text' name='issues' value='' /></td>
   <td><input type='text' name='issueDate' value='' /></td>
   <td><input type='text' name='Notes' value='' /></td>
</tr>

I have about 13 of these row, with different data of course.

I have this ajax call which calls an API Controller, this is triggers when an input text gets changed:

$("input[type=text]").on("change", function () {

    $.ajax({
                url: "/api/Action/updateCarInfo",
                type: "GET",
                error: function (request, status, error) {
                },
                success: function (data) {
                }
            });

});

It call this ASP.NET API Controller:

[ResponseType(typeof(void))]
        public IHttpActionResult updateCarInfo(carClass cars)
        {
            if (!ModelState.IsValid)
            {
                return BadRequest(ModelState);
            }

            db.Entry(cars).State = EntityState.Modified;

            db.SaveChanges();

            return StatusCode(HttpStatusCode.NoContent);
        }

What I am trying to do, it on input change, pass the whole row via jquery ajax to my ASP.NET API Controller as a class. Each column in the row are class items and looking to pass it as a class. I hope this makes sense.

I CANT USE THE FOLLOWING:

$(this).closest("form").submit()

as its not in a form, but an html table.

UDPATE

I can grab the whole row, via $(this).parent().parent().find('input').serialize()

but when I try to pass it to my ASP.NET API Controller I get null

one of many examples http://stackoverflow.com/questions/2737525/how-do-i-build-a-json-object-to-send-to-an-ajax-webservice — Mantas Čekanauskas, Apr 11 '17 at 13:29

Erick Boshoff · Answer 1 · 2017-04-11T13:53:26.660

You will need to construct the data on your client as an object and pass that through your ajax call with the 'data' property and in your ASP.Net application you will need an corresponding DataContract or class that matches your client DataObject. You can use your controller then as using the "[FromBody]" as follow:

[ResponseType(typeof(void))]
public IHttpActionResult updateCarInfo([FromBody] carClass cars)
{
    if (!ModelState.IsValid)
    {
        return BadRequest(ModelState);
    }

    db.Entry(cars).State = EntityState.Modified;

    db.SaveChanges();

    return StatusCode(HttpStatusCode.NoContent);
}

Important to remember is, is that your object that you are passing on the client must match your datacontract / class on the server.

CLIENT OBJECT (JAVASRIPT)

dataObj = {
    ID: "1234567890",
    Name: "Foo"
}

SERVER OBJECT (.NET)

This would be your 'Model' for instance:

public class
{
    public string ID { get; set }
    public string Name { get; set; }
}

I see you have it as 'GET' in your ajax call. Have you tried it with 'POST' ? — Erick Boshoff, Apr 11 '17 at 16:14

ASP.NET and jQuery pass an tr row as class

1 Answers1